@mlw-packages/react-components 1.5.7 → 1.5.9

package/dist/index.js

@@ -500,6 +500,7 @@ __export(index_exports, {
   AvatarFallbackBase: () => AvatarFallbackBase,
   AvatarImageBase: () => AvatarImageBase,
   BadgeBase: () => BadgeBase,
+  BarChart: () => BarChart_default,
   BreadcrumbBase: () => BreadcrumbBase,
   BreadcrumbEllipsisBase: () => BreadcrumbEllipsisBase,
   BreadcrumbItemBase: () => BreadcrumbItemBase,
@@ -521,6 +522,7 @@ __export(index_exports, {
   CarouselItemBase: () => CarouselItemBase,
   CarouselNextBase: () => CarouselNextBase,
   CarouselPrevious: () => CarouselPrevious,
+  Chart: () => Chart_default,
   CheckboxBase: () => CheckboxBase,
   CloseAllButton: () => CloseAllButton_default,
   CollapsibleBase: () => CollapsibleBase,
@@ -599,6 +601,7 @@ __export(index_exports, {
   InputOTPSeparatorBase: () => InputOTPSeparatorBase,
   InputOTPSlotBase: () => InputOTPSlotBase,
   LabelBase: () => LabelBase_default,
+  LineChart: () => LineChart_default,
   LoadingBase: () => LoadingBase,
   ModeToggleBase: () => ModeToggleBase,
   MultiCombobox: () => MultiCombobox,
@@ -611,6 +614,7 @@ __export(index_exports, {
   NavigationMenuTriggerBase: () => NavigationMenuTriggerBase,
   NavigationMenuViewportBase: () => NavigationMenuViewportBase,
   PeriodsDropdown: () => PeriodsDropdown_default,
+  PieChart: () => PieChart_default,
   PopoverAnchorBase: () => PopoverAnchorBase,
   PopoverBase: () => PopoverBase,
   PopoverContentBase: () => PopoverContentBase,
@@ -706,6 +710,7 @@ __export(index_exports, {
   resolveChartMargins: () => resolveChartMargins,
   resolveContainerPaddingLeft: () => resolveContainerPaddingLeft,
   toast: () => toast,
+  useChartHighlights: () => useChartHighlights,
   useDrag: () => useDrag,
   useIsMobile: () => useIsMobile,
   useTheme: () => useTheme
@@ -729,19 +734,19 @@ var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
 var import_jsx_runtime = require("react/jsx-runtime");
 var buttonVariantsBase = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive active:scale-95",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
-        outline: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-background dark:border-input dark:hover:bg-background/95",
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
-        default: " px-4 py-2 has-[>svg]:px-3",
+        default: "h-9 py-2 px-4 has-[>svg]:px-3",
         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9"
@@ -2367,7 +2372,7 @@ var InputBase = React12.forwardRef(
         "div",
         {
           className: cn(
-            "flex items-center rounded-md transition focus-within:ring-1 focus-within:ring-ring focus-within:border-ring bg-background overflow-hidden",
+            "flex items-center rounded-md transition h-9 focus-within:ring-1 focus-within:ring-ring focus-within:border-ring bg-background overflow-hidden",
             type !== "file" && "border border-input"
           ),
           children: [
@@ -2377,7 +2382,7 @@ var InputBase = React12.forwardRef(
               {
                 type,
                 className: cn(
-                  "w-full flex-1 text-sm py-2 px-3 focus:outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 bg-background text-foreground",
+                  "w-full flex-1 text-sm p-1.5  px-3 focus:outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 bg-background text-foreground",
                   className
                 ),
                 ref,
@@ -2452,7 +2457,7 @@ function ComboboxBase({
                 role: "combobox",
                 "aria-expanded": open,
                 className: cn(
-                  "flex items-start gap-2 justify-between h-full border border-input",
+                  "flex items-start gap-2 justify-between",
                   errorMessage && "border-red-500"
                 ),
                 "data-testid": testIds.trigger ?? "combobox-trigger",
@@ -3123,34 +3128,78 @@ function NavigationMenuIndicatorBase({
 var React17 = __toESM(require("react"));
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"));
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var ProgressBase = React17.forwardRef(({ className, value, label, leftIcon, rightIcon, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-1 w-full min-w-[150px]", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LabelBase_default, { className: "py-2", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
-      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center", children: leftIcon }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        ProgressPrimitive.Root,
-        {
-          ref,
-          className: cn(
-            "relative h-3 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800 shadow-inner transition-all",
-            className
-          ),
-          value,
-          ...props,
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            ProgressPrimitive.Indicator,
-            {
-              className: "h-full w-full flex-1 bg-primary transition-all duration-500 ease-in-out",
-              style: { transform: `translateX(-${100 - (value || 0)}%)` }
-            }
-          )
-        }
-      ),
-      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center", children: rightIcon })
-    ] })
-  ] });
-});
+var ProgressBase = React17.forwardRef(
+  ({
+    className,
+    value,
+    label,
+    leftIcon,
+    rightIcon,
+    variant = "bar",
+    segments = 5,
+    steps = [],
+    currentStep = 0,
+    ...props
+  }, ref) => {
+    switch (variant) {
+      case "segments":
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          ProgressSegmentsBase,
+          {
+            label,
+            segments,
+            value: value || 0
+          }
+        );
+      case "panels":
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          ProgressPanelsBase,
+          {
+            label,
+            steps,
+            currentStep
+          }
+        );
+      case "circles":
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          ProgressCirclesBase,
+          {
+            label,
+            steps,
+            currentStep
+          }
+        );
+      case "bar":
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-1 w-full min-w-[150px]", children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LabelBase_default, { className: "py-2", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
+            leftIcon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center", children: leftIcon }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              ProgressPrimitive.Root,
+              {
+                ref,
+                className: cn(
+                  "relative h-3 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800 shadow-inner transition-all",
+                  className
+                ),
+                value,
+                ...props,
+                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  ProgressPrimitive.Indicator,
+                  {
+                    className: "h-full w-full flex-1 bg-primary transition-all duration-500 ease-in-out",
+                    style: { transform: `translateX(-${100 - (value || 0)}%)` }
+                  }
+                )
+              }
+            ),
+            rightIcon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center", children: rightIcon })
+          ] })
+        ] });
+    }
+  }
+);
 ProgressBase.displayName = "ProgressBase";
 var ProgressSegmentsBase = ({
   label,
@@ -4453,7 +4502,8 @@ var TabsListBase = React27.forwardRef(({ className, ...props }, ref) => /* @__PU
   {
     ref,
     className: cn(
-      "relative flex w-full items-center justify-start gap-4 border-b-2 border-border",
+      "relative flex w-full items-center justify-start gap-2 border-b border-border",
+      "bg-transparent",
       className
     ),
     ...props
@@ -4465,13 +4515,15 @@ var TabsTriggerBase = React27.forwardRef(({ className, ...props }, ref) => /* @_
   {
     ref,
     className: cn(
-      "relative inline-flex items-center justify-center whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-3",
+      "relative inline-flex items-center justify-center whitespace-nowrap px-4 py-2 text-sm font-medium",
+      "text-muted-foreground hover:text-foreground",
+      "transition-colors duration-300 ease-in-out",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       "disabled:pointer-events-none disabled:opacity-50",
       "data-[state=active]:text-primary",
-      "after:absolute after:bottom-0 after:left-0 after:h-[1.5px] after:w-full",
+      "after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full",
       "after:scale-x-0 after:bg-primary after:origin-left",
-      "after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65,0,0.35,1)]",
+      "after:transition-transform after:duration-500 after:ease-[cubic-bezier(0.34,1.56,0.64,1)]",
       "data-[state=active]:after:scale-x-100",
       className
     ),
@@ -4483,8 +4535,8 @@ var TabsContentBase = React27.forwardRef(({ className, ...props }, ref) => /* @_
   {
     ref,
     className: cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "animate-fade-in",
+      "mt-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "animate-in fade-in-0 duration-500 ease-in-out",
       className
     ),
     ...props
@@ -4494,41 +4546,198 @@ TabsContentBase.displayName = TabsPrimitive.Content.displayName;
 
 // src/components/ui/TextAreaBase.tsx
 var React28 = __toESM(require("react"));
+var import_framer_motion6 = require("framer-motion");
+var import_react23 = require("@phosphor-icons/react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
-var TextAreaBase = React28.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    "textarea",
-    {
-      className: cn(
-        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
+var TextAreaBase = React28.forwardRef(
+  ({ className, clearable = false, onClear, ...props }, ref) => {
+    const [isFocused, setIsFocused] = React28.useState(false);
+    const [hasContent, setHasContent] = React28.useState(
+      !!props.value || !!props.defaultValue
+    );
+    const [showConfirmTooltip, setShowConfirmTooltip] = React28.useState(false);
+    const textareaRef = React28.useRef(null);
+    const handleFocus = (e) => {
+      setIsFocused(true);
+      props.onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+      setIsFocused(false);
+      props.onBlur?.(e);
+    };
+    const handleChange = (e) => {
+      setHasContent(e.target.value.length > 0);
+      props.onChange?.(e);
+    };
+    const handleClearClick = () => {
+      setShowConfirmTooltip(true);
+    };
+    const handleConfirmClear = () => {
+      if (textareaRef.current) {
+        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+          window.HTMLTextAreaElement.prototype,
+          "value"
+        )?.set;
+        if (nativeInputValueSetter) {
+          nativeInputValueSetter.call(textareaRef.current, "");
+          const event = new Event("input", { bubbles: true });
+          textareaRef.current.dispatchEvent(event);
+        }
+        setHasContent(false);
+        setShowConfirmTooltip(false);
+        textareaRef.current.focus();
+        onClear?.();
+      }
+    };
+    const handleCancelClear = () => {
+      setShowConfirmTooltip(false);
+    };
+    React28.useImperativeHandle(ref, () => textareaRef.current);
+    React28.useEffect(() => {
+      setHasContent(!!props.value || !!props.defaultValue);
+    }, [props.value, props.defaultValue]);
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        "textarea",
+        {
+          className: cn(
+            "peer flex min-h-[80px] min-w-[200px] w-full rounded-lg border border-input bg-background/50 backdrop-blur-sm",
+            "px-4 py-3 text-base shadow-sm placeholder:text-muted-foreground/60",
+            "transition-all duration-300 ease-out",
+            "hover:border-input/80 hover:shadow-md",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:border-ring",
+            "focus-visible:shadow-lg focus-visible:bg-background",
+            "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/30",
+            "resize",
+            "md:text-sm",
+            clearable && hasContent && "pr-10",
+            className
+          ),
+          ref: textareaRef,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          onChange: handleChange,
+          ...props
+        }
       ),
-      ref,
-      ...props
-    }
-  );
-});
+      clearable && hasContent && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipProviderBase, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+        TooltipBase,
+        {
+          open: showConfirmTooltip,
+          onOpenChange: setShowConfirmTooltip,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipTriggerBase, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              import_framer_motion6.motion.button,
+              {
+                type: "button",
+                initial: { opacity: 0, scale: 0.8 },
+                animate: { opacity: 1, scale: 1 },
+                exit: { opacity: 0, scale: 0.8 },
+                transition: { duration: 0.2 },
+                onClick: handleClearClick,
+                className: cn(
+                  "absolute top-3 right-3 p-1.5 rounded-md",
+                  "text-muted-foreground/50 hover:text-destructive hover:bg-destructive/10",
+                  "transition-all duration-200",
+                  "focus:outline-none focus:ring-2 focus:ring-destructive/30",
+                  "disabled:opacity-50 disabled:cursor-not-allowed"
+                ),
+                disabled: props.disabled,
+                "aria-label": "Limpar texto",
+                children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react23.TrashIcon, { size: 16, weight: "regular" })
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+              TooltipContentBase,
+              {
+                side: "left",
+                className: "bg-background border border-border shadow-lg p-3 flex flex-col gap-2",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm text-foreground font-medium mb-1", children: "Limpar todo o texto?" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleConfirmClear,
+                        className: cn(
+                          "px-3 py-1.5 text-xs rounded-md font-medium",
+                          "bg-destructive text-destructive-foreground",
+                          "hover:bg-destructive/90",
+                          "transition-colors"
+                        ),
+                        children: "Confirmar"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleCancelClear,
+                        className: cn(
+                          "px-3 py-1.5 text-xs rounded-md font-medium",
+                          "bg-secondary text-secondary-foreground",
+                          "hover:bg-secondary/80",
+                          "transition-colors"
+                        ),
+                        children: "Cancelar"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        import_framer_motion6.motion.div,
+        {
+          className: "pointer-events-none absolute inset-0 rounded-lg",
+          initial: { opacity: 0 },
+          animate: { opacity: isFocused ? 1 : 0 },
+          transition: { duration: 0.3 },
+          children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "absolute inset-0 rounded-lg bg-gradient-to-r from-ring/20 via-ring/10 to-ring/20 blur-sm" })
+        }
+      ),
+      isFocused && hasContent && props.maxLength && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+        import_framer_motion6.motion.div,
+        {
+          initial: { opacity: 0, y: -10 },
+          animate: { opacity: 1, y: 0 },
+          exit: { opacity: 0, y: -10 },
+          className: "absolute bottom-2 right-3 text-xs text-muted-foreground/70 font-medium",
+          children: [
+            props.value?.length || 0,
+            " / ",
+            props.maxLength
+          ]
+        }
+      )
+    ] });
+  }
+);
 TextAreaBase.displayName = "TextAreaBase";
 
 // src/components/mode-toggle.tsx
-var import_react24 = require("@phosphor-icons/react");
+var import_react25 = require("@phosphor-icons/react");
 
 // src/components/theme-provider.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var initialState = {
   theme: "system",
   setTheme: () => null
 };
-var ThemeProviderContext = (0, import_react23.createContext)(initialState);
+var ThemeProviderContext = (0, import_react24.createContext)(initialState);
 function ThemeProviderBase({
   children,
   defaultTheme = "system",
   storageKey = "app-ui-theme",
   ...props
 }) {
-  const [theme, setThemeState] = (0, import_react23.useState)(defaultTheme);
-  (0, import_react23.useEffect)(() => {
+  const [theme, setThemeState] = (0, import_react24.useState)(defaultTheme);
+  (0, import_react24.useEffect)(() => {
     const root = window.document.documentElement;
     root.classList.remove(
       "light",
@@ -4554,7 +4763,7 @@ function ThemeProviderBase({
       document.body.style.color = "";
     }
   }, [theme]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const stored = localStorage.getItem(storageKey);
     if (stored) setThemeState(stored);
   }, [storageKey]);
@@ -4568,7 +4777,7 @@ function ThemeProviderBase({
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ThemeProviderContext.Provider, { ...props, value, children });
 }
 var useTheme = () => {
-  const context = (0, import_react23.useContext)(ThemeProviderContext);
+  const context = (0, import_react24.useContext)(ThemeProviderContext);
   if (context === void 0)
     throw new Error("useTheme must be used within a ThemeProvider");
   return context;
@@ -4601,8 +4810,8 @@ function ModeToggleBase({
         className: "relative overflow-hidden border-transparent",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react24.SunIcon, { className: `h-[1.2rem] w-[1.2rem] transition-transform duration-300 ${isDark ? "rotate-90 scale-0" : "rotate-0 scale-100"}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react24.MoonIcon, { className: `absolute h-[1.2rem] w-[1.2rem] transition-transform duration-300 ${isDark ? "rotate-0 scale-100" : "rotate-90 scale-0"}` })
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react25.SunIcon, { className: `h-[1.2rem] w-[1.2rem] transition-transform duration-300 ${isDark ? "rotate-90 scale-0" : "rotate-0 scale-100"}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react25.MoonIcon, { className: `absolute h-[1.2rem] w-[1.2rem] transition-transform duration-300 ${isDark ? "rotate-0 scale-100" : "rotate-90 scale-0"}` })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "sr-only", children: "Toggle theme" })
         ]
@@ -4615,7 +4824,7 @@ function ModeToggleBase({
         className: "flex items-center justify-between hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
         children: [
           themeLabels[theme],
-          currentTheme === theme && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react24.CheckIcon, { className: "h-4 w-4 opacity-100" })
+          currentTheme === theme && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react25.CheckIcon, { className: "h-4 w-4 opacity-100" })
         ]
       },
       theme
@@ -4623,43 +4832,119 @@ function ModeToggleBase({
   ] });
 }
 
+// src/components/ui/DestructiveDialog.tsx
+var React29 = __toESM(require("react"));
+var import_react26 = require("@phosphor-icons/react");
+var import_jsx_runtime43 = require("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__ */ (0, import_jsx_runtime43.jsx)(AlertDialogTriggerBase, { asChild: true, children }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AlertDialogTriggerBase, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ButtonBase, { variant: "destructive", children: triggerContent ?? "Excluir" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(AlertDialogBase, { children: [
+    triggerEl,
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      AlertDialogContentBase,
+      {
+        role: "alertdialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        "aria-describedby": descriptionId,
+        className: cn("border border-destructive bg-background"),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-start gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex items-center justify-center w-10 h-10 rounded-full ring-1 ring-destructive/30", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react26.XCircleIcon, { className: "w-6 h-6 text-destructive" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                AlertDialogTitleBase,
+                {
+                  id: titleId,
+                  className: "text-lg sm:text-xl font-semibold text-destructive",
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                AlertDialogDescriptionBase,
+                {
+                  id: descriptionId,
+                  className: "mt-2 text-sm text-muted-foreground",
+                  children: description
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(AlertDialogFooterBase, { className: "mt-2 flex justify-end gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              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__ */ (0, import_jsx_runtime43.jsx)(
+              AlertDialogActionBase,
+              {
+                onClick: onConfirm,
+                className: cn(
+                  buttonVariantsBase({ variant: "destructive", size: "default" })
+                ),
+                children: "Confirmar"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
 // src/components/date-time-picker/DateTimePicker.tsx
 var import_date_fns = require("date-fns");
 
 // src/components/date-time-picker/calendar.tsx
-var React29 = __toESM(require("react"));
+var React30 = __toESM(require("react"));
 var import_react_day_picker2 = require("react-day-picker");
-var import_react25 = require("@phosphor-icons/react");
-var import_framer_motion6 = require("framer-motion");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_react27 = require("@phosphor-icons/react");
+var import_framer_motion7 = require("framer-motion");
+var import_jsx_runtime44 = require("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__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "div",
     {
       className: cn(
-        "rounded-2xl border bg-background p-4 shadow-lg overflow-hidden w-full h-full flex flex-col",
+        "rounded-md border bg-background p-4 shadow-lg overflow-hidden w-full h-full flex flex-col",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "relative flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_framer_motion6.AnimatePresence, { initial: false, mode: "wait", custom: direction, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "relative flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_framer_motion7.AnimatePresence, { initial: false, mode: "wait", custom: direction, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "div",
         {
           className: "w-full h-full flex flex-col",
-          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             import_react_day_picker2.DayPicker,
             {
               showOutsideDays,
@@ -4708,8 +4993,8 @@ function CalendarBase2({
                 ...classNames
               },
               components: {
-                IconLeft: () => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react25.CaretLeftIcon, { className: "h-4 w-4" }),
-                IconRight: () => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react25.CaretRightIcon, { className: "h-4 w-4" })
+                IconLeft: () => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react27.CaretLeftIcon, { className: "h-4 w-4" }),
+                IconRight: () => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react27.CaretRightIcon, { className: "h-4 w-4" })
               },
               ...props
             }
@@ -4724,15 +5009,15 @@ CalendarBase2.displayName = "CalendarBase";
 
 // src/components/date-time-picker/DateTimePicker.tsx
 var import_locale = require("date-fns/locale");
-var import_react28 = require("react");
+var import_react30 = require("react");
 
 // src/components/date-time-picker/TimePicker.tsx
-var import_framer_motion7 = require("framer-motion");
-var React31 = __toESM(require("react"));
+var import_framer_motion8 = require("framer-motion");
+var React32 = __toESM(require("react"));
 
 // src/components/date-time-picker/TimePickerInput.tsx
-var import_react26 = require("@phosphor-icons/react");
-var import_react27 = __toESM(require("react"));
+var import_react28 = require("@phosphor-icons/react");
+var import_react29 = __toESM(require("react"));
 
 // src/components/date-time-picker/time-picker-utils.ts
 function isValidHour(value) {
@@ -4874,8 +5159,8 @@ function display12HourValue(hours) {
 }
 
 // src/components/date-time-picker/TimePickerInput.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var TimePickerInput = import_react27.default.forwardRef(
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var TimePickerInput = import_react29.default.forwardRef(
   ({
     className,
     type = "tel",
@@ -4894,10 +5179,10 @@ var TimePickerInput = import_react27.default.forwardRef(
     label,
     ...props
   }, ref) => {
-    const [flag, setFlag] = import_react27.default.useState(false);
-    const [prevIntKey, setPrevIntKey] = import_react27.default.useState("0");
-    const [isFocused, setIsFocused] = import_react27.default.useState(false);
-    import_react27.default.useEffect(() => {
+    const [flag, setFlag] = import_react29.default.useState(false);
+    const [prevIntKey, setPrevIntKey] = import_react29.default.useState("0");
+    const [isFocused, setIsFocused] = import_react29.default.useState(false);
+    import_react29.default.useEffect(() => {
       if (flag) {
         const timer = setTimeout(() => {
           setFlag(false);
@@ -4905,7 +5190,7 @@ var TimePickerInput = import_react27.default.forwardRef(
         return () => clearTimeout(timer);
       }
     }, [flag]);
-    const calculatedValue = import_react27.default.useMemo(() => {
+    const calculatedValue = import_react29.default.useMemo(() => {
       return getDateByType(date, picker);
     }, [date, picker]);
     const calculateNewValue = (key) => {
@@ -4961,8 +5246,8 @@ var TimePickerInput = import_react27.default.forwardRef(
       const baseLabel = getPickerLabel();
       return `${baseLabel}, valor atual: ${calculatedValue}.`;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "relative group flex flex-col items-center", children: [
-      getPickerLabel() && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "relative group flex flex-col items-center", children: [
+      getPickerLabel() && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "label",
         {
           htmlFor: id || picker,
@@ -4970,7 +5255,7 @@ var TimePickerInput = import_react27.default.forwardRef(
           children: getPickerLabel()
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
         "div",
         {
           className: cn(
@@ -4978,7 +5263,7 @@ var TimePickerInput = import_react27.default.forwardRef(
             "transition-all duration-200"
           ),
           children: [
-            showArrows && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            showArrows && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               "button",
               {
                 type: "button",
@@ -4994,11 +5279,11 @@ var TimePickerInput = import_react27.default.forwardRef(
                 ),
                 tabIndex: -1,
                 "aria-label": `Incrementar ${getPickerLabel().toLowerCase()}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react26.CaretUpIcon, { size: 14, className: "sm:w-4 sm:h-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react28.CaretUpIcon, { size: 14, className: "sm:w-4 sm:h-4" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "relative", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 "input",
                 {
                   ref,
@@ -5043,9 +5328,9 @@ var TimePickerInput = import_react27.default.forwardRef(
                   ...props
                 }
               ),
-              isFocused && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "absolute inset-0 rounded-lg ring-2 ring-primary/20 pointer-events-none animate-pulse" })
+              isFocused && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "absolute inset-0 rounded-lg ring-2 ring-primary/20 pointer-events-none animate-pulse" })
             ] }),
-            showArrows && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            showArrows && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               "button",
               {
                 type: "button",
@@ -5061,7 +5346,7 @@ var TimePickerInput = import_react27.default.forwardRef(
                 ),
                 tabIndex: -1,
                 "aria-label": `Decrementar ${getPickerLabel().toLowerCase()}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react26.CaretDownIcon, { size: 14, className: "sm:w-4 sm:h-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react28.CaretDownIcon, { size: 14, className: "sm:w-4 sm:h-4" })
               }
             )
           ]
@@ -5073,16 +5358,16 @@ var TimePickerInput = import_react27.default.forwardRef(
 TimePickerInput.displayName = "TimePickerInput";
 
 // src/components/date-time-picker/TimePicker.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("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: {
@@ -5098,20 +5383,20 @@ function TimePicker({
     hidden: { opacity: 0, y: 10 },
     visible: { opacity: 1, y: 0 }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-    import_framer_motion7.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    import_framer_motion8.motion.div,
     {
       variants: containerVariants,
       initial: "hidden",
       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__ */ (0, import_jsx_runtime45.jsx)(
-          import_framer_motion7.motion.div,
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          import_framer_motion8.motion.div,
           {
             variants: itemVariants2,
             className: "grid gap-1 sm:gap-2 text-center flex-shrink-0 min-w-0",
-            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               TimePickerInput,
               {
                 picker: "hours",
@@ -5124,12 +5409,12 @@ function TimePicker({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-          import_framer_motion7.motion.div,
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          import_framer_motion8.motion.div,
           {
             variants: itemVariants2,
             className: "grid gap-1 sm:gap-2 text-center flex-shrink-0 min-w-0",
-            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               TimePickerInput,
               {
                 picker: "minutes",
@@ -5143,15 +5428,15 @@ function TimePicker({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_framer_motion7.AnimatePresence, { children: !hideSeconds && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-          import_framer_motion7.motion.div,
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_framer_motion8.AnimatePresence, { children: !hideSeconds && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          import_framer_motion8.motion.div,
           {
             variants: itemVariants2,
             initial: "hidden",
             animate: "visible",
             exit: "hidden",
             className: "grid gap-1 sm:gap-2 text-center flex-shrink-0 min-w-0",
-            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               TimePickerInput,
               {
                 picker: "seconds",
@@ -5170,8 +5455,8 @@ function TimePicker({
 }
 
 // src/components/date-time-picker/DateTimePicker.tsx
-var import_react29 = require("@phosphor-icons/react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_react31 = require("@phosphor-icons/react");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function DateTimePicker({
   label,
   date,
@@ -5184,9 +5469,9 @@ function DateTimePicker({
   disabled,
   className
 }) {
-  const [internalDate, setInternalDate] = (0, import_react28.useState)(date);
-  const [open, setOpen] = (0, import_react28.useState)(false);
-  const [timePickerOpen, setTimePickerOpen] = (0, import_react28.useState)(false);
+  const [internalDate, setInternalDate] = (0, import_react30.useState)(date);
+  const [open, setOpen] = (0, import_react30.useState)(false);
+  const [timePickerOpen, setTimePickerOpen] = (0, import_react30.useState)(false);
   const handleSelect = (newDay) => {
     if (!newDay) return;
     if (!internalDate) {
@@ -5215,32 +5500,31 @@ function DateTimePicker({
     if (!timeFormat) return "PPP";
     return `PPP - ${timeFormat}`;
   };
-  (0, import_react28.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (date) {
       setInternalDate(date);
     }
   }, [date, open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("space-y-2 w-full sm:w-auto", className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(LabelBase_default, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(PopoverBase, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PopoverTriggerBase, { disabled, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("space-y-2 w-full sm:w-auto", className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(LabelBase_default, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(PopoverBase, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverTriggerBase, { disabled, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
         ButtonBase,
         {
           variant: "outline",
-          size: "lg",
           className: cn(
             "w-full justify-start text-left min-w-0 overflow-hidden",
-            "min-h-[44px] sm:min-h-[48px] px-3 sm:px-4",
+            "",
             "text-sm sm:text-base",
             !date && "text-muted-foreground"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "truncate flex-1", children: date ? (0, import_date_fns.format)(date, getDisplayFormat(), { locale: import_locale.ptBR }) : "Pick a date" }),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react29.CalendarBlankIcon, { className: "flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6" })
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "truncate flex-1", children: date ? (0, import_date_fns.format)(date, getDisplayFormat(), { locale: import_locale.ptBR }) : "Pick a date" }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react31.CalendarBlankIcon, { className: "flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6" })
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         PopoverContentBase,
         {
           className: "w-full p-0",
@@ -5249,8 +5533,8 @@ function DateTimePicker({
           side: "bottom",
           avoidCollisions: true,
           collisionPadding: 8,
-          children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("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__ */ (0, import_jsx_runtime46.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("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__ */ (0, import_jsx_runtime47.jsx)(
               CalendarBase2,
               {
                 mode: "single",
@@ -5263,13 +5547,13 @@ function DateTimePicker({
                 className: "w-full"
               }
             ),
-            !(hideHour && hideMinute) && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex justify-center w-full px-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+            !(hideHour && hideMinute) && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex justify-center w-full px-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
               PopoverBase,
               {
                 open: timePickerOpen,
                 onOpenChange: setTimePickerOpen,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PopoverTriggerBase, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverTriggerBase, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
                     ButtonBase,
                     {
                       variant: "outline",
@@ -5279,20 +5563,20 @@ function DateTimePicker({
                         "px-2 sm:px-3 py-1.5 sm:py-2",
                         "text-sm sm:text-base font-semibold w-full max-w-xs",
                         "border-2 border-primary/20 rounded-lg",
-                        "bg-primary/5 hover:bg-primary/10 hover:border-primary/30",
+                        "bg-background hover:bg-primary/10 hover:border-primary/30",
                         "transition-all duration-200",
                         "shadow-sm hover:shadow-md active:scale-[0.98]",
                         "min-h-[36px] sm:min-h-[40px]"
                       ),
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react29.ClockIcon, { className: "text-primary/70 flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-foreground truncate", children: internalDate ? (0, import_date_fns.format)(internalDate, getTimeFormat() || "HH:mm", {
+                        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react31.ClockIcon, { className: "text-primary flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-foreground truncate", children: internalDate ? (0, import_date_fns.format)(internalDate, getTimeFormat() || "HH:mm", {
                           locale: import_locale.ptBR
                         }) : "00:00" })
                       ]
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                     PopoverContentBase,
                     {
                       className: "w-[calc(100vw-2rem)] max-w-sm p-3 sm:p-3 rounded-md",
@@ -5301,9 +5585,9 @@ function DateTimePicker({
                       sideOffset: 8,
                       avoidCollisions: true,
                       collisionPadding: 8,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col items-center space-y-2 sm:space-y-3", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("h4", { className: "text-sm sm:text-base font-medium text-center", children: "Alterar Hor\xE1rio" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-col items-center space-y-2 sm:space-y-3", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h4", { className: "text-sm sm:text-base font-medium text-center", children: "Alterar Hor\xE1rio" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                           TimePicker,
                           {
                             setDate: handleTimeChange,
@@ -5311,7 +5595,7 @@ function DateTimePicker({
                             hideSeconds
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                           ButtonBase,
                           {
                             size: "sm",
@@ -5335,7 +5619,7 @@ function DateTimePicker({
 }
 
 // src/components/selects/Select.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function Select({
   items,
   groupItems,
@@ -5344,9 +5628,9 @@ function Select({
   errorMessage,
   testIds = {}
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { "data-testid": testIds.root ?? "select-root", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(SelectBase, { onValueChange: onChange, "data-testid": testIds.base ?? "select-base", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { "data-testid": testIds.root ?? "select-root", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(SelectBase, { onValueChange: onChange, "data-testid": testIds.base ?? "select-base", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         SelectTriggerBase,
         {
           className: cn(
@@ -5354,7 +5638,7 @@ function Select({
             errorMessage && "border-red-500"
           ),
           "data-testid": testIds.trigger ?? "select-trigger",
-          children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             SelectValueBase,
             {
               placeholder,
@@ -5363,9 +5647,9 @@ function Select({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ScrollAreaBase, { "data-testid": testIds.scrollarea ?? "select-scrollarea", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectContentBase, { "data-testid": testIds.content ?? "select-content", children: groupItems ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: Object.keys(groupItems).map((key) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(SelectGroupBase, { "data-testid": testIds.group ?? "select-group", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectLabelBase, { "data-testid": testIds.label ?? "select-label", children: key }),
-        groupItems[key].map((item) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ScrollAreaBase, { "data-testid": testIds.scrollarea ?? "select-scrollarea", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectContentBase, { "data-testid": testIds.content ?? "select-content", children: groupItems ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_jsx_runtime48.Fragment, { children: Object.keys(groupItems).map((key) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(SelectGroupBase, { "data-testid": testIds.group ?? "select-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectLabelBase, { "data-testid": testIds.label ?? "select-label", children: key }),
+        groupItems[key].map((item) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           SelectItemBase,
           {
             value: item.value,
@@ -5374,7 +5658,7 @@ function Select({
           },
           item.value
         ))
-      ] }, key)) }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectGroupBase, { "data-testid": testIds.group ?? "select-group", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      ] }, key)) }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectGroupBase, { "data-testid": testIds.group ?? "select-group", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         SelectItemBase,
         {
           value: item.value,
@@ -5384,7 +5668,7 @@ function Select({
         item.value
       )) }) }) })
     ] }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "p",
       {
         className: "text-sm text-red-500",
@@ -5395,85 +5679,156 @@ function Select({
   ] });
 }
 
-// src/components/ui/DestructiveDialog.tsx
-var React32 = __toESM(require("react"));
-var import_react30 = require("@phosphor-icons/react");
-var import_jsx_runtime48 = require("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__ */ (0, import_jsx_runtime48.jsx)(AlertDialogTriggerBase, { asChild: true, children }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AlertDialogTriggerBase, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ButtonBase, { variant: "destructive", children: triggerContent ?? "Excluir" }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(AlertDialogBase, { children: [
-    triggerEl,
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-      AlertDialogContentBase,
-      {
-        role: "alertdialog",
-        "aria-modal": "true",
-        "aria-labelledby": titleId,
-        "aria-describedby": descriptionId,
-        className: cn("border border-destructive bg-background"),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-start gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex items-center justify-center w-10 h-10 rounded-full ring-1 ring-destructive/30", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react30.XCircleIcon, { className: "w-6 h-6 text-destructive" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                AlertDialogTitleBase,
-                {
-                  id: titleId,
-                  className: "text-lg sm:text-xl font-semibold text-destructive",
-                  children: title
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                AlertDialogDescriptionBase,
-                {
-                  id: descriptionId,
-                  className: "mt-2 text-sm text-muted-foreground",
-                  children: description
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(AlertDialogFooterBase, { className: "mt-2 flex justify-end gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-              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__ */ (0, import_jsx_runtime48.jsx)(
-              AlertDialogActionBase,
-              {
-                onClick: onConfirm,
-                className: cn(
-                  buttonVariantsBase({ variant: "destructive", size: "default" })
-                ),
-                children: "Confirmar"
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
-};
+// src/components/charts/Chart.tsx
+var import_react36 = require("react");
+var import_recharts = require("recharts");
+
+// 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"
+  );
+};
+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)
+    };
+  };
+  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/Chart.tsx
+var import_sonner2 = require("sonner");
 
 // src/components/charts/components/controls/PeriodsDropdown.tsx
-var import_react31 = require("react");
-var import_framer_motion8 = require("framer-motion");
+var import_react32 = require("react");
+var import_framer_motion9 = require("framer-motion");
 var import_ssr = require("@phosphor-icons/react/dist/ssr");
 var import_ssr2 = require("@phosphor-icons/react/dist/ssr");
 var import_jsx_runtime49 = require("react/jsx-runtime");
@@ -5495,11 +5850,11 @@ function PeriodsDropdown({
   activePeriods
 }) {
   const periods = processedData.map((d) => String(d.name));
-  const [open, setOpen] = (0, import_react31.useState)(false);
-  const wrapperRef = (0, import_react31.useRef)(null);
-  const firstItemRef = (0, import_react31.useRef)(null);
-  const listRef = (0, import_react31.useRef)(null);
-  (0, import_react31.useEffect)(() => {
+  const [open, setOpen] = (0, import_react32.useState)(false);
+  const wrapperRef = (0, import_react32.useRef)(null);
+  const firstItemRef = (0, import_react32.useRef)(null);
+  const listRef = (0, import_react32.useRef)(null);
+  (0, import_react32.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (!wrapperRef.current) return;
       if (!wrapperRef.current.contains(e.target)) setOpen(false);
@@ -5514,7 +5869,7 @@ function PeriodsDropdown({
       document.removeEventListener("keydown", handleEscape);
     };
   }, []);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (open && firstItemRef.current) {
       firstItemRef.current.focus();
     }
@@ -5548,8 +5903,8 @@ function PeriodsDropdown({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_framer_motion8.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-      import_framer_motion8.motion.div,
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_framer_motion9.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      import_framer_motion9.motion.div,
       {
         initial: "hidden",
         animate: "visible",
@@ -5578,7 +5933,7 @@ function PeriodsDropdown({
               className: "flex flex-col p-2 gap-1",
               style: { maxHeight: 200, overflowY: "auto" },
               children: periods.map((p, idx) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-                import_framer_motion8.motion.button,
+                import_framer_motion9.motion.button,
                 {
                   className: "flex items-center justify-between w-full text-left px-3 py-2.5 rounded focus:outline-none transition-colors " + (activePeriods && activePeriods.includes(p) || p === activePeriod ? "bg-accent/10 font-medium" : "hover:bg-accent/15 focus-visible:ring-2 focus-visible:ring-accent/30"),
                   variants: itemVariants,
@@ -5606,8 +5961,8 @@ function PeriodsDropdown({
 var PeriodsDropdown_default = PeriodsDropdown;
 
 // src/components/charts/components/controls/ShowOnly.tsx
-var import_framer_motion9 = require("framer-motion");
-var import_react32 = require("@phosphor-icons/react");
+var import_framer_motion10 = require("framer-motion");
+var import_react33 = require("@phosphor-icons/react");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var ShowOnly = ({
   showOnlyHighlighted,
@@ -5617,7 +5972,7 @@ var ShowOnly = ({
   const hasHighlights = highlightedSeriesSize > 0;
   if (!hasHighlights) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "ml-auto flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-    import_framer_motion9.motion.div,
+    import_framer_motion10.motion.div,
     {
       whileTap: { scale: hasHighlights ? 0.985 : 1 },
       whileHover: { y: hasHighlights ? -2 : 0 },
@@ -5636,10 +5991,10 @@ var ShowOnly = ({
             !hasHighlights ? "opacity-60 cursor-not-allowed pointer-events-none" : showOnlyHighlighted ? "bg-primary/10 text-primary shadow-sm border border-primary/20" : "bg-transparent text-muted-foreground border border-transparent hover:bg-muted/10 hover:text-foreground"
           ),
           children: showOnlyHighlighted ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react32.EyeSlash, { size: 16, weight: "regular" }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react33.EyeSlash, { size: 16, weight: "regular" }),
             /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "sr-only", children: "Exibir todos" })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react32.Eye, { size: 16, weight: "bold" }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react33.Eye, { size: 16, weight: "bold" }),
             /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "sr-only", children: "Mostrar somente destacados" })
           ] })
         }
@@ -5650,7 +6005,7 @@ var ShowOnly = ({
 var ShowOnly_default = ShowOnly;
 
 // src/components/charts/components/controls/Highlights.tsx
-var import_framer_motion10 = require("framer-motion");
+var import_framer_motion11 = require("framer-motion");
 var import_ssr3 = require("@phosphor-icons/react/dist/ssr");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var Highlights = ({
@@ -5671,13 +6026,13 @@ var Highlights = ({
     visible: { opacity: 1, transition: { staggerChildren: 0.03 } }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-    import_framer_motion10.motion.div,
+    import_framer_motion11.motion.div,
     {
       className: "flex-1 flex items-center gap-2 flex-wrap",
       initial: "hidden",
       animate: "visible",
       variants: containerVariants,
-      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_framer_motion10.AnimatePresence, { initial: false, mode: "popLayout", children: allKeys.map((k) => {
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_framer_motion11.AnimatePresence, { initial: false, mode: "popLayout", children: allKeys.map((k) => {
         const isHighlighted = highlightedSeries.has(k);
         const label = mapperConfig[k]?.label ?? k;
         const color = finalColors[k];
@@ -5687,7 +6042,7 @@ var Highlights = ({
           isHighlighted ? "bg-card/95 border-2 text-foreground shadow-[0_6px_18px_rgba(0,0,0,0.12)]" : "bg-muted/10 border-border text-muted-foreground hover:bg-muted/5"
         );
         return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-          import_framer_motion10.motion.div,
+          import_framer_motion11.motion.div,
           {
             layout: true,
             initial: "hidden",
@@ -5704,7 +6059,7 @@ var Highlights = ({
                 style: { minWidth: showFullLabel ? void 0 : 36 },
                 "aria-pressed": isHighlighted,
                 children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
-                  import_framer_motion10.motion.button,
+                  import_framer_motion11.motion.button,
                   {
                     whileHover: { scale: isHighlighted ? 1.04 : 1.03 },
                     whileTap: { scale: 0.96 },
@@ -5712,7 +6067,7 @@ var Highlights = ({
                     className: "flex items-center gap-2 min-w-0 pr-2",
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                        import_framer_motion10.motion.span,
+                        import_framer_motion11.motion.span,
                         {
                           className: cn("w-3 h-3 rounded-sm flex-shrink-0 border"),
                           style: {
@@ -5726,8 +6081,8 @@ var Highlights = ({
                           transition: { type: "spring", stiffness: 400, damping: 30 }
                         }
                       ),
-                      showFullLabel ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_framer_motion10.motion.span, { className: "truncate max-w-[10rem] pr-2", layout: true, children: label }) : showShortLabel ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                        import_framer_motion10.motion.span,
+                      showFullLabel ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_framer_motion11.motion.span, { className: "truncate max-w-[10rem] pr-2", layout: true, children: label }) : showShortLabel ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                        import_framer_motion11.motion.span,
                         {
                           className: "truncate max-w-[6rem] text-xs pr-2",
                           layout: true,
@@ -5735,7 +6090,7 @@ var Highlights = ({
                         }
                       ) : null,
                       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                        import_framer_motion10.motion.span,
+                        import_framer_motion11.motion.span,
                         {
                           "aria-hidden": true,
                           initial: { opacity: 0, scale: 0.6 },
@@ -5844,9 +6199,9 @@ var CloseAllButton = ({
 var CloseAllButton_default = CloseAllButton;
 
 // src/components/charts/components/tooltips/DraggableTooltip.tsx
-var import_react33 = __toESM(require("react"));
-var import_framer_motion11 = require("framer-motion");
-var import_react34 = require("@phosphor-icons/react");
+var import_react34 = __toESM(require("react"));
+var import_framer_motion12 = require("framer-motion");
+var import_react35 = require("@phosphor-icons/react");
 var import_ssr5 = require("@phosphor-icons/react/dist/ssr");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var ALIGNMENT_THRESHOLD = 25;
@@ -5923,13 +6278,13 @@ var DraggableTooltipComponent = ({
   toggleHighlight,
   showOnlyHighlighted
 }) => {
-  const visibleKeys = (0, import_react33.useMemo)(
+  const visibleKeys = (0, import_react34.useMemo)(
     () => showOnlyHighlighted && highlightedSeries && highlightedSeries.size > 0 ? dataKeys.filter((k) => highlightedSeries.has(k)) : dataKeys,
     [showOnlyHighlighted, highlightedSeries, dataKeys]
   );
-  const TotalDisplay = import_react33.default.memo(
+  const TotalDisplay = import_react34.default.memo(
     ({ data: data2, visibleKeys: visibleKeys2 }) => {
-      const total = (0, import_react33.useMemo)(() => {
+      const total = (0, import_react34.useMemo)(() => {
         const numeric = visibleKeys2.map((k) => data2[k]).filter((v) => typeof v === "number");
         return numeric.reduce((s, v) => s + (v || 0), 0);
       }, [data2, visibleKeys2]);
@@ -5945,14 +6300,14 @@ var DraggableTooltipComponent = ({
       ] });
     }
   );
-  const [localPos, setLocalPos] = (0, import_react33.useState)(position);
-  const [dragging, setDragging] = (0, import_react33.useState)(false);
-  const offsetRef = (0, import_react33.useRef)({ x: 0, y: 0 });
-  const lastMouse = (0, import_react33.useRef)({ x: 0, y: 0 });
-  const [alignmentGuides, setAlignmentGuides] = (0, import_react33.useState)([]);
-  const [globalTooltipCountLocal, setGlobalTooltipCountLocal] = (0, import_react33.useState)(0);
-  (0, import_react33.useEffect)(() => setLocalPos(position), [position]);
-  const getAllTooltips = (0, import_react33.useCallback)(() => {
+  const [localPos, setLocalPos] = (0, import_react34.useState)(position);
+  const [dragging, setDragging] = (0, import_react34.useState)(false);
+  const offsetRef = (0, import_react34.useRef)({ x: 0, y: 0 });
+  const lastMouse = (0, import_react34.useRef)({ x: 0, y: 0 });
+  const [alignmentGuides, setAlignmentGuides] = (0, import_react34.useState)([]);
+  const [globalTooltipCountLocal, setGlobalTooltipCountLocal] = (0, import_react34.useState)(0);
+  (0, import_react34.useEffect)(() => setLocalPos(position), [position]);
+  const getAllTooltips = (0, import_react34.useCallback)(() => {
     const response = [];
     const ev = new CustomEvent("requestGlobalTooltips", {
       detail: { requesterId: id, response }
@@ -5960,7 +6315,7 @@ var DraggableTooltipComponent = ({
     window.dispatchEvent(ev);
     return response;
   }, [id]);
-  const updateAlignmentGuides = (0, import_react33.useCallback)(
+  const updateAlignmentGuides = (0, import_react34.useCallback)(
     (currentPosition) => {
       const allTooltips = getAllTooltips();
       const otherTooltips = allTooltips.filter((t) => t.id !== id);
@@ -6009,7 +6364,7 @@ var DraggableTooltipComponent = ({
     },
     [getAllTooltips, id]
   );
-  const snapToGuides = (0, import_react33.useCallback)(
+  const snapToGuides = (0, import_react34.useCallback)(
     (position2) => {
       const snappedPosition = { ...position2 };
       let hasSnapped = false;
@@ -6056,7 +6411,7 @@ var DraggableTooltipComponent = ({
     },
     [alignmentGuides]
   );
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     let rafId = null;
     const handleMouseMove = (e) => {
       if (!dragging) return;
@@ -6098,7 +6453,7 @@ var DraggableTooltipComponent = ({
       document.body.style.userSelect = "";
     };
   }, [dragging, snapToGuides, updateAlignmentGuides, id, onPositionChange]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     const handleCloseAll = () => onClose(id);
     const handleRequestTooltipCount = () => {
       window.dispatchEvent(
@@ -6129,7 +6484,7 @@ var DraggableTooltipComponent = ({
       });
     };
   }, [id, localPos, onClose]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (dragging) return;
     let total = 0;
     const timeoutId = setTimeout(() => {
@@ -6147,7 +6502,7 @@ var DraggableTooltipComponent = ({
     }, 0);
     return () => clearTimeout(timeoutId);
   }, [localPos, dragging]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     const recount = () => {
       if (dragging) return;
       let total = 0;
@@ -6165,7 +6520,7 @@ var DraggableTooltipComponent = ({
     window.addEventListener("recountTooltips", recount);
     return () => window.removeEventListener("recountTooltips", recount);
   }, [dragging]);
-  const handleMouseDownLocal = (0, import_react33.useCallback)(
+  const handleMouseDownLocal = (0, import_react34.useCallback)(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -6176,7 +6531,7 @@ var DraggableTooltipComponent = ({
     },
     [id, onMouseDown]
   );
-  const handleTouchStartLocal = (0, import_react33.useCallback)(
+  const handleTouchStartLocal = (0, import_react34.useCallback)(
     (e) => {
       e.stopPropagation();
       const touch = e.touches[0];
@@ -6191,7 +6546,7 @@ var DraggableTooltipComponent = ({
     },
     [id, onMouseDown]
   );
-  const handleCloseClick = (0, import_react33.useCallback)(
+  const handleCloseClick = (0, import_react34.useCallback)(
     (e) => {
       e.stopPropagation();
       onClose(id);
@@ -6220,7 +6575,7 @@ var DraggableTooltipComponent = ({
       );
       return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          import_framer_motion11.motion.div,
+          import_framer_motion12.motion.div,
           {
             className: "fixed pointer-events-none z-30",
             variants: guideVariants,
@@ -6242,7 +6597,7 @@ var DraggableTooltipComponent = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          import_framer_motion11.motion.div,
+          import_framer_motion12.motion.div,
           {
             className: "fixed pointer-events-none z-31",
             variants: guideDotVariants,
@@ -6261,7 +6616,7 @@ var DraggableTooltipComponent = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          import_framer_motion11.motion.div,
+          import_framer_motion12.motion.div,
           {
             className: "fixed pointer-events-none z-31",
             variants: guideDotVariants,
@@ -6281,8 +6636,8 @@ var DraggableTooltipComponent = ({
         )
       ] }, index);
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_framer_motion11.AnimatePresence, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
-      import_framer_motion11.motion.div,
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_framer_motion12.AnimatePresence, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+      import_framer_motion12.motion.div,
       {
         className: "fixed bg-card border border-border rounded-lg shadow-lg z-50 min-w-80 select-none",
         variants: tooltipVariants,
@@ -6307,7 +6662,7 @@ var DraggableTooltipComponent = ({
               onTouchStart: handleTouchStartLocal,
               style: { touchAction: "none" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react34.DotsSixVerticalIcon, { size: 16 }),
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react35.DotsSixVerticalIcon, { size: 16 }),
                 /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex flex-col gap-1", children: title && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex items-center gap-2 pb-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "font-bold text-foreground text-base", children: title }) }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   "button",
@@ -6330,7 +6685,7 @@ var DraggableTooltipComponent = ({
           ] }) }),
           /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "p-3 pt-2 space-y-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2", children: dataLabel }),
-            (0, import_react33.useMemo)(
+            (0, import_react34.useMemo)(
               () => visibleKeys.map((key) => {
                 const value = data[key];
                 if (value === void 0) return null;
@@ -6440,7 +6795,7 @@ var DraggableTooltipComponent = ({
     )
   ] });
 };
-var DraggableTooltip = import_react33.default.memo(DraggableTooltipComponent);
+var DraggableTooltip = import_react34.default.memo(DraggableTooltipComponent);
 DraggableTooltip.displayName = "DraggableTooltip";
 var DraggableTooltip_default = DraggableTooltip;
 
@@ -6594,200 +6949,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
+var import_jsx_runtime56 = require("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
-var import_jsx_runtime56 = require("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;
@@ -6849,14 +7064,2102 @@ var renderPillLabel = (color, variant) => {
 };
 var pillLabelRenderer_default = renderPillLabel;
 
+// src/components/charts/Chart.tsx
+var import_jsx_runtime57 = require("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 = (0, import_react36.useMemo)(() => {
+    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
+    };
+    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] = (0, import_react36.useState)([]);
+  const [highlightedSeries, setHighlightedSeries] = (0, import_react36.useState)(
+    /* @__PURE__ */ new Set()
+  );
+  const [showOnlyHighlighted, setShowOnlyHighlighted] = (0, import_react36.useState)(false);
+  (0, import_react36.useEffect)(() => {
+    if (highlightedSeries.size === 0 && showOnlyHighlighted) {
+      setShowOnlyHighlighted(false);
+    }
+  }, [highlightedSeries, showOnlyHighlighted]);
+  const processedData = data.map((item) => ({
+    ...item,
+    name: String(item[xAxisConfig.dataKey] || "N/A")
+  }));
+  const wrapperRef = (0, import_react36.useRef)(null);
+  const [measuredWidth, setMeasuredWidth] = (0, import_react36.useState)(null);
+  (0, import_react36.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 = (0, import_react36.useCallback)(
+    (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 = (0, import_react36.useMemo)(
+    () => generateColors(allKeys),
+    [generateColors, allKeys]
+  );
+  const adaptDataForTooltip = (0, import_react36.useCallback)(
+    (universalData) => ({
+      ...universalData,
+      name: String(universalData[xAxisConfig.dataKey] || "N/A")
+    }),
+    [xAxisConfig.dataKey]
+  );
+  const activePeriods = (0, import_react36.useMemo)(
+    () => activeTooltips.map((t) => adaptDataForTooltip(t.data).name),
+    [activeTooltips, adaptDataForTooltip]
+  );
+  (0, import_react36.useEffect)(() => {
+    window.dispatchEvent(new Event("recountTooltips"));
+  }, [activeTooltips.length]);
+  const toggleHighlight = (0, import_react36.useCallback)((key) => {
+    setHighlightedSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+  const maxDataValue = (0, import_react36.useMemo)(() => {
+    let max = 0;
+    const numericKeys = allKeys;
+    for (const row of processedData) {
+      const r = row;
+      for (const key of numericKeys) {
+        const v = r[key];
+        if (typeof v === "number" && Number.isFinite(v) && v > max) max = v;
+      }
+    }
+    return max;
+  }, [processedData, allKeys]);
+  const minDataValue = (0, import_react36.useMemo)(() => {
+    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 = (0, import_react36.useMemo)(() => {
+    let padding = 0.08;
+    if (maxDataValue > 1e6) padding = 0.05;
+    if (maxDataValue > 1e7) padding = 0.03;
+    if (maxDataValue === 0) padding = 0.12;
+    const padded = maxDataValue * (1 + padding);
+    return niceCeil(padded);
+  }, [maxDataValue]);
+  const computedWidth = (0, import_react36.useMemo)(() => {
+    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 = (0, import_react36.useCallback)(
+    (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) {
+          import_sonner2.toast.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 = (0, import_react36.useCallback)(
+    (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 = (0, import_react36.useCallback)(
+    (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 = (0, import_react36.useCallback)(
+    (...args) => {
+      if (args.length >= 3) {
+        const [data2, index, event] = args;
+        handleBarClick(data2, index, event);
+        return;
+      }
+      handleChartClick(args[0]);
+    },
+    [handleBarClick, handleChartClick]
+  );
+  const onTooltipPositionChange = (0, import_react36.useCallback)(
+    (id, position) => {
+      setActiveTooltips(
+        (prev) => prev.map((t) => t.id === id ? { ...t, position } : t)
+      );
+    },
+    []
+  );
+  const titleClassName = (0, import_react36.useMemo)(
+    () => "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 = (0, import_react36.useCallback)(
+    (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) {
+        import_sonner2.toast.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__ */ (0, import_jsx_runtime57.jsx)(
+      "div",
+      {
+        className: cn(
+          "rounded-lg bg-card p-4 relative w-full text-muted-foreground"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          "div",
+          {
+            style: {
+              paddingLeft: `${containerPaddingLeft + finalChartLeftMargin}px`
+            },
+            children: "Sem dados para exibir"
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    "div",
+    {
+      ref: wrapperRef,
+      style: {
+        width: "100%",
+        overflowX: "hidden",
+        overflowY: "hidden",
+        minWidth: 0
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+        "div",
+        {
+          className: cn("rounded-lg bg-card p-2 relative", className),
+          style: { width: "100%", maxWidth: "100%", minWidth: 0 },
+          children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              "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__ */ (0, import_jsx_runtime57.jsx)("h3", { className: titleClassName, children: title })
+              }
+            ),
+            allKeys.length > 0 && (finalEnableHighlights || finalEnableShowOnly) && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+              "div",
+              {
+                className: "flex items-center w-full",
+                style: {
+                  paddingLeft: `${containerPaddingLeft + finalChartLeftMargin}px`,
+                  width: "98%",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "0.5rem"
+                },
+                children: [
+                  finalEnableHighlights && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    Highlights_default,
+                    {
+                      allKeys,
+                      mapperConfig,
+                      finalColors,
+                      highlightedSeries,
+                      toggleHighlight,
+                      containerWidth: chartInnerWidth
+                    }
+                  ),
+                  finalEnableShowOnly && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    ShowOnly_default,
+                    {
+                      showOnlyHighlighted,
+                      setShowOnlyHighlighted,
+                      highlightedSeriesSize: highlightedSeries.size,
+                      clearHighlights: () => setHighlightedSeries(/* @__PURE__ */ new Set())
+                    }
+                  ),
+                  finalEnablePeriodsDropdown && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    "div",
+                    {
+                      style: {
+                        marginLeft: "auto",
+                        display: "flex",
+                        alignItems: "center"
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                        PeriodsDropdown_default,
+                        {
+                          processedData,
+                          onOpenPeriod: openTooltipForPeriod,
+                          rightOffset: finalChartRightMargin,
+                          activePeriods
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            !(allKeys.length > 0 && (finalEnableHighlights || finalEnableShowOnly)) && finalEnablePeriodsDropdown && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              "div",
+              {
+                style: {
+                  paddingLeft: `${containerPaddingLeft + finalChartLeftMargin}px`,
+                  paddingRight: `${finalChartRightMargin}px`,
+                  width: "100%",
+                  maxWidth: `${chartInnerWidth}px`,
+                  display: "flex",
+                  justifyContent: "flex-end"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                  PeriodsDropdown_default,
+                  {
+                    processedData,
+                    onOpenPeriod: openTooltipForPeriod,
+                    rightOffset: finalChartRightMargin
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+              import_recharts.ComposedChart,
+              {
+                data: processedData,
+                height,
+                margin: {
+                  top: finalChartTopMargin,
+                  right: finalChartRightMargin,
+                  left: finalChartLeftMargin,
+                  bottom: finalChartBottomMargin
+                },
+                onClick: handleChartClick,
+                children: [
+                  showGrid && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    import_recharts.CartesianGrid,
+                    {
+                      strokeDasharray: "3 3",
+                      stroke: gridColor || "hsl(var(--muted-foreground))",
+                      opacity: 0.5
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    import_recharts.XAxis,
+                    {
+                      dataKey: xAxisConfig.dataKey,
+                      stroke: "hsl(var(--muted-foreground))",
+                      fontSize: 12,
+                      tickLine: false,
+                      axisLine: false,
+                      tickFormatter: xAxisConfig.formatter
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    import_recharts.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__ */ (0, import_jsx_runtime57.jsx)(
+                    import_recharts.ReferenceLine,
+                    {
+                      y: 0,
+                      stroke: "hsl(var(--muted-foreground))",
+                      strokeWidth: 1,
+                      strokeDasharray: "4 4"
+                    }
+                  ),
+                  showTooltip && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    import_recharts.Tooltip,
+                    {
+                      content: showTooltipTotal ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipWithTotal_default, { finalColors }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipSimple_default, { finalColors }),
+                      cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
+                    }
+                  ),
+                  showLegend && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    import_recharts.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__ */ (0, import_jsx_runtime57.jsx)(
+                        import_recharts.Bar,
+                        {
+                          dataKey: key,
+                          name: label,
+                          fill: color,
+                          radius: [4, 4, 0, 0],
+                          onClick: handleBarClick,
+                          style: {
+                            cursor: "pointer",
+                            opacity: highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1
+                          },
+                          activeBar: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                            import_recharts.Rectangle,
+                            {
+                              fill: color,
+                              stroke: color,
+                              strokeWidth: 2,
+                              opacity: 0.8
+                            }
+                          ),
+                          children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                            import_recharts.LabelList,
+                            {
+                              dataKey: key,
+                              position: "top",
+                              content: pillLabelRenderer_default(color, "filled"),
+                              offset: 8
+                            }
+                          ) : null
+                        },
+                        `bar-${key}`
+                      );
+                    }
+                    if (s.type === "line") {
+                      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                        import_recharts.Line,
+                        {
+                          dataKey: key,
+                          name: label,
+                          stroke: color,
+                          strokeWidth: 2,
+                          dot: { r: 3 },
+                          activeDot: { r: 6 },
+                          onClick: handleSeriesClick,
+                          style: {
+                            cursor: "pointer",
+                            pointerEvents: "all",
+                            opacity: highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1
+                          },
+                          children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                            import_recharts.LabelList,
+                            {
+                              dataKey: key,
+                              position: "top",
+                              content: pillLabelRenderer_default(color, "filled"),
+                              offset: 14
+                            }
+                          ) : null
+                        },
+                        `line-${key}`
+                      );
+                    }
+                    if (s.type === "area") {
+                      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                        import_recharts.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__ */ (0, import_jsx_runtime57.jsx)(
+                            import_recharts.LabelList,
+                            {
+                              dataKey: key,
+                              position: "top",
+                              content: pillLabelRenderer_default(color, "soft"),
+                              offset: 12
+                            }
+                          ) : null
+                        },
+                        `area-${key}`
+                      );
+                    }
+                    return null;
+                  })
+                ]
+              }
+            ) }),
+            enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              DraggableTooltip_default,
+              {
+                id: tooltip.id,
+                data: adaptDataForTooltip(tooltip.data),
+                position: tooltip.position,
+                title,
+                dataKeys: allKeys,
+                finalColors,
+                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__ */ (0, import_jsx_runtime57.jsx)(
+              CloseAllButton_default,
+              {
+                count: activeTooltips.length,
+                onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
+                position: "top-center",
+                variant: "floating"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var Chart_default = Chart;
+
+// src/components/charts/BarChart.tsx
+var import_react37 = require("react");
+var import_recharts2 = require("recharts");
+var import_jsx_runtime58 = require("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 = (0, import_react37.useMemo)(() => {
+    const providedMapper = yAxis ?? mapper;
+    if (autoDetect === true || xAxis == null || providedMapper == null) {
+      const detectedXAxis = detectXAxis(data);
+      const detectedFields = detectDataFields(data, detectedXAxis);
+      return {
+        xAxisConfig: {
+          dataKey: detectedXAxis,
+          label: labelMap?.[detectedXAxis] ?? formatFieldName(detectedXAxis),
+          autoLabel: true
+        },
+        mapperConfig: detectedFields.reduce((acc, field) => {
+          acc[field] = {
+            label: labelMap?.[field] ?? formatFieldName(field),
+            type: "number",
+            visible: true
+          };
+          return acc;
+        }, {})
+      };
+    }
+    const xAxisConfig2 = typeof xAxis === "string" ? { dataKey: xAxis, label: formatFieldName(xAxis), autoLabel: true } : xAxis;
+    let mapperConfig2;
+    if (Array.isArray(providedMapper)) {
+      mapperConfig2 = providedMapper.reduce((acc, field) => {
+        acc[field] = {
+          label: labelMap?.[field] ?? formatFieldName(field),
+          type: "auto",
+          visible: true
+        };
+        return acc;
+      }, {});
+    } else {
+      mapperConfig2 = Object.keys(providedMapper).reduce(
+        (acc, key) => {
+          acc[key] = {
+            label: providedMapper[key]?.label ?? labelMap?.[key] ?? formatFieldName(key),
+            type: "auto",
+            visible: true,
+            ...providedMapper[key]
+            // Sobrescreve com configurações do usuário
+          };
+          return acc;
+        },
+        {}
+      );
+    }
+    return { xAxisConfig: xAxisConfig2, mapperConfig: mapperConfig2 };
+  }, [data, xAxis, mapper, yAxis, autoDetect, labelMap]);
+  const { xAxisConfig, mapperConfig } = smartConfig;
+  const [activeTooltips, setActiveTooltips] = (0, import_react37.useState)([]);
+  const [isDragging, setIsDragging] = (0, import_react37.useState)(null);
+  const [dragOffset, setDragOffset] = (0, import_react37.useState)({
+    x: 0,
+    y: 0
+  });
+  const [globalTooltipCount, setGlobalTooltipCount] = (0, import_react37.useState)(0);
+  const [alignmentGuides, setAlignmentGuides] = (0, import_react37.useState)([]);
+  const processedData = data.map((item) => ({
+    ...item,
+    name: String(item[xAxisConfig.dataKey] || "N/A")
+    // Garantir propriedade 'name' para tooltip
+  }));
+  const generateColors = (dataKeys2) => {
+    const colorMap = {};
+    const allColors = 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 = (0, import_react37.useMemo)(() => {
+    let max = 0;
+    const keys = Object.keys(mapperConfig);
+    for (const row of processedData) {
+      const r = row;
+      for (const key of keys) {
+        const v = r[key];
+        if (typeof v === "number" && Number.isFinite(v) && v > max)
+          max = v;
+      }
+    }
+    return max;
+  }, [processedData, mapperConfig]);
+  const niceMax = (0, import_react37.useMemo)(() => {
+    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 = (0, import_react37.useCallback)(
+    (draggedTooltipId, currentPosition) => {
+      if (!isDragging) return;
+      const getAllTooltips = () => {
+        const allTooltips2 = [];
+        allTooltips2.push(...activeTooltips);
+        const globalEvent = new CustomEvent("requestGlobalTooltips", {
+          detail: { requesterId: draggedTooltipId, response: allTooltips2 }
+        });
+        window.dispatchEvent(globalEvent);
+        return allTooltips2;
+      };
+      const allTooltips = getAllTooltips();
+      const otherTooltips = allTooltips.filter(
+        (t) => t.id !== draggedTooltipId
+      );
+      const guides = [];
+      const tooltipDimensions = { width: 224, height: 120 };
+      otherTooltips.forEach((tooltip) => {
+        const topDiff = Math.abs(currentPosition.top - tooltip.position.top);
+        if (topDiff <= GUIDE_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 = (0, import_react37.useCallback)(
+    (position) => {
+      const snappedPosition = { ...position };
+      let hasSnapped = false;
+      alignmentGuides.forEach((guide) => {
+        if (guide.type === "horizontal") {
+          const diff = Math.abs(position.top - guide.position);
+          if (diff <= PRECISION_SNAP_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 });
+  };
+  (0, import_react37.useEffect)(() => {
+    let rafId;
+    let lastMousePosition = { x: 0, y: 0 };
+    const handleGlobalMouseMove = (e) => {
+      if (!isDragging) return;
+      lastMousePosition = { x: e.clientX, y: e.clientY };
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        const newLeft = lastMousePosition.x - dragOffset.x;
+        const newTop = lastMousePosition.y - dragOffset.y;
+        const rawPosition = {
+          top: Math.max(0, Math.min(newTop, window.innerHeight - 200)),
+          left: Math.max(0, Math.min(newLeft, window.innerWidth - 250))
+        };
+        updateAlignmentGuides(isDragging, rawPosition);
+        const snappedPosition = snapToGuides(rawPosition);
+        setActiveTooltips(
+          (prev) => prev.map((tooltip) => {
+            if (tooltip.id === isDragging) {
+              return {
+                ...tooltip,
+                position: snappedPosition
+              };
+            }
+            return tooltip;
+          })
+        );
+      });
+    };
+    const handleGlobalMouseUp = () => {
+      if (isDragging) {
+        setIsDragging(null);
+        setAlignmentGuides([]);
+        if (rafId) cancelAnimationFrame(rafId);
+      }
+    };
+    if (isDragging) {
+      document.addEventListener("mousemove", handleGlobalMouseMove, {
+        passive: true
+      });
+      document.addEventListener("mouseup", handleGlobalMouseUp);
+      document.body.style.cursor = "grabbing";
+      document.body.style.userSelect = "none";
+    }
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      document.removeEventListener("mousemove", handleGlobalMouseMove);
+      document.removeEventListener("mouseup", handleGlobalMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [
+    isDragging,
+    dragOffset,
+    alignmentGuides,
+    updateAlignmentGuides,
+    snapToGuides
+  ]);
+  (0, import_react37.useEffect)(() => {
+    const handleCloseAllTooltips = () => {
+      setActiveTooltips([]);
+      setGlobalTooltipCount(0);
+    };
+    window.addEventListener("closeAllTooltips", handleCloseAllTooltips);
+    return () => {
+      window.removeEventListener("closeAllTooltips", handleCloseAllTooltips);
+    };
+  }, []);
+  (0, import_react37.useEffect)(() => {
+    const handleTooltipCountRequest = () => {
+      window.dispatchEvent(
+        new CustomEvent("tooltipCountResponse", {
+          detail: { count: activeTooltips.length }
+        })
+      );
+    };
+    const handleGlobalTooltipsRequest = (event) => {
+      const { detail } = event;
+      if (detail && detail.response && detail.requesterId) {
+        activeTooltips.forEach((tooltip) => {
+          if (!detail.response.find(
+            (t) => t.id === tooltip.id
+          )) {
+            detail.response.push({
+              id: tooltip.id,
+              position: tooltip.position
+            });
+          }
+        });
+      }
+    };
+    window.addEventListener("requestTooltipCount", handleTooltipCountRequest);
+    window.addEventListener(
+      "requestGlobalTooltips",
+      handleGlobalTooltipsRequest
+    );
+    return () => {
+      window.removeEventListener(
+        "requestTooltipCount",
+        handleTooltipCountRequest
+      );
+      window.removeEventListener(
+        "requestGlobalTooltips",
+        handleGlobalTooltipsRequest
+      );
+    };
+  }, [activeTooltips]);
+  (0, import_react37.useEffect)(() => {
+    if (isDragging) return;
+    let totalCount = 0;
+    const handleCountResponse = (event) => {
+      const customEvent = event;
+      totalCount += customEvent.detail.count;
+    };
+    window.addEventListener("tooltipCountResponse", handleCountResponse);
+    window.dispatchEvent(new CustomEvent("requestTooltipCount"));
+    const timeoutId = setTimeout(() => {
+      window.removeEventListener("tooltipCountResponse", handleCountResponse);
+      setGlobalTooltipCount(totalCount);
+    }, 5);
+    return () => {
+      clearTimeout(timeoutId);
+      window.removeEventListener("tooltipCountResponse", handleCountResponse);
+    };
+  }, [activeTooltips.length, isDragging]);
+  const CustomTooltip = ({
+    active,
+    payload,
+    label
+  }) => {
+    if (!active || !payload) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "bg-card border border-border rounded-lg p-3 shadow-lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "font-medium text-foreground mb-2", children: label }),
+      payload.map(
+        (entry, index) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            "div",
+            {
+              className: "w-3 h-3 rounded-sm",
+              style: { backgroundColor: entry.color }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "text-muted-foreground", children: [
+            entry.name,
+            ":"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-foreground font-medium", children: entry.value?.toLocaleString("pt-BR") })
+        ] }, index)
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-xs text-muted-foreground mt-1", children: "Clique para fixar este tooltip" })
+    ] });
+  };
+  const getTitleClassName = (position) => {
+    const baseClasses = "text-xl font-semibold text-foreground mb-3";
+    switch (position) {
+      case "center":
+        return `${baseClasses} text-center`;
+      case "right":
+        return `${baseClasses} text-right`;
+      default:
+        return `${baseClasses} text-left`;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+    "div",
+    {
+      className: cn("rounded-lg bg-card p-4 relative", className),
+      style: {
+        width: typeof width === "number" ? `${width + 32}px` : "fit-content",
+        maxWidth: "100%"
+      },
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h3", { className: getTitleClassName(titlePosition), children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+          import_recharts2.BarChart,
+          {
+            data: processedData,
+            width: typeof width === "number" ? width : 900,
+            height,
+            margin: resolveChartMargins(margins, chartMargins, showLabels),
+            onClick: handleChartClick,
+            children: [
+              showGrid && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                import_recharts2.CartesianGrid,
+                {
+                  strokeDasharray: "3 3",
+                  stroke: gridColor || "hsl(var(--muted-foreground))",
+                  opacity: 0.5
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                import_recharts2.XAxis,
+                {
+                  dataKey: xAxisConfig.dataKey,
+                  stroke: "hsl(var(--muted-foreground))",
+                  fontSize: 12,
+                  tickLine: false,
+                  axisLine: false,
+                  tickFormatter: xAxisConfig.formatter
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                import_recharts2.YAxis,
+                {
+                  stroke: "hsl(var(--muted-foreground))",
+                  fontSize: 12,
+                  tickLine: false,
+                  axisLine: false,
+                  tickFormatter: (value) => value.toLocaleString("pt-BR"),
+                  domain: [0, niceMax],
+                  tickCount: 6
+                }
+              ),
+              showTooltip && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                import_recharts2.Tooltip,
+                {
+                  content: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CustomTooltip, {}),
+                  cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
+                }
+              ),
+              showLegend && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                import_recharts2.Legend,
+                {
+                  wrapperStyle: {
+                    color: "hsl(var(--foreground))",
+                    fontSize: "14px"
+                  }
+                }
+              ),
+              dataKeys.map((key) => {
+                const fieldConfig = mapperConfig[key];
+                return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                  import_recharts2.Bar,
+                  {
+                    dataKey: key,
+                    name: fieldConfig?.label || key,
+                    fill: fieldConfig?.color || finalColors[key],
+                    radius: [4, 4, 0, 0],
+                    onClick: handleBarClick,
+                    style: { cursor: "pointer" },
+                    activeBar: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                      import_recharts2.Rectangle,
+                      {
+                        fill: finalColors[key],
+                        stroke: finalColors[key],
+                        strokeWidth: 2,
+                        opacity: 0.8
+                      }
+                    ),
+                    children: showLabels && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                      import_recharts2.LabelList,
+                      {
+                        dataKey: key,
+                        position: "top",
+                        content: pillLabelRenderer_default(
+                          finalColors[key] || "#000",
+                          "filled"
+                        )
+                      }
+                    )
+                  },
+                  key
+                );
+              })
+            ]
+          }
+        ),
+        alignmentGuides.map((guide, index) => {
+          const isHorizontal = guide.type === "horizontal";
+          const color = isHorizontal ? "#3b82f6" : "#ef4444";
+          const startX = isHorizontal ? Math.min(
+            guide.sourceTooltip.left + guide.sourceTooltip.width / 2,
+            guide.targetTooltip.left + guide.targetTooltip.width / 2
+          ) : guide.sourceTooltip.left + (isHorizontal ? 0 : guide.sourceTooltip.width / 2);
+          const endX = isHorizontal ? Math.max(
+            guide.sourceTooltip.left + guide.sourceTooltip.width / 2,
+            guide.targetTooltip.left + guide.targetTooltip.width / 2
+          ) : guide.targetTooltip.left + (isHorizontal ? 0 : guide.targetTooltip.width / 2);
+          const startY = isHorizontal ? guide.sourceTooltip.top + (isHorizontal ? guide.sourceTooltip.height / 2 : 0) : Math.min(
+            guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
+            guide.targetTooltip.top + guide.targetTooltip.height / 2
+          );
+          const endY = isHorizontal ? guide.targetTooltip.top + (isHorizontal ? guide.targetTooltip.height / 2 : 0) : Math.max(
+            guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
+            guide.targetTooltip.top + guide.targetTooltip.height / 2
+          );
+          return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              "div",
+              {
+                className: "fixed pointer-events-none z-30",
+                style: {
+                  left: startX,
+                  top: startY,
+                  width: isHorizontal ? endX - startX : "2px",
+                  height: isHorizontal ? "2px" : endY - startY,
+                  backgroundColor: color,
+                  boxShadow: `0 0 8px ${color}60`,
+                  opacity: 0.9,
+                  borderStyle: "dashed",
+                  borderWidth: "1px",
+                  borderColor: color,
+                  transform: "translateZ(0)"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              "div",
+              {
+                className: "fixed pointer-events-none z-31",
+                style: {
+                  left: guide.sourceTooltip.left + guide.sourceTooltip.width / 2 - 4,
+                  top: guide.sourceTooltip.top + guide.sourceTooltip.height / 2 - 4,
+                  width: "8px",
+                  height: "8px",
+                  backgroundColor: color,
+                  borderRadius: "50%",
+                  boxShadow: `0 0 4px ${color}80`,
+                  opacity: 0.8
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              "div",
+              {
+                className: "fixed pointer-events-none z-31",
+                style: {
+                  left: guide.targetTooltip.left + guide.targetTooltip.width / 2 - 4,
+                  top: guide.targetTooltip.top + guide.targetTooltip.height / 2 - 4,
+                  width: "8px",
+                  height: "8px",
+                  backgroundColor: color,
+                  borderRadius: "50%",
+                  boxShadow: `0 0 4px ${color}80`,
+                  opacity: 0.8
+                }
+              }
+            )
+          ] }, index);
+        }),
+        activeTooltips.map((tooltip, index) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          DraggableTooltip_default,
+          {
+            id: tooltip.id,
+            data: adaptDataForTooltip(tooltip.data),
+            position: tooltip.position,
+            isDragging: isDragging === tooltip.id,
+            title,
+            dataKeys,
+            finalColors,
+            onMouseDown: (id, e) => handleMouseDown(e, id),
+            onClose: (id) => {
+              setActiveTooltips((prev) => prev.filter((t) => t.id !== id));
+            },
+            periodLabel: "Per\xEDodo Selecionado",
+            dataLabel: "Dados do Per\xEDodo",
+            showCloseAllButton: index === 0,
+            globalTooltipCount,
+            onCloseAll: () => {
+              window.dispatchEvent(new Event("closeAllTooltips"));
+            },
+            closeAllButtonPosition: "top-center",
+            closeAllButtonVariant: "floating"
+          },
+          tooltip.id
+        ))
+      ]
+    }
+  );
+};
+var BarChart_default = BarChart;
+
+// src/components/charts/LineChart.tsx
+var import_react38 = require("react");
+var import_recharts3 = require("recharts");
+var import_jsx_runtime59 = require("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] = (0, import_react38.useState)([]);
+  const [isDragging, setIsDragging] = (0, import_react38.useState)(null);
+  const [dragOffset, setDragOffset] = (0, import_react38.useState)({
+    x: 0,
+    y: 0
+  });
+  const [globalTooltipCount, setGlobalTooltipCount] = (0, import_react38.useState)(0);
+  const [alignmentGuides, setAlignmentGuides] = (0, import_react38.useState)([]);
+  const generateColors = (dataKeys2) => {
+    const colorMap = {};
+    const allColors = generateAdditionalColors(colors2, dataKeys2.length);
+    dataKeys2.forEach((key, index) => {
+      colorMap[key] = allColors[index] || colors2[index % colors2.length];
+    });
+    return colorMap;
+  };
+  const dataKeys = (0, import_react38.useMemo)(
+    () => data.length > 0 ? Object.keys(data[0]).filter((key) => key !== "name") : [],
+    [data]
+  );
+  const finalColors = generateColors(dataKeys);
+  const maxDataValue = (0, import_react38.useMemo)(() => {
+    let max = 0;
+    for (const row of data) {
+      const r = row;
+      for (const key of dataKeys) {
+        const v = r[key];
+        if (typeof v === "number" && Number.isFinite(v) && v > max)
+          max = v;
+      }
+    }
+    return max;
+  }, [data, dataKeys]);
+  const niceMax = (0, import_react38.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime59.jsx)(
+      "circle",
+      {
+        cx,
+        cy,
+        r: 6,
+        fill: finalColors[dataKey || ""] || colors2[0],
+        stroke: finalColors[dataKey || ""] || colors2[0],
+        strokeWidth: 2,
+        style: { cursor: "pointer" },
+        onClick: handleDotClick
+      }
+    );
+  };
+  const handleChartClick = (e) => {
+    if (e && e.activePayload && e.activePayload.length > 0) {
+      const clickedData = e.activePayload[0].payload;
+      const tooltipId = `${clickedData.name}`;
+      const existingIndex = activeTooltips.findIndex(
+        (tooltip) => tooltip.id === tooltipId
+      );
+      if (existingIndex !== -1) {
+        setActiveTooltips(
+          (prev) => prev.filter((tooltip) => tooltip.id !== tooltipId)
+        );
+      } else {
+        const newTooltip = {
+          id: tooltipId,
+          data: clickedData,
+          position: {
+            top: (e.chartY || 100) - 10,
+            left: (e.chartX || 100) - 100
+          }
+        };
+        setActiveTooltips((prev) => [...prev, newTooltip]);
+      }
+    } else {
+    }
+  };
+  const handleChartBackgroundClick = () => {
+    setActiveTooltips([]);
+  };
+  const handleCloseAllTooltips = (0, import_react38.useCallback)(() => {
+    window.dispatchEvent(new CustomEvent("closeAllTooltips"));
+  }, []);
+  const updateAlignmentGuides = (0, import_react38.useCallback)(
+    (draggedTooltipId, draggedPosition) => {
+      const SNAP_THRESHOLD = 15;
+      const draggedTooltip = activeTooltips.find(
+        (t) => t.id === draggedTooltipId
+      );
+      if (!draggedTooltip) return;
+      const tooltipWidth = 200;
+      const tooltipHeight = 80;
+      const globalTooltips = [];
+      window.dispatchEvent(
+        new CustomEvent("requestGlobalTooltips", {
+          detail: { requesterId: draggedTooltipId }
+        })
+      );
+      activeTooltips.forEach((tooltip) => {
+        if (tooltip.id !== draggedTooltipId) {
+          globalTooltips.push({
+            top: tooltip.position.top,
+            left: tooltip.position.left,
+            width: tooltipWidth,
+            height: tooltipHeight,
+            id: tooltip.id
+          });
+        }
+      });
+      const newGuides = [];
+      globalTooltips.forEach((otherTooltip) => {
+        const draggedCenter = {
+          x: draggedPosition.left + tooltipWidth / 2,
+          y: draggedPosition.top + tooltipHeight / 2
+        };
+        const otherCenter = {
+          x: otherTooltip.left + otherTooltip.width / 2,
+          y: otherTooltip.top + otherTooltip.height / 2
+        };
+        const horizontalDistance = Math.abs(draggedCenter.y - otherCenter.y);
+        if (horizontalDistance <= SNAP_THRESHOLD) {
+          newGuides.push({
+            type: "horizontal",
+            position: otherCenter.y,
+            visible: true,
+            sourceTooltip: {
+              top: draggedPosition.top,
+              left: draggedPosition.left,
+              width: tooltipWidth,
+              height: tooltipHeight
+            },
+            targetTooltip: {
+              top: otherTooltip.top,
+              left: otherTooltip.left,
+              width: otherTooltip.width,
+              height: otherTooltip.height
+            }
+          });
+        }
+        const verticalDistance = Math.abs(draggedCenter.x - otherCenter.x);
+        if (verticalDistance <= SNAP_THRESHOLD) {
+          newGuides.push({
+            type: "vertical",
+            position: otherCenter.x,
+            visible: true,
+            sourceTooltip: {
+              top: draggedPosition.top,
+              left: draggedPosition.left,
+              width: tooltipWidth,
+              height: tooltipHeight
+            },
+            targetTooltip: {
+              top: otherTooltip.top,
+              left: otherTooltip.left,
+              width: otherTooltip.width,
+              height: otherTooltip.height
+            }
+          });
+        }
+      });
+      setAlignmentGuides(newGuides);
+    },
+    [activeTooltips]
+  );
+  const snapToGuides = (0, import_react38.useCallback)(
+    (position) => {
+      const SNAP_DISTANCE = 10;
+      const snappedPosition = { ...position };
+      alignmentGuides.forEach((guide) => {
+        if (guide.type === "horizontal") {
+          const tooltipCenter = position.top + 40;
+          if (Math.abs(tooltipCenter - guide.position) <= SNAP_DISTANCE) {
+            snappedPosition.top = guide.position - 40;
+          }
+        } else if (guide.type === "vertical") {
+          const tooltipCenter = position.left + 100;
+          if (Math.abs(tooltipCenter - guide.position) <= SNAP_DISTANCE) {
+            snappedPosition.left = guide.position - 100;
+          }
+        }
+      });
+      return snappedPosition;
+    },
+    [alignmentGuides]
+  );
+  const handleMouseDown = (tooltipId, e) => {
+    const rect = e.target.getBoundingClientRect();
+    const offsetX = e.clientX - rect.left;
+    const offsetY = e.clientY - rect.top;
+    setIsDragging(tooltipId);
+    setDragOffset({ x: offsetX, y: offsetY });
+  };
+  (0, import_react38.useEffect)(() => {
+    let rafId;
+    let lastMousePosition = { x: 0, y: 0 };
+    const handleGlobalMouseMove = (e) => {
+      if (!isDragging) return;
+      lastMousePosition = { x: e.clientX, y: e.clientY };
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        const newLeft = lastMousePosition.x - dragOffset.x;
+        const newTop = lastMousePosition.y - dragOffset.y;
+        let finalPosition = { top: newTop, left: newLeft };
+        finalPosition = snapToGuides(finalPosition);
+        setActiveTooltips(
+          (prev) => prev.map(
+            (tooltip) => tooltip.id === isDragging ? { ...tooltip, position: finalPosition } : tooltip
+          )
+        );
+        updateAlignmentGuides(isDragging, finalPosition);
+      });
+    };
+    const handleGlobalMouseUp = () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      setIsDragging(null);
+      setAlignmentGuides([]);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+    if (isDragging) {
+      document.body.style.cursor = "grabbing";
+      document.body.style.userSelect = "none";
+      window.addEventListener("mousemove", handleGlobalMouseMove);
+      window.addEventListener("mouseup", handleGlobalMouseUp);
+    }
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      window.removeEventListener("mousemove", handleGlobalMouseMove);
+      window.removeEventListener("mouseup", handleGlobalMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [
+    isDragging,
+    dragOffset,
+    alignmentGuides,
+    updateAlignmentGuides,
+    snapToGuides
+  ]);
+  (0, import_react38.useEffect)(() => {
+    const handleCloseAllTooltips2 = () => {
+      setActiveTooltips([]);
+      setGlobalTooltipCount(0);
+    };
+    window.addEventListener("closeAllTooltips", handleCloseAllTooltips2);
+    return () => {
+      window.removeEventListener("closeAllTooltips", handleCloseAllTooltips2);
+    };
+  }, []);
+  (0, import_react38.useEffect)(() => {
+    const handleTooltipCountRequest = () => {
+      window.dispatchEvent(
+        new CustomEvent("tooltipCountResponse", {
+          detail: { count: activeTooltips.length }
+        })
+      );
+    };
+    const handleGlobalTooltipsRequest = (event) => {
+      const requesterId = event.detail?.requesterId;
+      activeTooltips.forEach((tooltip) => {
+        if (tooltip.id !== requesterId) {
+          window.dispatchEvent(
+            new CustomEvent("globalTooltipResponse", {
+              detail: {
+                tooltip: {
+                  top: tooltip.position.top,
+                  left: tooltip.position.left,
+                  width: 200,
+                  height: 80,
+                  id: tooltip.id
+                }
+              }
+            })
+          );
+        }
+      });
+    };
+    window.addEventListener("requestTooltipCount", handleTooltipCountRequest);
+    window.addEventListener(
+      "requestGlobalTooltips",
+      handleGlobalTooltipsRequest
+    );
+    return () => {
+      window.removeEventListener(
+        "requestTooltipCount",
+        handleTooltipCountRequest
+      );
+      window.removeEventListener(
+        "requestGlobalTooltips",
+        handleGlobalTooltipsRequest
+      );
+    };
+  }, [activeTooltips]);
+  (0, import_react38.useEffect)(() => {
+    if (isDragging) return;
+    let totalCount = 0;
+    const handleCountResponse = (event) => {
+      const customEvent = event;
+      totalCount += customEvent.detail.count;
+    };
+    window.addEventListener("tooltipCountResponse", handleCountResponse);
+    window.dispatchEvent(new CustomEvent("requestTooltipCount"));
+    const timeoutId = setTimeout(() => {
+      window.removeEventListener("tooltipCountResponse", handleCountResponse);
+      setGlobalTooltipCount(totalCount);
+    }, 5);
+    return () => {
+      clearTimeout(timeoutId);
+      window.removeEventListener("tooltipCountResponse", handleCountResponse);
+    };
+  }, [activeTooltips.length, isDragging]);
+  const getTitleClass = () => {
+    switch (titlePosition) {
+      case "center":
+        return "text-center";
+      case "right":
+        return "text-right";
+      default:
+        return "text-left";
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: cn("relative", className), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+    "div",
+    {
+      className: "rounded-lg bg-card p-4 relative border border-border",
+      style: {
+        width: typeof width === "number" ? `${width + 32}px` : "fit-content",
+        maxWidth: "100%"
+      },
+      onClick: handleChartBackgroundClick,
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: cn("mb-4", getTitleClass()), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: title }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+          import_recharts3.LineChart,
+          {
+            data,
+            width: typeof width === "number" ? width : 900,
+            height,
+            margin: resolveChartMargins(margins, chartMargins, showLabels),
+            onClick: handleChartClick,
+            children: [
+              showGrid && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                import_recharts3.CartesianGrid,
+                {
+                  strokeDasharray: "3 3",
+                  stroke: gridColor || "hsl(var(--muted-foreground))",
+                  opacity: 0.3
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                import_recharts3.XAxis,
+                {
+                  dataKey: "name",
+                  className: "fill-muted-foreground text-xs",
+                  fontSize: 12
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                import_recharts3.YAxis,
+                {
+                  className: "fill-muted-foreground text-xs",
+                  fontSize: 12,
+                  tickFormatter: (value) => compactTick(Number(value)),
+                  domain: [0, niceMax],
+                  tickCount: 6
+                }
+              ),
+              showTooltip && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_recharts3.Tooltip, { content: () => null }),
+              showLegend && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                import_recharts3.Legend,
+                {
+                  wrapperStyle: {
+                    fontSize: "12px",
+                    color: "hsl(var(--muted-foreground))"
+                  }
+                }
+              ),
+              dataKeys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                import_recharts3.Line,
+                {
+                  type: "monotone",
+                  dataKey: key,
+                  stroke: finalColors[key],
+                  strokeWidth,
+                  dot: showDots ? { r: 4, cursor: "pointer" } : false,
+                  activeDot: (props) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ClickableDot, { ...props, dataKey: key }),
+                  children: showLabels && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                    import_recharts3.LabelList,
+                    {
+                      dataKey: key,
+                      position: "top",
+                      content: pillLabelRenderer_default(
+                        finalColors[key] || "#000",
+                        "filled"
+                      ),
+                      offset: 14
+                    }
+                  )
+                },
+                key
+              ))
+            ]
+          }
+        ),
+        alignmentGuides.map((guide, index) => {
+          const isHorizontal = guide.type === "horizontal";
+          const color = isHorizontal ? "#3b82f6" : "#ef4444";
+          const startX = isHorizontal ? Math.min(
+            guide.sourceTooltip.left + guide.sourceTooltip.width / 2,
+            guide.targetTooltip.left + guide.targetTooltip.width / 2
+          ) : guide.sourceTooltip.left + (isHorizontal ? 0 : guide.sourceTooltip.width / 2);
+          const endX = isHorizontal ? Math.max(
+            guide.sourceTooltip.left + guide.sourceTooltip.width / 2,
+            guide.targetTooltip.left + guide.targetTooltip.width / 2
+          ) : guide.targetTooltip.left + (isHorizontal ? 0 : guide.targetTooltip.width / 2);
+          const startY = isHorizontal ? guide.sourceTooltip.top + (isHorizontal ? guide.sourceTooltip.height / 2 : 0) : Math.min(
+            guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
+            guide.targetTooltip.top + guide.targetTooltip.height / 2
+          );
+          const endY = isHorizontal ? guide.targetTooltip.top + (isHorizontal ? guide.targetTooltip.height / 2 : 0) : Math.max(
+            guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
+            guide.targetTooltip.top + guide.targetTooltip.height / 2
+          );
+          return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              "div",
+              {
+                className: "fixed pointer-events-none z-30",
+                style: {
+                  left: startX,
+                  top: startY,
+                  width: isHorizontal ? endX - startX : "2px",
+                  height: isHorizontal ? "2px" : endY - startY,
+                  backgroundColor: color,
+                  boxShadow: `0 0 8px ${color}60`,
+                  opacity: 0.9,
+                  borderStyle: "dashed",
+                  borderWidth: "1px",
+                  borderColor: color,
+                  transform: "translateZ(0)"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              "div",
+              {
+                className: "fixed pointer-events-none z-31",
+                style: {
+                  left: guide.sourceTooltip.left + guide.sourceTooltip.width / 2 - 4,
+                  top: guide.sourceTooltip.top + guide.sourceTooltip.height / 2 - 4,
+                  width: "8px",
+                  height: "8px",
+                  backgroundColor: color,
+                  borderRadius: "50%",
+                  boxShadow: `0 0 4px ${color}80`,
+                  opacity: 0.8
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              "div",
+              {
+                className: "fixed pointer-events-none z-31",
+                style: {
+                  left: guide.targetTooltip.left + guide.targetTooltip.width / 2 - 4,
+                  top: guide.targetTooltip.top + guide.targetTooltip.height / 2 - 4,
+                  width: "8px",
+                  height: "8px",
+                  backgroundColor: color,
+                  borderRadius: "50%",
+                  boxShadow: `0 0 4px ${color}80`,
+                  opacity: 0.8
+                }
+              }
+            )
+          ] }, index);
+        }),
+        activeTooltips.map((tooltip, index) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          DraggableTooltip_default,
+          {
+            id: tooltip.id,
+            data: tooltip.data,
+            position: tooltip.position,
+            isDragging: isDragging === tooltip.id,
+            title,
+            dataKeys,
+            finalColors,
+            onMouseDown: (id, e) => handleMouseDown(id, e),
+            onClose: (id) => {
+              setActiveTooltips((prev) => prev.filter((t) => t.id !== id));
+            },
+            periodLabel: "Ponto Selecionado",
+            dataLabel: "Dados do Ponto",
+            showCloseAllButton: index === 0,
+            globalTooltipCount,
+            onCloseAll: handleCloseAllTooltips,
+            closeAllButtonPosition: "top-center",
+            closeAllButtonVariant: "floating"
+          },
+          tooltip.id
+        ))
+      ]
+    }
+  ) });
+};
+var LineChart_default = CustomLineChart;
+
+// src/components/charts/PieChart.tsx
+var import_recharts4 = require("recharts");
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var defaultData2 = [
+  { name: "Vendas", value: 4e3 },
+  { name: "Marketing", value: 3e3 },
+  { name: "Desenvolvimento", value: 2e3 },
+  { name: "Suporte", value: 1e3 },
+  { name: "Outros", value: 800 }
+];
+var DEFAULT_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__ */ (0, import_jsx_runtime60.jsx)(
+    "text",
+    {
+      x,
+      y,
+      fill: "white",
+      textAnchor: x > cx ? "start" : "end",
+      dominantBaseline: "central",
+      fontSize: 12,
+      fontWeight: "600",
+      children: `${(percent * 100).toFixed(0)}%`
+    }
+  );
+};
+var CustomPieChart = ({
+  data = defaultData2,
+  className,
+  height = 400,
+  width = "100%",
+  colors: colors2,
+  showTooltip = true,
+  showLegend = true,
+  showLabels = true,
+  innerRadius = 0,
+  outerRadius = 120,
+  centerX = "50%",
+  centerY = "50%"
+}) => {
+  const finalColors = colors2 || DEFAULT_COLORS4;
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: cn("w-full rounded-lg bg-card p-4", className), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts4.ResponsiveContainer, { width, height, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_recharts4.PieChart, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      import_recharts4.Pie,
+      {
+        data,
+        cx: centerX,
+        cy: centerY,
+        labelLine: false,
+        label: showLabels ? renderCustomizedLabel : false,
+        outerRadius,
+        innerRadius,
+        fill: "#8884d8",
+        dataKey: "value",
+        children: data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          import_recharts4.Cell,
+          {
+            fill: finalColors[index % finalColors.length]
+          },
+          `cell-${entry.name}-${index}`
+        ))
+      }
+    ),
+    showTooltip && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      import_recharts4.Tooltip,
+      {
+        contentStyle: {
+          backgroundColor: "hsl(var(--popover))",
+          border: "1px solid hsl(var(--border))",
+          borderRadius: "6px",
+          color: "hsl(var(--popover-foreground))"
+        }
+      }
+    ),
+    showLegend && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts4.Legend, {})
+  ] }) }) });
+};
+var PieChart_default = CustomPieChart;
+
+// src/components/charts/hooks/useChartHighlights.tsx
+var import_react39 = require("react");
+var useChartHighlights = () => {
+  const [highlightedSeries, setHighlightedSeries] = (0, import_react39.useState)(
+    /* @__PURE__ */ new Set()
+  );
+  const [showOnlyHighlighted, setShowOnlyHighlighted] = (0, import_react39.useState)(false);
+  const toggleHighlight = (0, import_react39.useCallback)((key) => {
+    setHighlightedSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
+  const clearHighlights = (0, import_react39.useCallback)(() => {
+    setHighlightedSeries(/* @__PURE__ */ new Set());
+    setShowOnlyHighlighted(false);
+  }, []);
+  const isHighlighted = (0, import_react39.useCallback)(
+    (key) => {
+      return highlightedSeries.has(key);
+    },
+    [highlightedSeries]
+  );
+  const getSeriesStyle = (0, import_react39.useCallback)(
+    (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
-var import_react35 = require("react");
+var import_react40 = require("react");
 var useDrag = (options = {}) => {
-  const [isDragging, setIsDragging] = (0, import_react35.useState)(null);
-  const [positions, setPositions] = (0, import_react35.useState)({});
-  const dragStartPos = (0, import_react35.useRef)(null);
-  const dragId = (0, import_react35.useRef)(null);
-  const handleMouseDown = (0, import_react35.useCallback)((id, e) => {
+  const [isDragging, setIsDragging] = (0, import_react40.useState)(null);
+  const [positions, setPositions] = (0, import_react40.useState)({});
+  const dragStartPos = (0, import_react40.useRef)(null);
+  const dragId = (0, import_react40.useRef)(null);
+  const handleMouseDown = (0, import_react40.useCallback)((id, e) => {
     e.preventDefault();
     const currentPosition = positions[id] || { top: 0, left: 0 };
     dragStartPos.current = {
@@ -6869,7 +9172,7 @@ var useDrag = (options = {}) => {
     setIsDragging(id);
     options.onDragStart?.(id);
   }, [positions, options]);
-  const handleMouseMove = (0, import_react35.useCallback)((e) => {
+  const handleMouseMove = (0, import_react40.useCallback)((e) => {
     if (!isDragging || !dragStartPos.current || !dragId.current) return;
     const deltaX = e.clientX - dragStartPos.current.x;
     const deltaY = e.clientY - dragStartPos.current.y;
@@ -6885,7 +9188,7 @@ var useDrag = (options = {}) => {
     }));
     options.onDrag?.(dragId.current, newPosition);
   }, [isDragging, options]);
-  const handleMouseUp = (0, import_react35.useCallback)(() => {
+  const handleMouseUp = (0, import_react40.useCallback)(() => {
     if (dragId.current) {
       options.onDragEnd?.(dragId.current);
     }
@@ -6893,7 +9196,7 @@ var useDrag = (options = {}) => {
     dragStartPos.current = null;
     dragId.current = null;
   }, [options]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (isDragging) {
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
@@ -6905,16 +9208,16 @@ var useDrag = (options = {}) => {
       };
     }
   }, [isDragging, handleMouseMove, handleMouseUp]);
-  const setPosition = (0, import_react35.useCallback)((id, position) => {
+  const setPosition = (0, import_react40.useCallback)((id, position) => {
     setPositions((prev) => ({
       ...prev,
       [id]: position
     }));
   }, []);
-  const getPosition = (0, import_react35.useCallback)((id) => {
+  const getPosition = (0, import_react40.useCallback)((id) => {
     return positions[id] || { top: 0, left: 0 };
   }, [positions]);
-  const isElementDragging = (0, import_react35.useCallback)((id) => {
+  const isElementDragging = (0, import_react40.useCallback)((id) => {
     return isDragging === id;
   }, [isDragging]);
   return {