@mlw-packages/react-components 1.8.4 → 1.8.6

package/dist/index.mjs

@@ -491,7 +491,7 @@ function cn(...inputs) {
 }
 
 // src/components/ui/form/ButtonBase.tsx
-import { CircleNotchIcon } from "@phosphor-icons/react";
+import { CircleNotchIcon as CircleNotchIcon2 } from "@phosphor-icons/react";
 
 // src/components/ui/feedback/AlertDialogBase.tsx
 import * as React from "react";
@@ -630,18 +630,12 @@ var DialogContentBase = React2.forwardRef(
         {
           ref,
           className: cn(
-            "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[100dvh] overflow-hidden rounded-md",
+            "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[100dvh] overflow-auto rounded-md border-border",
             className
           ),
           "data-testid": dataTestId,
           ...props,
-          onWheel: (e) => {
-            try {
-              userOnWheel?.(e);
-            } finally {
-              e.stopPropagation();
-            }
-          },
+          onWheel: userOnWheel,
           children: [
             children,
             /* @__PURE__ */ jsxs2(DialogPrimitive.Close, { className: "absolute right-3 top-3 sm:right-4 sm:top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground z-10 touch-manipulation", children: [
@@ -958,7 +952,7 @@ var ProgressBase = React5.forwardRef(
       default:
         return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1 w-full min-w-[150px]", children: [
           label && /* @__PURE__ */ jsx5(LabelBase_default, { className: "py-2", children: label }),
-          /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-2", children: [
             showValue && valuePosition === "left" && /* @__PURE__ */ jsxs4("div", { className: "w-12 text-sm text-right font-extrabold", children: [
               Math.round(value || 0),
               "%"
@@ -1172,49 +1166,59 @@ import {
   XCircleIcon,
   InfoIcon,
   WarningIcon,
-  SpinnerIcon
+  CircleNotchIcon
 } from "@phosphor-icons/react";
 import { Toaster as Sonner, toast as sonnertoast } from "sonner";
 import { jsx as jsx7 } from "react/jsx-runtime";
-var iconBaseClass = "w-5 h-auto";
+var iconBaseClass = "w-5 h-5";
 var Toaster = ({ testId, ...props }) => {
   return /* @__PURE__ */ jsx7(
     Sonner,
     {
       className: "toaster group",
       position: "top-center",
+      duration: 4e3,
       toastOptions: {
+        style: {
+          backdropFilter: "blur(8px)",
+          WebkitBackdropFilter: "blur(8px)"
+        },
         classNames: {
           toast: `
             group toast
-            bg-background
+            bg-background/95
             text-foreground
-            shadow-lg rounded-md
+            shadow-xl rounded-lg
             border-l-4
             border-border
             flex items-center gap-3
-            data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50 data-[type=success]:text-green-800 data-[type=success]:border-green-500
-            data-[type=error]:border-l-red-500 data-[type=error]:bg-red-50 data-[type=error]:text-red-800 data-[type=error]:border-red-500
-            data-[type=WarningIcon]:border-l-yellow-500 data-[type=WarningIcon]:bg-yellow-50 data-[type=WarningIcon]:text-yellow-800 data-[type=WarningIcon]:border-yellow-500
-            data-[type=InfoIcon]:border-l-blue-500 data-[type=InfoIcon]:bg-blue-50 data-[type=InfoIcon]:text-blue-800 data-[type=InfoIcon]:border-blue-500
+            transition-all duration-300
+            hover:scale-[1.02] hover:shadow-2xl
+            data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50/95 data-[type=success]:text-green-800 data-[type=success]:border-green-500
+            data-[type=error]:border-l-red-500 data-[type=error]:bg-red-50/95 data-[type=error]:text-red-800 data-[type=error]:border-red-500
+            data-[type=warning]:border-l-yellow-500 data-[type=warning]:bg-yellow-50/95 data-[type=warning]:text-yellow-800 data-[type=warning]:border-yellow-500
+            data-[type=info]:border-l-blue-500 data-[type=info]:bg-blue-50/95 data-[type=info]:text-blue-800 data-[type=info]:border-blue-500
           `,
           description: `
-            text-sm
+            text-xs
+            font-semibold
             group-[.toast]:text-neutral-600
           `,
           actionButton: `
             ml-auto
             rounded-md px-3 py-1 text-sm font-semibold
             bg-neutral-800 text-white
-            hover:bg-neutral-700
-            transition-colors duration-200
+            hover:bg-neutral-700 hover:scale-105
+            transition-all duration-200
+            active:scale-95
           `,
           cancelButton: `
             ml-2
             rounded-md px-3 py-1 text-sm font-semibold
             bg-neutral-100 text-neutral-700
-            hover:bg-neutral-200
-            transition-colors duration-200
+            hover:bg-neutral-200 hover:scale-105
+            transition-all duration-200
+            active:scale-95
           `
         }
       },
@@ -1224,24 +1228,52 @@ var Toaster = ({ testId, ...props }) => {
   );
 };
 var toast = {
-  success: (message) => sonnertoast.success(message, {
-    icon: /* @__PURE__ */ jsx7(CheckCircleIcon, { className: `${iconBaseClass} text-green-600`, weight: "fill" }),
+  success: (message, description) => sonnertoast.success(message, {
+    description,
+    icon: /* @__PURE__ */ jsx7(
+      CheckCircleIcon,
+      {
+        className: `${iconBaseClass} text-green-600`,
+        weight: "fill"
+      }
+    ),
     className: "sonner-success"
   }),
-  error: (message) => sonnertoast.error(message, {
-    icon: /* @__PURE__ */ jsx7(XCircleIcon, { className: `${iconBaseClass} text-red-600`, weight: "fill" }),
+  error: (message, description) => sonnertoast.error(message, {
+    description,
+    icon: /* @__PURE__ */ jsx7(
+      XCircleIcon,
+      {
+        className: `${iconBaseClass} text-red-600`,
+        weight: "fill"
+      }
+    ),
     className: "sonner-error"
   }),
-  warning: (message) => sonnertoast.warning(message, {
-    icon: /* @__PURE__ */ jsx7(WarningIcon, { className: `${iconBaseClass} text-yellow-600`, weight: "fill" }),
-    className: "sonner-WarningIcon"
+  warning: (message, description) => sonnertoast.warning(message, {
+    description,
+    icon: /* @__PURE__ */ jsx7(
+      WarningIcon,
+      {
+        className: `${iconBaseClass} text-yellow-600`,
+        weight: "fill"
+      }
+    ),
+    className: "sonner-warning"
   }),
-  info: (message) => sonnertoast.info(message, {
+  info: (message, description) => sonnertoast.info(message, {
+    description,
     icon: /* @__PURE__ */ jsx7(InfoIcon, { className: `${iconBaseClass} text-blue-600`, weight: "fill" }),
-    className: "sonner-InfoIcon"
+    className: "sonner-info"
   }),
-  loading: (message) => sonnertoast(message, {
-    icon: /* @__PURE__ */ jsx7(SpinnerIcon, { className: `${iconBaseClass} animate-spin text-neutral-500`, weight: "fill" }),
+  loading: (message, description) => sonnertoast(message, {
+    description,
+    icon: /* @__PURE__ */ jsx7(
+      CircleNotchIcon,
+      {
+        className: `${iconBaseClass} animate-spin text-gray-600`
+      }
+    ),
     className: "sonner-loading"
   })
 };
@@ -1389,12 +1421,21 @@ var TooltipTriggerBase = React7.forwardRef(({ children, onPointerDown, ...props
     },
     [onPointerDown]
   );
+  const onClick = React7.useCallback(
+    (e) => {
+      if (onPointerDown) {
+        onPointerDown(e);
+      }
+    },
+    [onPointerDown]
+  );
   return /* @__PURE__ */ jsx8(
     TooltipPrimitive.Trigger,
     {
       ref,
       tabIndex: -1,
       onPointerDown: onPointerDown ? handlePointerDown : void 0,
+      onClick,
       "data-tooltip-trigger": true,
       "aria-describedby": "tooltip-content",
       ...props,
@@ -1559,7 +1600,7 @@ var ModalContentBase = React9.forwardRef(
           ref,
           className: cn(
             "fixed z-50 grid w-full gap-4 border bg-background p-6 shadow-lg sm:rounded-lg max-h-[90dvh] overflow-auto",
-            "data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out",
+            "data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out border-border",
             positionClass,
             sizeClass,
             className
@@ -1639,7 +1680,7 @@ var buttonVariantsBase = cva2(
       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: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-background dark:border-input dark:hover:bg-background/95",
+        outline: "border border-border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-background dark:border-input dark:hover:bg-background/95",
         select: "box-border border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-background 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",
@@ -1691,7 +1732,7 @@ var ButtonBase = React10.forwardRef(
           isActivelyLoading && /* @__PURE__ */ jsxs8("span", { className: "absolute inset-0 flex items-center justify-center pointer-events-none rounded-md", children: [
             /* @__PURE__ */ jsx11("span", { className: "absolute inset-0 rounded-md backdrop-blur overflow-hidden" }),
             /* @__PURE__ */ jsx11(
-              CircleNotchIcon,
+              CircleNotchIcon2,
               {
                 weight: "bold",
                 className: "relative animate-spin h-4 w-4 text-current"
@@ -1995,6 +2036,11 @@ var PopoverContentBase = React13.forwardRef(
         className
       ),
       "data-testid": dataTestId,
+      onInteractOutside: (event) => {
+        props.onInteractOutside?.(event);
+        if (event.defaultPrevented) return;
+        event.stopPropagation();
+      },
       ...props
     }
   ) })
@@ -2056,7 +2102,7 @@ function ComboboxBase({
   testIds = {},
   onClear,
   hasSelected = false,
-  hiddenClean = (node) => node
+  hideClear = false
 }) {
   const [open, setOpen] = useState4(false);
   return /* @__PURE__ */ jsxs11(
@@ -2070,13 +2116,13 @@ function ComboboxBase({
           {
             open,
             onOpenChange: (v) => !disabled && setOpen(v),
-            modal: true,
+            modal: false,
             children: [
               /* @__PURE__ */ jsx17(
                 PopoverTriggerBase,
                 {
                   asChild: true,
-                  className: "flex w-full justify-between dark:bg-[hsl(231,15%,19%)]",
+                  className: "flex w-full justify-between dark:bg-[hsl(231,15%,19%)] p-3",
                   children: /* @__PURE__ */ jsxs11(
                     ButtonBase,
                     {
@@ -2094,19 +2140,17 @@ function ComboboxBase({
                       children: [
                         renderSelected,
                         /* @__PURE__ */ jsx17(motion2.span, { className: "flex items-center", children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-row gap-0 items-center ", children: [
-                          hasSelected && onClear && !disabled && hiddenClean(
-                            /* @__PURE__ */ jsx17(
-                              ClearButton,
-                              {
-                                onClick: (e) => {
-                                  if (e) e.stopPropagation();
-                                  if (onClear && !disabled) {
-                                    onClear();
-                                    if (!keepOpen) setOpen(false);
-                                  }
+                          hasSelected && onClear && !disabled && !hideClear && /* @__PURE__ */ jsx17(
+                            ClearButton,
+                            {
+                              onClick: (e) => {
+                                if (e) e.stopPropagation();
+                                if (onClear && !disabled) {
+                                  onClear();
+                                  if (!keepOpen) setOpen(false);
                                 }
                               }
-                            )
+                            }
                           ),
                           /* @__PURE__ */ jsx17(
                             motion2.div,
@@ -2222,7 +2266,8 @@ function Combobox({
   label,
   labelClassname,
   testIds,
-  error
+  error,
+  hideClear = false
 }) {
   const selectedItem = items.find((item) => item.value === selected);
   const renderSelected = useMemo2(() => {
@@ -2268,7 +2313,8 @@ function Combobox({
         testIds,
         onClear: handleClear,
         isMulti: false,
-        hasSelected: !!selectedItem
+        hasSelected: !!selectedItem,
+        hideClear
       }
     )
   ] });
@@ -2350,14 +2396,19 @@ function MultiSelectBase({
   onValuesChange,
   disabled,
   empty,
-  error
+  error,
+  initialItems
 }) {
   const [open, setOpen] = useState5(false);
   const [internalValues, setInternalValues] = useState5(
     new Set(values ?? defaultValues)
   );
   const selectedValues = values ? new Set(values) : internalValues;
-  const [items, setItems] = useState5(/* @__PURE__ */ new Map());
+  const [items, setItems] = useState5(() => {
+    if (!initialItems) return /* @__PURE__ */ new Map();
+    if (initialItems instanceof Map) return new Map(initialItems);
+    return new Map(initialItems.map((it) => [it.value, it.label]));
+  });
   function toggleValue(value) {
     if (disabled) return;
     const getNewSet = (prev) => {
@@ -2573,41 +2624,48 @@ function MultiSelectContentBase({
   ...props
 }) {
   const canSearch = typeof search === "object" ? true : search;
-  const { emptyMessage, items } = useMultiSelectContext();
-  return /* @__PURE__ */ jsx20(Fragment2, { children: /* @__PURE__ */ jsx20(PopoverContentBase, { className: "w-[--radix-popover-trigger-width] relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md p-0", children: /* @__PURE__ */ jsx20(
-    motion3.div,
+  const { emptyMessage, items, open } = useMultiSelectContext();
+  return /* @__PURE__ */ jsx20(Fragment2, { children: /* @__PURE__ */ jsx20(
+    PopoverContentBase,
     {
-      initial: { opacity: 0, scale: 0.95 },
-      animate: { opacity: 1, scale: 1 },
-      exit: { opacity: 0, scale: 0.95 },
-      transition: { duration: 0.2 },
-      children: /* @__PURE__ */ jsx20("div", { className: cn(" "), children: /* @__PURE__ */ jsxs13(
-        CommandBase,
+      forceMount: true,
+      className: "w-[--radix-popover-trigger-width] relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md p-0",
+      children: /* @__PURE__ */ jsx20(
+        motion3.div,
         {
-          ...props,
-          filter: (value, search2) => {
-            const labelNode = items.get(value);
-            const label = typeof labelNode === "string" ? labelNode : value;
-            if (label.toLowerCase().includes(search2.toLowerCase()))
-              return 1;
-            return 0;
-          },
-          children: [
-            canSearch ? /* @__PURE__ */ jsx20(
-              CommandInputBase,
-              {
-                placeholder: typeof search === "object" ? search.placeholder : void 0
-              }
-            ) : /* @__PURE__ */ jsx20("button", { autoFocus: true, className: "sr-only" }),
-            /* @__PURE__ */ jsxs13(CommandListBase, { children: [
-              canSearch && /* @__PURE__ */ jsx20(CommandEmptyBase, { children: typeof search === "object" ? search.emptyMessage ?? emptyMessage : emptyMessage }),
-              children
-            ] })
-          ]
+          initial: { opacity: 0, scale: 0.95 },
+          animate: { opacity: open ? 1 : 0, scale: open ? 1 : 0.95 },
+          transition: { duration: 0.2 },
+          style: { pointerEvents: open ? "auto" : "none" },
+          children: /* @__PURE__ */ jsx20("div", { className: cn(" "), children: /* @__PURE__ */ jsxs13(
+            CommandBase,
+            {
+              ...props,
+              filter: (value, search2) => {
+                const labelNode = items.get(value);
+                const label = typeof labelNode === "string" ? labelNode : value;
+                if (label.toLowerCase().includes(search2.toLowerCase()))
+                  return 1;
+                return 0;
+              },
+              children: [
+                canSearch ? /* @__PURE__ */ jsx20(
+                  CommandInputBase,
+                  {
+                    placeholder: typeof search === "object" ? search.placeholder : void 0
+                  }
+                ) : /* @__PURE__ */ jsx20("button", { autoFocus: true, className: "sr-only" }),
+                /* @__PURE__ */ jsxs13(CommandListBase, { children: [
+                  canSearch && /* @__PURE__ */ jsx20(CommandEmptyBase, { children: typeof search === "object" ? search.emptyMessage ?? emptyMessage : emptyMessage }),
+                  children
+                ] })
+              ]
+            }
+          ) })
         }
-      ) })
+      )
     }
-  ) }) });
+  ) });
 }
 function MultiSelectItemBase({
   value,
@@ -2709,6 +2767,7 @@ function MultiCombobox({
             disabled,
             empty,
             error,
+            initialItems: items,
             children: [
               /* @__PURE__ */ jsx21(
                 MultiSelectTriggerBase,
@@ -2749,8 +2808,7 @@ function MultiCombobox({
               )
             ]
           }
-        ),
-        /* @__PURE__ */ jsx21(ErrorMessage_default, { error })
+        )
       ]
     }
   );
@@ -2830,6 +2888,11 @@ var SelectContentBase = React14.forwardRef(
       ),
       position,
       "data-testid": dataTestId,
+      onPointerDownOutside: (event) => {
+        props.onPointerDownOutside?.(event);
+        if (event.defaultPrevented) return;
+        event.stopPropagation();
+      },
       ...props,
       asChild: true,
       children: /* @__PURE__ */ jsx23(
@@ -2978,7 +3041,7 @@ var DropDownMenuContentBase = React15.forwardRef(
           exit: { opacity: 0, scale: 0.95, y: 5 },
           transition: { duration: 0.2, ease: "easeOut" },
           className: cn(
-            "min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+            "min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border",
             className
           ),
           children: props.children
@@ -3162,35 +3225,13 @@ function ModeToggleBase({
       setTheme(newTheme);
       return;
     }
-    const button = buttonRef.current;
-    const rect = button.getBoundingClientRect();
+    const rect = buttonRef.current.getBoundingClientRect();
     const x = rect.left + rect.width / 2;
     const y = rect.top + rect.height / 2;
     const endRadius = Math.hypot(
       Math.max(x, window.innerWidth - x),
       Math.max(y, window.innerHeight - y)
     );
-    const styleId = "theme-transition-styles";
-    if (!document.getElementById(styleId)) {
-      const style = document.createElement("style");
-      style.id = styleId;
-      style.textContent = `
-        ::view-transition-old(root),
-        ::view-transition-new(root) {
-          animation: none;
-          mix-blend-mode: normal;
-        }
-        
-        ::view-transition-old(root) {
-          z-index: 1;
-        }
-        
-        ::view-transition-new(root) {
-          z-index: 2;
-        }
-      `;
-      document.head.appendChild(style);
-    }
     const transition = document.startViewTransition(async () => {
       setTheme(newTheme);
     });
@@ -3198,14 +3239,14 @@ function ModeToggleBase({
     document.documentElement.animate(
       [
         {
-          clipPath: `circle(0% at ${x}px ${y}px)`
+          clipPath: `circle(0px at ${x}px ${y}px)`
         },
         {
           clipPath: `circle(${Math.ceil(endRadius)}px at ${x}px ${y}px)`
         }
       ],
       {
-        duration: 600,
+        duration: 400,
         easing: "cubic-bezier(0.4, 0, 0.2, 1)",
         pseudoElement: "::view-transition-new(root)"
       }
@@ -3365,7 +3406,7 @@ var CardBase = React17.forwardRef(({ className, testid: dataTestId = "card-base"
   {
     ref,
     className: cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
+      "rounded-xl border border-border bg-card text-card-foreground shadow",
       className
     ),
     "data-testid": dataTestId,
@@ -7352,7 +7393,7 @@ function StatusIndicator({
 
 // src/components/ui/form/DebouncedInput.tsx
 import { useEffect as useEffect15, useState as useState14 } from "react";
-import { CircleNotchIcon as CircleNotchIcon2 } from "@phosphor-icons/react";
+import { CircleNotchIcon as CircleNotchIcon3 } from "@phosphor-icons/react";
 import { jsx as jsx54 } from "react/jsx-runtime";
 function DebouncedInput({
   value: initialValue,
@@ -7387,7 +7428,7 @@ function DebouncedInput({
   }, [debounce2, initialValue, onChange, value]);
   const renderRightIcon = () => {
     if (showLoadingIndicator && isDebouncing) {
-      return /* @__PURE__ */ jsx54(CircleNotchIcon2, { className: "h-4 w-4 animate-spin  text-muted-foreground" });
+      return /* @__PURE__ */ jsx54(CircleNotchIcon3, { className: "h-4 w-4 animate-spin  text-muted-foreground" });
     }
     return rightIcon;
   };
@@ -7587,7 +7628,7 @@ function CalendarBase2({
     "div",
     {
       className: cn(
-        "rounded-md border bg-background p-3 overflow-hidden flex flex-col",
+        "rounded-md border p-3 overflow-hidden flex flex-col",
         className
       ),
       children: /* @__PURE__ */ jsx57("div", { className: "relative flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ jsx57(
@@ -7608,12 +7649,12 @@ function CalendarBase2({
             button_previous: cn(
               buttonVariantsBase({ variant: "outline" }),
               "h-8 w-8 flex items-center justify-center p-0 rounded-md transition-transform duration-150 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/40 active:scale-95 absolute right-11 top-0 z-10",
-              isMobile ? "mr-8" : ""
+              isMobile ? "" : ""
             ),
             button_next: cn(
               buttonVariantsBase({ variant: "outline" }),
               "h-8 w-8 flex items-center justify-center p-0 rounded-md transition-transform duration-150 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/40 active:scale-95 absolute right-0 top-0 z-10",
-              isMobile ? "mr-8" : ""
+              isMobile ? "" : ""
             ),
             month_grid: "w-full min-w-0 flex-1 grid grid-rows-[auto_1fr] gap-2",
             weekdays: "grid grid-cols-7 gap-1 mb-1",
@@ -7633,8 +7674,8 @@ function CalendarBase2({
             ),
             selected: "bg-primary text-primary-foreground hover:bg-primary/90 focus:bg-primary/90 font-semibold hover:text-white rounded-md",
             today: "bg-muted text-foreground font-bold ring-2 ring-primary/30 ring-inset rounded-md",
-            outside: "text-muted-foreground/40 opacity-60 aria-selected:bg-muted/50 aria-selected:text-foreground",
-            disabled: "text-muted-foreground/30 opacity-40 cursor-not-allowed",
+            outside: "text-muted-foreground opacity-60 aria-selected:bg-muted/50 aria-selected:text-foreground",
+            disabled: "text-muted-foreground cursor-not-allowed",
             range_middle: "aria-selected:bg-muted aria-selected:text-foreground",
             hidden: "invisible",
             ...classNames
@@ -7664,29 +7705,19 @@ import { CalendarBlankIcon, CalendarDotIcon } from "@phosphor-icons/react";
 // src/components/ui/picker/TimeScrollPicker.tsx
 import { useEffect as useEffect17, useRef as useRef10, useState as useState18 } from "react";
 import { jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
-var ITEM_HEIGHT = 39;
-var ITEM_HEIGHT_MOBILE = 32;
+var ITEM_HEIGHT = 38.5;
 var VISIBLE_ITEMS = 5;
-var VISIBLE_ITEMS_MOBILE = 3;
 var CENTER_INDEX = Math.floor(VISIBLE_ITEMS / 2);
-var CENTER_INDEX_MOBILE = Math.floor(VISIBLE_ITEMS_MOBILE / 2);
-function ScrollColumn({
-  value,
-  onChange,
-  max,
-  label,
-  hideSeconds
-}) {
-  const isMobile = useIsMobile();
+function ScrollColumn({ value, onChange, max, label }) {
   const containerRef = useRef10(null);
   const items = Array.from({ length: max }, (_, i) => i);
   const [isDragging, setIsDragging] = useState18(false);
   const [startY, setStartY] = useState18(0);
   const [scrollTop, setScrollTop] = useState18(0);
   const scrollTimeoutRef = useRef10(null);
-  const itemHeight = isMobile ? ITEM_HEIGHT_MOBILE : ITEM_HEIGHT;
-  const centerIndex = isMobile ? CENTER_INDEX_MOBILE : CENTER_INDEX;
-  const visibleItems = isMobile ? VISIBLE_ITEMS_MOBILE : VISIBLE_ITEMS;
+  const itemHeight = ITEM_HEIGHT;
+  const centerIndex = CENTER_INDEX;
+  const visibleItems = VISIBLE_ITEMS;
   const containerHeight = visibleItems * itemHeight;
   useEffect17(() => {
     if (containerRef.current && !isDragging) {
@@ -7705,7 +7736,9 @@ function ScrollColumn({
       }
     };
   }, []);
-  const handleScroll = () => {
+  const handleScroll = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
     if (!containerRef.current || isDragging) return;
     if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
     scrollTimeoutRef.current = setTimeout(() => {
@@ -7743,15 +7776,18 @@ function ScrollColumn({
   const handleMouseLeave = () => {
     if (isDragging) handleMouseUp();
   };
-  const containerWidth = isMobile ? hideSeconds ? "w-16" : "w-8" : "w-16";
-  return /* @__PURE__ */ jsxs40("div", { className: "flex flex-col items-center gap-1", children: [
-    /* @__PURE__ */ jsx58("span", { className: "text-muted-foreground rounded-md font-semibold text-[clamp(0.575rem,1.2vw,0.75rem)] sm:text-[clamp(0.65rem,1.1vw,0.825rem)] text-center pb-1 uppercase tracking-wider", children: label }),
-    /* @__PURE__ */ jsx58("div", { className: cn("relative", containerWidth), children: /* @__PURE__ */ jsx58(
+  const handleWheel = (e) => {
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsxs40("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ jsx58("span", { className: "text-muted-foreground rounded-md font-semibold text-sm sm:text-sm text-center pb-2 uppercase tracking-wider", children: label }),
+    /* @__PURE__ */ jsx58("div", { className: cn("relative w-20 sm:w-16"), children: /* @__PURE__ */ jsx58(
       "div",
       {
         ref: containerRef,
-        className: "overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
+        className: "overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] touch-action-pan-y",
         onScroll: handleScroll,
+        onWheel: handleWheel,
         onMouseDown: handleMouseDown,
         onMouseMove: handleMouseMove,
         onMouseUp: handleMouseUp,
@@ -7768,9 +7804,9 @@ function ScrollColumn({
             "div",
             {
               className: cn(
-                "flex items-center justify-center select-none font-semibold tabular-nums",
+                "flex items-center justify-center select-none font-semibold tabular-nums transition-all duration-150",
                 isDragging ? "cursor-grabbing" : "",
-                isSelected ? "sm:text-lg text-md text-foreground" : "sm:text-sm text-xs text-muted-foreground"
+                isSelected ? "text-lg sm:text-xl text-foreground scale-110" : "text-sm sm:text-base text-muted-foreground opacity-60"
               ),
               style: { height: `${itemHeight}px` },
               onClick: () => !isDragging && onChange(item),
@@ -7788,10 +7824,9 @@ function TimeScrollPicker({
   setDate,
   hideSeconds = false
 }) {
-  const isMobile = useIsMobile();
   const currentDate = date || /* @__PURE__ */ new Date();
-  const itemHeight = isMobile ? ITEM_HEIGHT_MOBILE : ITEM_HEIGHT;
-  const centerIndex = isMobile ? CENTER_INDEX_MOBILE : CENTER_INDEX;
+  const itemHeight = ITEM_HEIGHT;
+  const centerIndex = CENTER_INDEX;
   const handleTimeChange = (type, value) => {
     const newDate = new Date(currentDate);
     if (type === "hours") newDate.setHours(value);
@@ -7799,13 +7834,13 @@ function TimeScrollPicker({
     else newDate.setSeconds(value);
     setDate(newDate);
   };
-  return /* @__PURE__ */ jsx58("div", { className: "flex items-center justify-center gap-2 p-3", children: /* @__PURE__ */ jsxs40("div", { className: cn("relative flex gap-2"), children: [
+  return /* @__PURE__ */ jsx58("div", { className: "flex items-center justify-center gap-2 p-3 sm:p-4", children: /* @__PURE__ */ jsxs40("div", { className: cn("relative flex gap-4 sm:gap-3"), children: [
     /* @__PURE__ */ jsx58(
       "div",
       {
-        className: "absolute left-0 right-0  pointer-events-none z-10 rounded-md bg-primary/5",
+        className: "absolute left-0 right-0 pointer-events-none z-10 rounded-lg bg-primary/10 border border-primary/20",
         style: {
-          top: `calc(1.75rem + ${centerIndex * itemHeight}px)`,
+          top: `calc(1.85rem + ${centerIndex * itemHeight}px)`,
           height: `${itemHeight}px`
         }
       }
@@ -7893,12 +7928,17 @@ function DateTimePicker({
 }) {
   const [internalDate, setInternalDate] = useState20(date);
   const [open, setOpen] = useState20(false);
+  const [activeTab, setActiveTab] = useState20("calendar");
   const isMobile = useIsMobile();
   const handleSelect = (newDay) => {
     if (!newDay) return;
     if (!internalDate) {
       const now = /* @__PURE__ */ new Date();
-      newDay.setHours(now.getHours(), now.getMinutes(), now.getSeconds());
+      newDay.setUTCHours(
+        now.getUTCHours(),
+        now.getUTCMinutes(),
+        now.getUTCSeconds()
+      );
       setInternalDate(newDay);
       onChange?.(newDay);
       return;
@@ -7911,7 +7951,6 @@ function DateTimePicker({
   };
   const handleTimeChange = (newDate) => {
     setInternalDate(newDate);
-    onChange?.(newDate);
   };
   const getTimeFormat = () => {
     if (hideTime) return "";
@@ -7928,6 +7967,9 @@ function DateTimePicker({
   };
   useEffect19(() => {
     setInternalDate(date);
+    if (open) {
+      setActiveTab("calendar");
+    }
   }, [date, open]);
   const { ref: contentRef, center } = use_auto_center_default(open);
   const basePopoverClass = "w-auto max-w-[calc(100vw-16px)] p-0 border-none shadow-none";
@@ -7967,12 +8009,55 @@ function DateTimePicker({
       ]
     }
   );
-  const renderPickerContent = () => /* @__PURE__ */ jsxs41("div", { className: "p-3 border rounded-md", children: [
-    /* @__PURE__ */ jsxs41(
+  const renderPickerContent = () => /* @__PURE__ */ jsxs41("div", { className: "p-2 sm:p-3 border border-border rounded-md", children: [
+    isMobile && !hideTime ? /* @__PURE__ */ jsxs41("div", { className: "min-h-[380px] max-h-[calc(400px)]", children: [
+      internalDate && /* @__PURE__ */ jsx59("div", { className: "flex  items-center gap-3 px-4 py-3 rounded-lg ", children: /* @__PURE__ */ jsxs41("span", { className: "text-md font-semibold", children: [
+        format(internalDate, "dd 'de' MMMM 'de' yyyy", {
+          locale: ptBR2
+        }),
+        " ",
+        "- ",
+        format(internalDate, hideSeconds ? "HH:mm" : "HH:mm:ss")
+      ] }) }),
+      /* @__PURE__ */ jsxs41(TabsBase, { value: activeTab, onValueChange: setActiveTab, children: [
+        /* @__PURE__ */ jsxs41(TabsListBase, { className: "", children: [
+          /* @__PURE__ */ jsx59(TabsTriggerBase, { value: "calendar", className: "flex-1", children: "Data" }),
+          /* @__PURE__ */ jsx59(TabsTriggerBase, { value: "time", className: "flex-1", children: "Hor\xE1rio" })
+        ] }),
+        /* @__PURE__ */ jsx59(TabsContentBase, { value: "calendar", className: "mt-0", children: /* @__PURE__ */ jsx59(
+          CalendarBase2,
+          {
+            mode: "single",
+            locale: ptBR2,
+            selected: internalDate ?? void 0,
+            onSelect: (d) => handleSelect(d ?? null),
+            autoFocus: true,
+            defaultMonth: fromDate ?? toDate ?? internalDate ?? void 0,
+            ...fromDate && { startMonth: fromDate },
+            ...toDate && { endMonth: toDate },
+            ...fromDate || toDate ? {
+              disabled: [
+                ...fromDate ? [{ before: fromDate }] : [],
+                ...toDate ? [{ after: toDate }] : []
+              ]
+            } : {},
+            className: cn("w-full rounded-none border-none")
+          }
+        ) }),
+        /* @__PURE__ */ jsx59(TabsContentBase, { value: "time", className: "mt-0", children: /* @__PURE__ */ jsx59("div", { className: "flex flex-col items-center justify-center gap-4 py-2 min-h-[330px]", children: /* @__PURE__ */ jsx59(
+          TimeScrollPicker,
+          {
+            setDate: (d) => handleTimeChange(d ?? null),
+            date: internalDate,
+            hideSeconds
+          }
+        ) }) })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs41(
       "div",
       {
         ref: contentRef,
-        className: "flex sm:flex-row max-h-auto overflow-y-auto border-none rounded-md",
+        className: "flex flex-col sm:flex-row max-h-auto overflow-y-auto border-none rounded-md",
         children: [
           /* @__PURE__ */ jsx59(
             CalendarBase2,
@@ -7986,15 +8071,14 @@ function DateTimePicker({
               ...fromDate && { startMonth: fromDate },
               ...toDate && { endMonth: toDate },
               ...fromDate || toDate ? {
-                hidden: [
+                disabled: [
                   ...fromDate ? [{ before: fromDate }] : [],
                   ...toDate ? [{ after: toDate }] : []
                 ]
               } : {},
               className: cn(
                 "w-max rounded-none border-none",
-                !hideTime && "sm:rounded-r-none rounded-b-none",
-                isMobile ? "border-b-transparent w-full" : ""
+                !hideTime && "sm:rounded-r-none"
               )
             }
           ),
@@ -8003,7 +8087,7 @@ function DateTimePicker({
             {
               className: cn(
                 "flex flex-col items-center justify-center",
-                isMobile ? "border-none" : "border-l"
+                "border-l"
               ),
               children: [
                 /* @__PURE__ */ jsx59("div", { className: "text-[clamp(0.85rem,1.4vw,1.125rem)] sm:text-[clamp(0.9rem,1.6vw,1.125rem)] font-semibold capitalize text-left", children: "Hor\xE1rio" }),
@@ -8021,60 +8105,61 @@ function DateTimePicker({
         ]
       }
     ),
-    /* @__PURE__ */ jsx59("div", { className: "flex rounded-md p-1.5", children: /* @__PURE__ */ jsxs41("div", { className: "grid grid-cols-2 w-full gap-12", children: [
-      /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx59(
-          ButtonBase,
-          {
-            variant: "outline",
-            size: "icon",
-            className: "no-active-animation",
-            tooltip: "Hoje",
-            onClick: () => {
-              const now = /* @__PURE__ */ new Date();
-              const selected = hideTime ? new Date(
-                now.getFullYear(),
-                now.getMonth(),
-                now.getDate(),
+    /* @__PURE__ */ jsxs41("div", { className: "flex rounded-md p-1.5 gap-2", children: [
+      /* @__PURE__ */ jsx59(
+        ButtonBase,
+        {
+          variant: "outline",
+          className: "no-active-animation",
+          tooltip: "Hoje",
+          size: "icon",
+          onClick: () => {
+            const now = /* @__PURE__ */ new Date();
+            const selected = hideTime ? new Date(
+              Date.UTC(
+                now.getUTCFullYear(),
+                now.getUTCMonth(),
+                now.getUTCDate(),
                 0,
                 0,
                 0,
                 0
-              ) : now;
-              setInternalDate(selected);
-              onChange?.(selected);
-              onConfirm?.(selected);
-            },
-            children: /* @__PURE__ */ jsx59(CalendarDotIcon, { className: "h-4 w-4" })
-          }
-        ),
+              )
+            ) : now;
+            setInternalDate(selected);
+            onChange?.(selected);
+            onConfirm?.(selected);
+          },
+          children: /* @__PURE__ */ jsx59(CalendarDotIcon, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxs41("div", { className: "grid grid-cols-2 sm:flex-row w-full gap-2", children: [
         /* @__PURE__ */ jsx59(
           ButtonBase,
           {
-            className: "no-active-animation rounded-md bg-background text-gray-800 border hover:bg-muted/50 overflow-y-hidden w-full",
+            className: "no-active-animation rounded-md bg-background text-primary border hover:bg-muted/50 overflow-hidden flex-1 min-w-0 border-border",
             onClick: () => setOpen(false),
             children: "Cancelar"
           }
+        ),
+        /* @__PURE__ */ jsx59(
+          ButtonBase,
+          {
+            className: cn(
+              "no-active-animation rounded-md bg-emerald-600",
+              internalDate ? "hover:bg-emerald-700" : "opacity-50 cursor-not-allowed"
+            ),
+            disabled: !internalDate,
+            onClick: () => {
+              if (!internalDate) return;
+              setOpen(false);
+              onConfirm?.(internalDate);
+            },
+            children: "Confirmar"
+          }
         )
-      ] }),
-      /* @__PURE__ */ jsx59(
-        ButtonBase,
-        {
-          className: cn(
-            "no-active-animation rounded-none bg-emerald-600",
-            internalDate ? "hover:bg-emerald-700" : "opacity-50 cursor-not-allowed",
-            isMobile ? "" : "rounded-md"
-          ),
-          disabled: !internalDate,
-          onClick: () => {
-            if (!internalDate) return;
-            setOpen(false);
-            onConfirm?.(internalDate);
-          },
-          children: "Confirmar"
-        }
-      )
-    ] }) })
+      ] })
+    ] })
   ] });
   return /* @__PURE__ */ jsxs41("div", { className: cn("w-full sm:w-auto", className), children: [
     label && /* @__PURE__ */ jsx59(LabelBase_default, { children: label }),
@@ -8089,7 +8174,7 @@ function DateTimePicker({
         }
       ),
       /* @__PURE__ */ jsx59(ErrorMessage_default, { error }),
-      /* @__PURE__ */ jsx59(DialogContentBase, { className: "p-0 max-w-[min(95vw,450px)] max-h-[90vh] overflow-hidden", children: renderPickerContent() })
+      /* @__PURE__ */ jsx59(DialogContentBase, { className: "p-0 max-w-[min(95vw,450px)] max-h-[95vh] overflow-y-auto", children: renderPickerContent() })
     ] }) : /* @__PURE__ */ jsxs41(PopoverBase, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsx59(
         PopoverTriggerBase,
@@ -8155,7 +8240,7 @@ function RangePicker({
   const { ref: contentRef, center } = use_auto_center_default(open);
   const basePopoverClass = "w-auto max-w-[calc(100vw-16px)] p-0 border shadow-none";
   const centeredPopoverClass = "w-auto max-w-[calc(100vw-16px)] p-0 border shadow-none fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50";
-  return /* @__PURE__ */ jsxs42("div", { className: cn("w-full sm:w-auto", className), children: [
+  return /* @__PURE__ */ jsxs42("div", { className: cn("w-full sm:w-auto ", className), children: [
     label && /* @__PURE__ */ jsx60(LabelBase_default, { children: label }),
     /* @__PURE__ */ jsxs42(PopoverBase, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsx60(
@@ -8163,7 +8248,7 @@ function RangePicker({
         {
           disabled,
           asChild: true,
-          className: cn(error && "border-red-500"),
+          className: cn(error && "border-red-500 "),
           children: /* @__PURE__ */ jsxs42(
             ButtonBase,
             {
@@ -8186,17 +8271,25 @@ function RangePicker({
                     })} - ${format2(range.to, "P", { locale: dateFnsLocale })}` : "Selecione um intervalo"
                   }
                 ),
-                range && /* @__PURE__ */ jsx60(
-                  ClearButton,
-                  {
-                    className: "-mr-3",
-                    onClick: (e) => {
-                      e?.stopPropagation();
-                      handleClear();
+                /* @__PURE__ */ jsx60(motion12.span, { className: "flex items-center", children: /* @__PURE__ */ jsxs42("div", { className: "flex flex-row gap-0 items-center ", children: [
+                  range && /* @__PURE__ */ jsx60(
+                    ClearButton,
+                    {
+                      onClick: (e) => {
+                        e?.stopPropagation();
+                        handleClear();
+                      }
                     }
-                  }
-                ),
-                /* @__PURE__ */ jsx60(CalendarBlankIcon2, { className: "flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6" })
+                  ),
+                  /* @__PURE__ */ jsx60(
+                    motion12.div,
+                    {
+                      animate: { rotate: open ? 15 : 0 },
+                      transition: { duration: 0.03 },
+                      children: /* @__PURE__ */ jsx60(CalendarBlankIcon2, { className: "h-4 w-4" })
+                    }
+                  )
+                ] }) })
               ]
             }
           )
@@ -8219,7 +8312,7 @@ function RangePicker({
               animate: { opacity: 1, y: 0 },
               exit: { opacity: 0, y: -4 },
               transition: { duration: 0.18, ease: "easeOut" },
-              className: "border rounded-md shadow-xl ",
+              className: "border border-border rounded-md shadow-xl ",
               children: [
                 /* @__PURE__ */ jsx60("div", { className: "p-4", children: /* @__PURE__ */ jsx60(
                   motion12.div,
@@ -9986,7 +10079,7 @@ function Select({
   labelClassname,
   className,
   pagination,
-  hideClear = true
+  hideClear = false
 }) {
   const [page, setPage] = useState24(1);
   const [animating, setAnimating] = useState24(false);
@@ -10058,7 +10151,7 @@ function Select({
                   }
                 ),
                 /* @__PURE__ */ jsx68(motion14.span, { className: "flex items-center", children: /* @__PURE__ */ jsxs49("div", { className: "flex flex-row gap-0 items-center ", children: [
-                  hideClear && selected && /* @__PURE__ */ jsx68(
+                  !hideClear && selected && /* @__PURE__ */ jsx68(
                     ClearButton,
                     {
                       onClick: () => {
@@ -10298,7 +10391,7 @@ function EventAgenda({
     "div",
     {
       className: cn(
-        "flex flex-col rounded-lg border has-data-[slot=month-view]:flex-1 px-6 py-2",
+        "flex flex-col rounded-lg border has-data-[slot=month-view]:flex-1 px-6 py-2 border-border",
         className
       ),
       style: {
@@ -10343,7 +10436,8 @@ function EventAgenda({
                 },
                 items: selectItems,
                 className: "gap-2 px-3 py-1.5 max-[479px]:h-8",
-                placeholder: viewLabel(view)
+                placeholder: viewLabel(view),
+                hideClear: true
               }
             ) })
           ] }),
@@ -14191,6 +14285,12 @@ function MultiSelect({
     const id = setTimeout(() => setAnimating(false), 220);
     return () => clearTimeout(id);
   }, [page, pagination]);
+  const initialItems = useMemo24(() => {
+    if (groupItems) {
+      return Object.values(groupItems).flat();
+    }
+    return items ?? [];
+  }, [items, groupItems]);
   return /* @__PURE__ */ jsxs64("div", { "data-testid": testIds.root ?? "multiselect-root", children: [
     label && /* @__PURE__ */ jsx86(LabelBase_default, { className: labelClassname, children: label }),
     /* @__PURE__ */ jsxs64(
@@ -14202,6 +14302,7 @@ function MultiSelect({
         disabled,
         empty,
         error,
+        initialItems,
         children: [
           /* @__PURE__ */ jsx86(
             MultiSelectTriggerBase,
@@ -14345,27 +14446,27 @@ function MultiSelect({
 }
 
 // src/components/ui/charts/Chart.tsx
-import { useEffect as useEffect33, useCallback as useCallback17, useMemo as useMemo26 } from "react";
+import { useEffect as useEffect34, useCallback as useCallback18, useMemo as useMemo26 } from "react";
 import {
-  ComposedChart,
-  Bar,
-  Line,
-  Area,
+  ComposedChart as ComposedChart2,
+  Bar as Bar2,
+  Line as Line2,
+  Area as Area2,
   Rectangle,
   ReferenceLine,
-  XAxis,
-  YAxis,
+  XAxis as XAxis2,
+  YAxis as YAxis2,
   CartesianGrid,
   Tooltip,
   Legend,
   LabelList,
-  ResponsiveContainer
+  ResponsiveContainer as ResponsiveContainer2
 } from "recharts";
 
 // src/components/ui/charts/utils/helpers.ts
 var formatFieldName = (fieldName) => {
   return fieldName.split(/[/_-]/).filter(Boolean).map((word) => {
-    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+    return word.charAt(0).toUpperCase() + word.slice(1);
   }).join(" ").trim();
 };
 var detectDataFields = (data, xAxisKey) => {
@@ -15926,100 +16027,305 @@ var TooltipSimple = ({
 };
 var TooltipSimple_default = TooltipSimple;
 
-// src/components/ui/charts/utils/pillLabelRenderer.tsx
+// src/components/ui/charts/components/Brush.tsx
+import {
+  ComposedChart,
+  Bar,
+  Line,
+  Area,
+  XAxis,
+  YAxis,
+  ResponsiveContainer
+} from "recharts";
 import { jsx as jsx94, jsxs as jsxs72 } from "react/jsx-runtime";
-var formatCompactNumber = (value) => {
-  const isNegative = value < 0;
-  const absValue = Math.abs(value);
-  let formatted;
-  if (absValue >= 1e9) {
-    formatted = (absValue / 1e9).toFixed(1).replace(/\.0$/, "") + "B";
-  } else if (absValue >= 1e6) {
-    formatted = (absValue / 1e6).toFixed(1).replace(/\.0$/, "") + "M";
-  } else if (absValue >= 1e3) {
-    formatted = (absValue / 1e3).toFixed(1).replace(/\.0$/, "") + " mil";
-  } else {
-    try {
-      const nf = new Intl.NumberFormat("pt-BR", {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2
-      });
-      formatted = nf.format(absValue);
-    } catch {
-      formatted = String(absValue).replace(".", ",");
-    }
-  }
-  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, valueFormatter2) => {
-  return (props) => {
-    const { x, y, value } = props;
-    const defaultFormatted = typeof value === "number" ? formatCompactNumber(value) : String(value ?? "");
-    const text = valueFormatter2 ? valueFormatter2({
-      value,
-      formattedValue: defaultFormatted,
-      ...props
-    }) : defaultFormatted;
-    const paddingX = 8;
-    const approxCharWidth = 7;
-    const pillWidth = Math.max(
-      40,
-      String(text).length * approxCharWidth + paddingX * 2
-    );
-    const pillHeight = 14;
-    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;
-    let usedBarCenter = false;
-    if (typeof px === "number" && typeof pWidth === "number") {
-      centerX = px + pWidth / 2;
-      usedBarCenter = true;
-    } else if (typeof xNum === "number" && typeof pWidth === "number") {
-      centerX = xNum + pWidth / 2;
-      usedBarCenter = true;
-    } else if (typeof cxNum === "number") {
-      centerX = cxNum;
-    } else if (vb && typeof vb.x === "number" && typeof vb.width === "number" && typeof props.index === "number") {
-      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 (!usedBarCenter && vb && typeof vb.x === "number" && typeof vb.width === "number") {
-      const minX = vb.x + pillWidth / 2;
-      const maxX = vb.x + vb.width - pillWidth / 2;
-      centerX = Math.max(minX, Math.min(maxX, centerX));
-    }
-    const yNum = parseNumber(y);
-    const py = parseNumber(props.y);
-    const cyNum = parseNumber(props.cy);
-    const centerY = yNum ?? (typeof py === "number" ? py : vb && typeof vb.y === "number" && typeof vb.height === "number" ? vb.y + vb.height / 2 : typeof cyNum === "number" ? cyNum : 0);
-    const rectX = centerX - pillWidth / 2;
-    const rectY = centerY - pillHeight - 6;
-    const textX = centerX;
-    const textY = rectY + pillHeight / 2 + 3;
-    const rectFill = variant === "filled" ? color : variant === "soft" ? `${color}20` : "#ffffff";
-    const rectStroke = variant === "outline" ? `${color}CC` : void 0;
-    let textColor;
+var Brush = ({
+  data,
+  startIndex,
+  endIndex,
+  onMouseDown,
+  brushRef,
+  xAxisKey,
+  seriesOrder,
+  finalColors,
+  brushHeight = 80,
+  brushColor,
+  miniChartOpacity = 0.3,
+  margin = { left: 0, right: 0 }
+}) => {
+  const dataLength = data.length;
+  return /* @__PURE__ */ jsxs72("div", { className: "w-full px-8 pb-4", children: [
+    /* @__PURE__ */ jsxs72(
+      "div",
+      {
+        className: "relative rounded-md border bg-muted/5 shadow-inner",
+        style: { height: brushHeight },
+        children: [
+          /* @__PURE__ */ jsx94(
+            "div",
+            {
+              className: "absolute inset-0 pointer-events-none rounded-md",
+              style: { opacity: miniChartOpacity },
+              children: /* @__PURE__ */ jsx94(ResponsiveContainer, { width: "100%", height: brushHeight, children: /* @__PURE__ */ jsxs72(
+                ComposedChart,
+                {
+                  data: data.map((item) => ({
+                    ...item,
+                    name: String(item[xAxisKey] || "N/A")
+                  })),
+                  height: brushHeight,
+                  margin: {
+                    top: 5,
+                    right: margin.right ?? 30,
+                    left: margin.left ?? 0,
+                    bottom: 5
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx94(XAxis, { dataKey: xAxisKey, hide: true }),
+                    /* @__PURE__ */ jsx94(YAxis, { yAxisId: "left", hide: true }),
+                    seriesOrder.map((s) => {
+                      const key = s.key;
+                      const color = finalColors[key];
+                      if (s.type === "bar") {
+                        return /* @__PURE__ */ jsx94(
+                          Bar,
+                          {
+                            dataKey: key,
+                            yAxisId: "left",
+                            fill: color,
+                            radius: [2, 2, 0, 0]
+                          },
+                          `brush-bar-${key}`
+                        );
+                      }
+                      if (s.type === "line") {
+                        return /* @__PURE__ */ jsx94(
+                          Line,
+                          {
+                            type: "monotone",
+                            dataKey: key,
+                            yAxisId: "left",
+                            stroke: color,
+                            strokeWidth: 1.5,
+                            dot: false
+                          },
+                          `brush-line-${key}`
+                        );
+                      }
+                      if (s.type === "area") {
+                        return /* @__PURE__ */ jsx94(
+                          Area,
+                          {
+                            type: "monotone",
+                            dataKey: key,
+                            yAxisId: "left",
+                            stroke: color,
+                            fill: `url(#gradient-${key})`,
+                            strokeWidth: 1.5
+                          },
+                          `brush-area-${key}`
+                        );
+                      }
+                      return null;
+                    })
+                  ]
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ jsxs72(
+            "div",
+            {
+              ref: brushRef,
+              className: "absolute inset-0 cursor-move rounded-md",
+              style: { userSelect: "none" },
+              children: [
+                /* @__PURE__ */ jsx94(
+                  "div",
+                  {
+                    className: "absolute top-0 bottom-0 left-0 bg-muted/60 pointer-events-none rounded-md",
+                    style: {
+                      width: `${startIndex / (dataLength - 1) * 100}%`
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx94(
+                  "div",
+                  {
+                    className: "absolute top-0 bottom-0 right-0 bg-muted/60 pointer-events-none rounded-md",
+                    style: {
+                      width: `${(dataLength - 1 - endIndex) / (dataLength - 1) * 100}%`
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs72(
+                  "div",
+                  {
+                    className: "absolute top-0 bottom-0 border cursor-move group rounded-md border-primary/30",
+                    style: {
+                      left: `${startIndex / (dataLength - 1) * 100}%`,
+                      right: `${(dataLength - 1 - endIndex) / (dataLength - 1) * 100}%`,
+                      backgroundColor: "hsl(var(--primary) / 0.03)"
+                    },
+                    onMouseDown: (e) => onMouseDown(e, "middle"),
+                    children: [
+                      /* @__PURE__ */ jsx94(
+                        "div",
+                        {
+                          className: "absolute top-1/2 -translate-y-1/2 -left-3 w-6 h-10 flex items-center justify-center cursor-ew-resize active:scale-95 transition-all",
+                          onMouseDown: (e) => {
+                            e.stopPropagation();
+                            onMouseDown(e, "start");
+                          },
+                          children: /* @__PURE__ */ jsx94(
+                            "div",
+                            {
+                              className: "w-2 h-7 rounded-full shadow-md ring-2 ring-background flex flex-col items-center justify-center gap-0.5",
+                              style: {
+                                backgroundColor: brushColor ?? "hsl(var(--primary) / 0.7)"
+                              }
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx94(
+                        "div",
+                        {
+                          className: "absolute top-1/2 -translate-y-1/2 -right-3 w-6 h-10 flex items-center justify-center cursor-ew-resize active:scale-95 transition-all",
+                          onMouseDown: (e) => {
+                            e.stopPropagation();
+                            onMouseDown(e, "end");
+                          },
+                          children: /* @__PURE__ */ jsx94(
+                            "div",
+                            {
+                              className: "w-2 h-7 rounded-full shadow-md ring-2 ring-background flex flex-col items-center justify-center gap-0.5",
+                              style: {
+                                backgroundColor: brushColor ?? "hsl(var(--primary) / 0.7)"
+                              }
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs72("div", { className: "flex justify-between items-center mt-2 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs72("span", { children: [
+        data[startIndex]?.[xAxisKey],
+        " - ",
+        data[endIndex]?.[xAxisKey]
+      ] }),
+      /* @__PURE__ */ jsxs72("span", { children: [
+        endIndex - startIndex + 1,
+        " de ",
+        dataLength,
+        " per\xEDodos"
+      ] })
+    ] })
+  ] });
+};
+var Brush_default = Brush;
+
+// src/components/ui/charts/utils/pillLabelRenderer.tsx
+import { jsx as jsx95, jsxs as jsxs73 } from "react/jsx-runtime";
+var formatCompactNumber = (value) => {
+  const isNegative = value < 0;
+  const absValue = Math.abs(value);
+  let formatted;
+  if (absValue >= 1e9) {
+    formatted = (absValue / 1e9).toFixed(1).replace(/\.0$/, "") + "B";
+  } else if (absValue >= 1e6) {
+    formatted = (absValue / 1e6).toFixed(1).replace(/\.0$/, "") + "M";
+  } else if (absValue >= 1e3) {
+    formatted = (absValue / 1e3).toFixed(1).replace(/\.0$/, "") + " mil";
+  } else {
+    try {
+      const nf = new Intl.NumberFormat("pt-BR", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      });
+      formatted = nf.format(absValue);
+    } catch {
+      formatted = String(absValue).replace(".", ",");
+    }
+  }
+  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, valueFormatter2) => {
+  return (props) => {
+    const { x, y, value } = props;
+    const defaultFormatted = typeof value === "number" ? formatCompactNumber(value) : String(value ?? "");
+    const text = valueFormatter2 ? valueFormatter2({
+      value,
+      formattedValue: defaultFormatted,
+      ...props
+    }) : defaultFormatted;
+    const paddingX = 8;
+    const approxCharWidth = 7;
+    const pillWidth = Math.max(
+      40,
+      String(text).length * approxCharWidth + paddingX * 2
+    );
+    const pillHeight = 14;
+    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;
+    let usedBarCenter = false;
+    if (typeof px === "number" && typeof pWidth === "number") {
+      centerX = px + pWidth / 2;
+      usedBarCenter = true;
+    } else if (typeof xNum === "number" && typeof pWidth === "number") {
+      centerX = xNum + pWidth / 2;
+      usedBarCenter = true;
+    } else if (typeof cxNum === "number") {
+      centerX = cxNum;
+    } else if (vb && typeof vb.x === "number" && typeof vb.width === "number" && typeof props.index === "number") {
+      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 (!usedBarCenter && vb && typeof vb.x === "number" && typeof vb.width === "number") {
+      const minX = vb.x + pillWidth / 2;
+      const maxX = vb.x + vb.width - pillWidth / 2;
+      centerX = Math.max(minX, Math.min(maxX, centerX));
+    }
+    const yNum = parseNumber(y);
+    const py = parseNumber(props.y);
+    const cyNum = parseNumber(props.cy);
+    const centerY = yNum ?? (typeof py === "number" ? py : vb && typeof vb.y === "number" && typeof vb.height === "number" ? vb.y + vb.height / 2 : typeof cyNum === "number" ? cyNum : 0);
+    const rectX = centerX - pillWidth / 2;
+    const rectY = centerY - pillHeight - 6;
+    const textX = centerX;
+    const textY = rectY + pillHeight / 2 + 3;
+    const rectFill = variant === "filled" ? color : variant === "soft" ? `${color}20` : "#ffffff";
+    const rectStroke = variant === "outline" ? `${color}CC` : void 0;
+    let textColor;
     if (variant === "filled") {
       textColor = "#ffffff";
     } else {
       textColor = "#374151";
     }
-    return /* @__PURE__ */ jsxs72("g", { children: [
-      /* @__PURE__ */ jsx94(
+    return /* @__PURE__ */ jsxs73("g", { children: [
+      /* @__PURE__ */ jsx95(
         "rect",
         {
           x: rectX,
@@ -16032,7 +16338,7 @@ var renderPillLabel = (color, variant, valueFormatter2) => {
           strokeWidth: rectStroke ? 1 : 0
         }
       ),
-      /* @__PURE__ */ jsx94(
+      /* @__PURE__ */ jsx95(
         "text",
         {
           x: textX,
@@ -16103,7 +16409,7 @@ var renderInsideBarLabel = (color, valueFormatter2) => {
       const heightFactor = Math.max(0.8, Math.min(1.6, pHeight / heightRef));
       fontSize = Math.min(18, Math.max(8, Math.round(fontSize * heightFactor)));
     }
-    return /* @__PURE__ */ jsx94(
+    return /* @__PURE__ */ jsx95(
       "text",
       {
         x: centerX,
@@ -16122,7 +16428,7 @@ var renderInsideBarLabel = (color, valueFormatter2) => {
 
 // src/components/ui/charts/NoData.tsx
 import { motion as motion21 } from "framer-motion";
-import { Fragment as Fragment17, jsx as jsx95, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx96, jsxs as jsxs74 } from "react/jsx-runtime";
 var ChartBar = ({ x, y, w, h, i, loading }) => {
   const baseY = y - h;
   const d = i * 0.08;
@@ -16133,8 +16439,8 @@ var ChartBar = ({ x, y, w, h, i, loading }) => {
     ease: "easeInOut",
     delay: d
   };
-  return /* @__PURE__ */ jsxs73("g", { children: [
-    /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsxs74("g", { children: [
+    /* @__PURE__ */ jsx96(
       motion21.rect,
       {
         x,
@@ -16149,7 +16455,7 @@ var ChartBar = ({ x, y, w, h, i, loading }) => {
         style: { transformBox: "fill-box", originY: 1 }
       }
     ),
-    /* @__PURE__ */ jsx95(
+    /* @__PURE__ */ jsx96(
       motion21.rect,
       {
         x,
@@ -16165,7 +16471,7 @@ var ChartBar = ({ x, y, w, h, i, loading }) => {
         style: { transformBox: "fill-box", originY: 1 }
       }
     ),
-    /* @__PURE__ */ jsx95(
+    /* @__PURE__ */ jsx96(
       motion21.line,
       {
         x1: x + w / 2,
@@ -16199,7 +16505,7 @@ var NoData = ({
     { x: 580, w: 100, h: h * 0.35 },
     { x: 700, w: 100, h: h * 0.3 }
   ];
-  return /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx96(
     "div",
     {
       className: cn(
@@ -16212,17 +16518,17 @@ var NoData = ({
       },
       role: "img",
       "aria-label": message,
-      children: /* @__PURE__ */ jsx95("div", { className: "w-full flex items-center justify-center pl-[var(--pl)] p-6 h-[var(--svg-h)]", children: /* @__PURE__ */ jsxs73("div", { className: "w-full max-w-[900px] relative", children: [
-        /* @__PURE__ */ jsxs73(
+      children: /* @__PURE__ */ jsx96("div", { className: "w-full flex items-center justify-center pl-[var(--pl)] p-6 h-[var(--svg-h)]", children: /* @__PURE__ */ jsxs74("div", { className: "w-full max-w-[900px] relative", children: [
+        /* @__PURE__ */ jsxs74(
           "svg",
           {
             className: "w-full h-[var(--svg-h)] opacity-40",
             viewBox: `0 0 900 ${h}`,
             preserveAspectRatio: "none",
             children: [
-              /* @__PURE__ */ jsxs73("defs", { children: [
-                /* @__PURE__ */ jsxs73("linearGradient", { id: "bg", x1: "0", x2: "0", y1: "0", y2: "1", children: [
-                  /* @__PURE__ */ jsx95(
+              /* @__PURE__ */ jsxs74("defs", { children: [
+                /* @__PURE__ */ jsxs74("linearGradient", { id: "bg", x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                  /* @__PURE__ */ jsx96(
                     "stop",
                     {
                       offset: "0%",
@@ -16230,7 +16536,7 @@ var NoData = ({
                       stopOpacity: "0.15"
                     }
                   ),
-                  /* @__PURE__ */ jsx95(
+                  /* @__PURE__ */ jsx96(
                     "stop",
                     {
                       offset: "100%",
@@ -16239,8 +16545,8 @@ var NoData = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs73("linearGradient", { id: "gg", x1: "0", x2: "0", y1: "0", y2: "1", children: [
-                  /* @__PURE__ */ jsx95(
+                /* @__PURE__ */ jsxs74("linearGradient", { id: "gg", x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                  /* @__PURE__ */ jsx96(
                     "stop",
                     {
                       offset: "0%",
@@ -16248,7 +16554,7 @@ var NoData = ({
                       stopOpacity: "0.4"
                     }
                   ),
-                  /* @__PURE__ */ jsx95(
+                  /* @__PURE__ */ jsx96(
                     "stop",
                     {
                       offset: "100%",
@@ -16257,17 +16563,17 @@ var NoData = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs73("filter", { id: "s", x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
-                  /* @__PURE__ */ jsx95("feGaussianBlur", { in: "SourceAlpha", stdDeviation: "3" }),
-                  /* @__PURE__ */ jsx95("feOffset", { dx: "0", dy: "2" }),
-                  /* @__PURE__ */ jsx95("feComponentTransfer", { children: /* @__PURE__ */ jsx95("feFuncA", { type: "linear", slope: "0.2" }) }),
-                  /* @__PURE__ */ jsxs73("feMerge", { children: [
-                    /* @__PURE__ */ jsx95("feMergeNode", {}),
-                    /* @__PURE__ */ jsx95("feMergeNode", { in: "SourceGraphic" })
+                /* @__PURE__ */ jsxs74("filter", { id: "s", x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
+                  /* @__PURE__ */ jsx96("feGaussianBlur", { in: "SourceAlpha", stdDeviation: "3" }),
+                  /* @__PURE__ */ jsx96("feOffset", { dx: "0", dy: "2" }),
+                  /* @__PURE__ */ jsx96("feComponentTransfer", { children: /* @__PURE__ */ jsx96("feFuncA", { type: "linear", slope: "0.2" }) }),
+                  /* @__PURE__ */ jsxs74("feMerge", { children: [
+                    /* @__PURE__ */ jsx96("feMergeNode", {}),
+                    /* @__PURE__ */ jsx96("feMergeNode", { in: "SourceGraphic" })
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx95(
+              /* @__PURE__ */ jsx96(
                 "rect",
                 {
                   x: 0,
@@ -16278,7 +16584,7 @@ var NoData = ({
                   rx: 8
                 }
               ),
-              [...Array(6)].map((_, i) => /* @__PURE__ */ jsx95(
+              [...Array(6)].map((_, i) => /* @__PURE__ */ jsx96(
                 "line",
                 {
                   x1: 50,
@@ -16291,7 +16597,7 @@ var NoData = ({
                 },
                 i
               )),
-              /* @__PURE__ */ jsx95(
+              /* @__PURE__ */ jsx96(
                 "line",
                 {
                   x1: 50,
@@ -16303,7 +16609,7 @@ var NoData = ({
                   opacity: 0.5
                 }
               ),
-              /* @__PURE__ */ jsx95(
+              /* @__PURE__ */ jsx96(
                 "line",
                 {
                   x1: 50,
@@ -16315,7 +16621,7 @@ var NoData = ({
                   opacity: 0.5
                 }
               ),
-              bars.map((b, i) => /* @__PURE__ */ jsx95(
+              bars.map((b, i) => /* @__PURE__ */ jsx96(
                 ChartBar,
                 {
                   x: b.x,
@@ -16330,15 +16636,15 @@ var NoData = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx95("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none h-[var(--svg-h)]", children: /* @__PURE__ */ jsx95("div", { className: "pointer-events-auto bg-card/95 backdrop-blur-sm px-8 py-6 rounded-xl border border-border/50 shadow-lg text-center max-w-md", children: isLoading ? /* @__PURE__ */ jsx95("div", { className: "flex flex-col items-center gap-4", children: /* @__PURE__ */ jsx95(
+        /* @__PURE__ */ jsx96("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none h-[var(--svg-h)]", children: /* @__PURE__ */ jsx96("div", { className: "pointer-events-auto bg-card/95 backdrop-blur-sm px-8 py-6 rounded-xl border border-border/50 shadow-lg text-center max-w-md", children: isLoading ? /* @__PURE__ */ jsx96("div", { className: "flex flex-col items-center gap-4", children: /* @__PURE__ */ jsx96(
           LoadingBase,
           {
             size: "xl",
             message: loadingMessage ?? "Carregando"
           }
-        ) }) : /* @__PURE__ */ jsxs73(Fragment17, { children: [
-          title && /* @__PURE__ */ jsx95("h3", { className: "text-xl font-semibold text-foreground mb-2", children: title }),
-          /* @__PURE__ */ jsx95("p", { className: "text-lg font-medium text-foreground/90 mb-2", children: message })
+        ) }) : /* @__PURE__ */ jsxs74(Fragment17, { children: [
+          title && /* @__PURE__ */ jsx96("h3", { className: "text-xl font-semibold text-foreground mb-2", children: title }),
+          /* @__PURE__ */ jsx96("p", { className: "text-lg font-medium text-foreground/90 mb-2", children: message })
         ] }) }) })
       ] }) })
     }
@@ -16559,8 +16865,126 @@ var useChartClick = ({
   };
 };
 
+// src/components/ui/charts/hooks/useTimeSeriesRange.ts
+import { useState as useState43, useCallback as useCallback17, useEffect as useEffect33, useRef as useRef23 } from "react";
+function useTimeSeriesRange({
+  dataLength,
+  defaultStartIndex = 0,
+  defaultEndIndex,
+  onRangeChange
+}) {
+  const [startIndex, setStartIndex] = useState43(defaultStartIndex);
+  const [endIndex, setEndIndex] = useState43(
+    defaultEndIndex ?? Math.max(0, dataLength - 1)
+  );
+  const [isDragging, setIsDragging] = useState43(null);
+  const [dragStartX, setDragStartX] = useState43(0);
+  const [initialStartIndex, setInitialStartIndex] = useState43(0);
+  const [initialEndIndex, setInitialEndIndex] = useState43(0);
+  const brushRef = useRef23(null);
+  useEffect33(() => {
+    if (dataLength > 0) {
+      setStartIndex((prev) => Math.min(prev, dataLength - 1));
+      setEndIndex((prev) => {
+        if (prev >= dataLength - 2 || defaultEndIndex === void 0) {
+          return dataLength - 1;
+        }
+        return Math.min(prev, dataLength - 1);
+      });
+    }
+  }, [dataLength, defaultEndIndex]);
+  const handleRangeChange = useCallback17(
+    (newStart, newEnd) => {
+      const clampedStart = Math.max(0, Math.min(newStart, dataLength - 1));
+      const clampedEnd = Math.max(
+        clampedStart,
+        Math.min(newEnd, dataLength - 1)
+      );
+      setStartIndex(clampedStart);
+      setEndIndex(clampedEnd);
+      if (onRangeChange) {
+        onRangeChange(clampedStart, clampedEnd);
+      }
+    },
+    [dataLength, onRangeChange]
+  );
+  const handleMouseDown = useCallback17(
+    (e, type) => {
+      e.preventDefault();
+      setIsDragging(type);
+      setDragStartX(e.clientX);
+      setInitialStartIndex(startIndex);
+      setInitialEndIndex(endIndex);
+    },
+    [startIndex, endIndex]
+  );
+  const handleMouseMove = useCallback17(
+    (e) => {
+      if (!isDragging || !brushRef.current) return;
+      const brushWidth = brushRef.current.offsetWidth;
+      const deltaX = e.clientX - dragStartX;
+      const indexDelta = Math.round(deltaX / brushWidth * dataLength);
+      if (isDragging === "start") {
+        const newStart = Math.max(
+          0,
+          Math.min(initialStartIndex + indexDelta, endIndex - 1)
+        );
+        handleRangeChange(newStart, endIndex);
+      } else if (isDragging === "end") {
+        const newEnd = Math.max(
+          startIndex + 1,
+          Math.min(initialEndIndex + indexDelta, dataLength - 1)
+        );
+        handleRangeChange(startIndex, newEnd);
+      } else if (isDragging === "middle") {
+        const rangeSize = initialEndIndex - initialStartIndex;
+        let newStart = initialStartIndex + indexDelta;
+        let newEnd = initialEndIndex + indexDelta;
+        if (newStart < 0) {
+          newStart = 0;
+          newEnd = rangeSize;
+        } else if (newEnd >= dataLength) {
+          newEnd = dataLength - 1;
+          newStart = newEnd - rangeSize;
+        }
+        handleRangeChange(newStart, newEnd);
+      }
+    },
+    [
+      isDragging,
+      dragStartX,
+      dataLength,
+      startIndex,
+      endIndex,
+      initialStartIndex,
+      initialEndIndex,
+      handleRangeChange
+    ]
+  );
+  const handleMouseUp = useCallback17(() => {
+    setIsDragging(null);
+  }, []);
+  useEffect33(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  return {
+    startIndex,
+    endIndex,
+    isDragging,
+    brushRef,
+    handleMouseDown
+  };
+}
+
 // src/components/ui/charts/Chart.tsx
-import { jsx as jsx96, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx97, jsxs as jsxs75 } from "react/jsx-runtime";
 var DEFAULT_COLORS2 = ["#55af7d", "#8e68ff", "#2273e1"];
 var Chart = ({
   data,
@@ -16593,7 +17017,8 @@ var Chart = ({
   formatBR = false,
   legendUppercase = false,
   chartMargin,
-  isLoading = false
+  isLoading = false,
+  timeSeries
 }) => {
   const smartConfig = useMemo26(() => {
     const resolvedXAxisKey = typeof xAxis === "string" ? xAxis : xAxis && xAxis.dataKey || detectXAxis(data);
@@ -16633,15 +17058,38 @@ var Chart = ({
     onTooltipPositionChange,
     setActiveTooltips
   } = useChartTooltips(maxTooltips);
-  useEffect33(() => {
+  useEffect34(() => {
     if (highlightedSeries.size === 0 && showOnlyHighlighted) {
       setShowOnlyHighlighted(false);
     }
   }, [highlightedSeries, showOnlyHighlighted, setShowOnlyHighlighted]);
-  const processedData = data.map((item) => ({
-    ...item,
-    name: String(item[xAxisConfig.dataKey] || "N/A")
-  }));
+  const timeSeriesConfig = useMemo26(() => {
+    if (typeof timeSeries === "boolean") {
+      return timeSeries ? {} : void 0;
+    }
+    return timeSeries;
+  }, [timeSeries]);
+  const {
+    startIndex,
+    endIndex,
+    brushRef,
+    handleMouseDown
+  } = useTimeSeriesRange({
+    dataLength: data.length,
+    defaultStartIndex: timeSeriesConfig?.start,
+    defaultEndIndex: timeSeriesConfig?.end,
+    onRangeChange: timeSeriesConfig?.onRangeChange
+  });
+  const processedData = useMemo26(() => {
+    const mapped = data.map((item) => ({
+      ...item,
+      name: String(item[xAxisConfig.dataKey] || "N/A")
+    }));
+    if (timeSeriesConfig) {
+      return mapped.slice(startIndex, endIndex + 1);
+    }
+    return mapped;
+  }, [data, xAxisConfig.dataKey, timeSeriesConfig, startIndex, endIndex]);
   const seriesOrder = [];
   if (series) {
     if (series.bar)
@@ -16730,9 +17178,11 @@ var Chart = ({
       setActiveTooltips
     }
   );
-  const titleClassName = useMemo26(
-    () => "text-[1.4rem] font-semibold text-foreground mb-3",
-    []
+  const getSeriesOpacity = useCallback18(
+    (key) => {
+      return highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1;
+    },
+    [highlightedSeries]
   );
   const finalValueFormatter = useMemo26(
     () => createValueFormatter(valueFormatter2, formatBR),
@@ -16742,20 +17192,15 @@ var Chart = ({
     () => createYTickFormatter(finalValueFormatter),
     [finalValueFormatter]
   );
-  const finalEnableHighlights = enableHighlights;
-  const finalEnableShowOnly = enableShowOnly;
-  const finalEnablePeriodsDropdown = enablePeriodsDropdown && enableDraggableTooltips;
-  const defaultChartRightMargin = 30;
-  const defaultChartLeftMargin = 0;
-  const axisLabelMargin = 56;
-  const containerPaddingLeft = -6;
-  const finalChartRightMargin = chartMargin?.right ?? (rightKeys.length > 0 ? axisLabelMargin : defaultChartRightMargin);
-  const finalChartLeftMargin = chartMargin?.left ?? (yAxisLabel ? axisLabelMargin : defaultChartLeftMargin);
+  const AXIS_LABEL_MARGIN = 56;
+  const CONTAINER_PADDING_LEFT = -6;
+  const finalChartRightMargin = chartMargin?.right ?? (rightKeys.length > 0 ? AXIS_LABEL_MARGIN : 30);
+  const finalChartLeftMargin = chartMargin?.left ?? (yAxisLabel ? AXIS_LABEL_MARGIN : 0);
   const yAxisTickWidth = useMemo26(
     () => computeYAxisTickWidth(
       chartMargin?.left,
       yAxisLabel,
-      axisLabelMargin,
+      AXIS_LABEL_MARGIN,
       yTickFormatter,
       minLeftDataValue,
       niceMaxLeft
@@ -16768,19 +17213,13 @@ var Chart = ({
       niceMaxLeft
     ]
   );
-  const composedChartLeftMargin = chartMargin?.left ?? defaultChartLeftMargin;
-  const composedChartRightMargin = chartMargin?.right ?? defaultChartRightMargin;
   const finalChartTopMargin = chartMargin?.top ?? (showLabels ? 48 : 20);
-  const baseBottom = chartMargin?.bottom ?? 5;
-  const extraForXAxisLabel = xAxisLabel ? 22 : 0;
-  const extraForLegend = showLegend ? 36 : 0;
-  const finalChartBottomMargin = baseBottom + extraForXAxisLabel + extraForLegend;
-  const measuredInner = measuredWidth ? Math.max(0, measuredWidth - 32) : void 0;
-  const effectiveChartWidth = typeof width === "number" ? width : measuredInner ?? computedWidth;
-  const chartInnerWidth = effectiveChartWidth - composedChartLeftMargin - composedChartRightMargin;
+  const finalChartBottomMargin = (chartMargin?.bottom ?? 5) + (xAxisLabel ? 22 : 0) + (showLegend ? 36 : 0);
+  const effectiveChartWidth = typeof width === "number" ? width : measuredWidth ? Math.max(0, measuredWidth - 32) : computedWidth;
+  const chartInnerWidth = effectiveChartWidth - finalChartLeftMargin - finalChartRightMargin;
   const leftYAxisLabelDx = -Math.max(12, Math.round(yAxisTickWidth / 2));
   const rightYAxisLabelDx = Math.max(12, Math.round(finalChartRightMargin / 2));
-  const openTooltipForPeriod = useCallback17(
+  const openTooltipForPeriod = useCallback18(
     (periodName) => {
       if (!enableDraggableTooltips) return;
       const row = processedData.find((r) => String(r.name) === periodName);
@@ -16797,7 +17236,7 @@ var Chart = ({
         );
       }
       const offsetIndex = activeTooltips.length;
-      const availableWidth = typeof width === "number" ? width : measuredInner ?? computedWidth;
+      const availableWidth = effectiveChartWidth;
       const gap = 28;
       const leftGap = 28;
       const newTooltip = {
@@ -16817,535 +17256,510 @@ var Chart = ({
       enableDraggableTooltips,
       processedData,
       activeTooltips,
-      width,
-      measuredInner,
-      computedWidth,
+      effectiveChartWidth,
       maxTooltips,
       setActiveTooltips
     ]
   );
   if (!data && !isLoading) return null;
   if (isLoading) {
-    return /* @__PURE__ */ jsx96(
+    return /* @__PURE__ */ jsx97(
       NoData_default,
       {
         title,
         isLoading: true,
         loadingMessage: typeof title === "string" ? `${title} \u2014 Carregando` : "Carregando",
-        paddingLeft: containerPaddingLeft + finalChartLeftMargin,
+        paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
         height
       }
     );
   }
   if (Array.isArray(data) && data.length === 0) {
-    return /* @__PURE__ */ jsx96(
+    return /* @__PURE__ */ jsx97(
       NoData_default,
       {
         title,
-        paddingLeft: containerPaddingLeft + finalChartLeftMargin,
+        paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
         height
       }
     );
   }
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx97("div", { ref: wrapperRef, className: "w-full overflow-hidden min-w-0", children: /* @__PURE__ */ jsxs75(
     "div",
     {
-      ref: wrapperRef,
-      style: {
-        width: "100%",
-        overflowX: "hidden",
-        overflowY: "hidden",
-        minWidth: 0
-      },
-      children: /* @__PURE__ */ jsxs74(
-        "div",
-        {
-          className: cn("rounded-lg bg-card relative", className),
-          style: { width: "100%", maxWidth: "100%", minWidth: 0 },
-          children: [
-            title && /* @__PURE__ */ jsx96(
-              "div",
-              {
-                style: {
-                  paddingLeft: `${containerPaddingLeft + finalChartLeftMargin}px`,
-                  width: "100%",
-                  display: "flex",
-                  justifyContent: titlePosition === "center" ? "center" : titlePosition === "right" ? "flex-end" : "flex-start",
-                  alignItems: "center",
-                  marginTop: "19px"
-                },
-                children: /* @__PURE__ */ jsx96("div", { className: titleClassName, children: title })
-              }
+      className: cn(
+        "rounded-lg bg-card relative w-full max-w-full min-w-0",
+        className
+      ),
+      children: [
+        title && /* @__PURE__ */ jsx97(
+          "div",
+          {
+            className: cn(
+              "w-full flex items-center mt-[19px] ml-[90px]",
+              titlePosition === "center" && "justify-center",
+              titlePosition === "right" && "justify-end",
+              titlePosition === "left" && "justify-start"
             ),
-            allKeys.length > 0 && (finalEnableHighlights || finalEnableShowOnly) && /* @__PURE__ */ jsxs74(
-              "div",
+            children: /* @__PURE__ */ jsx97("div", { className: "text-[1.4rem] font-semibold text-foreground mb-3", children: title })
+          }
+        ),
+        allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxs75("div", { className: "flex items-center w-[98%] ml-[90px] gap-2", children: [
+          enableHighlights && /* @__PURE__ */ jsx97(
+            Highlights_default,
+            {
+              allKeys,
+              mapperConfig,
+              finalColors,
+              highlightedSeries,
+              toggleHighlight,
+              containerWidth: chartInnerWidth
+            }
+          ),
+          enableShowOnly && /* @__PURE__ */ jsx97(
+            ShowOnly_default,
+            {
+              showOnlyHighlighted,
+              setShowOnlyHighlighted,
+              highlightedSeriesSize: highlightedSeries.size,
+              clearHighlights
+            }
+          ),
+          enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx97("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx97(
+            PeriodsDropdown_default,
+            {
+              processedData,
+              onOpenPeriod: openTooltipForPeriod,
+              rightOffset: finalChartRightMargin,
+              activePeriods
+            }
+          ) })
+        ] }),
+        !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx97(
+          "div",
+          {
+            className: "w-full flex justify-end",
+            style: {
+              paddingLeft: `${CONTAINER_PADDING_LEFT + finalChartLeftMargin}px`,
+              paddingRight: `${finalChartRightMargin}px`,
+              maxWidth: `${chartInnerWidth}px`
+            },
+            children: /* @__PURE__ */ jsx97(
+              PeriodsDropdown_default,
               {
-                className: "flex items-center w-full",
-                style: {
-                  paddingLeft: `${containerPaddingLeft + finalChartLeftMargin}px`,
-                  width: "98%",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "0.5rem"
-                },
-                children: [
-                  finalEnableHighlights && /* @__PURE__ */ jsx96(
-                    Highlights_default,
-                    {
-                      allKeys,
-                      mapperConfig,
-                      finalColors,
-                      highlightedSeries,
-                      toggleHighlight,
-                      containerWidth: chartInnerWidth
-                    }
-                  ),
-                  finalEnableShowOnly && /* @__PURE__ */ jsx96(
-                    ShowOnly_default,
-                    {
-                      showOnlyHighlighted,
-                      setShowOnlyHighlighted,
-                      highlightedSeriesSize: highlightedSeries.size,
-                      clearHighlights
-                    }
-                  ),
-                  finalEnablePeriodsDropdown && /* @__PURE__ */ jsx96(
-                    "div",
-                    {
-                      style: {
-                        marginLeft: "auto",
-                        display: "flex",
-                        alignItems: "center"
-                      },
-                      children: /* @__PURE__ */ jsx96(
-                        PeriodsDropdown_default,
-                        {
-                          processedData,
-                          onOpenPeriod: openTooltipForPeriod,
-                          rightOffset: finalChartRightMargin,
-                          activePeriods
-                        }
-                      )
-                    }
-                  )
-                ]
+                processedData,
+                onOpenPeriod: openTooltipForPeriod,
+                rightOffset: finalChartRightMargin
               }
-            ),
-            !(allKeys.length > 0 && (finalEnableHighlights || finalEnableShowOnly)) && finalEnablePeriodsDropdown && /* @__PURE__ */ jsx96(
-              "div",
-              {
-                style: {
-                  paddingLeft: `${containerPaddingLeft + finalChartLeftMargin}px`,
-                  paddingRight: `${finalChartRightMargin}px`,
-                  width: "100%",
-                  maxWidth: `${chartInnerWidth}px`,
-                  display: "flex",
-                  justifyContent: "flex-end"
-                },
-                children: /* @__PURE__ */ jsx96(
-                  PeriodsDropdown_default,
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx97(ResponsiveContainer2, { width: "100%", height, children: /* @__PURE__ */ jsxs75(
+          ComposedChart2,
+          {
+            data: processedData,
+            height,
+            margin: {
+              top: finalChartTopMargin,
+              right: finalChartRightMargin,
+              left: finalChartLeftMargin,
+              bottom: finalChartBottomMargin
+            },
+            onClick: handleChartClick,
+            children: [
+              /* @__PURE__ */ jsx97("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
+                const key = s.key;
+                const color = finalColors[key];
+                return /* @__PURE__ */ jsxs75(
+                  "linearGradient",
                   {
-                    processedData,
-                    onOpenPeriod: openTooltipForPeriod,
-                    rightOffset: finalChartRightMargin
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx96(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs74(
-              ComposedChart,
-              {
-                data: processedData,
-                height,
-                margin: {
-                  top: finalChartTopMargin,
-                  right: finalChartRightMargin,
-                  left: finalChartLeftMargin,
-                  bottom: finalChartBottomMargin
-                },
-                onClick: handleChartClick,
-                children: [
-                  /* @__PURE__ */ jsx96("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
-                    const key = s.key;
-                    const color = finalColors[key];
-                    return /* @__PURE__ */ jsxs74(
-                      "linearGradient",
-                      {
-                        id: `gradient-${key}`,
-                        x1: "0",
-                        y1: "0",
-                        x2: "0",
-                        y2: "0.8",
-                        children: [
-                          /* @__PURE__ */ jsx96("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
-                          /* @__PURE__ */ jsx96("stop", { offset: "90%", stopColor: color, stopOpacity: 0.1 })
-                        ]
-                      },
-                      `gradient-${key}`
-                    );
-                  }) }),
-                  showGrid && /* @__PURE__ */ jsx96(
-                    CartesianGrid,
-                    {
-                      strokeDasharray: "3 3",
-                      stroke: gridColor || "hsl(var(--muted-foreground))",
-                      opacity: 0.5
+                    id: `gradient-${key}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "0",
+                    y2: "0.8",
+                    children: [
+                      /* @__PURE__ */ jsx97("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
+                      /* @__PURE__ */ jsx97("stop", { offset: "90%", stopColor: color, stopOpacity: 0.1 })
+                    ]
+                  },
+                  `gradient-${key}`
+                );
+              }) }),
+              showGrid && /* @__PURE__ */ jsx97(
+                CartesianGrid,
+                {
+                  strokeDasharray: "3 3",
+                  stroke: gridColor || "hsl(var(--muted-foreground))",
+                  opacity: 0.5
+                }
+              ),
+              /* @__PURE__ */ jsx97(
+                XAxis2,
+                {
+                  dataKey: xAxisConfig.dataKey,
+                  stroke: "hsl(var(--muted-foreground))",
+                  fontSize: 12,
+                  tickLine: false,
+                  axisLine: false,
+                  tickFormatter: (value) => {
+                    if (categoryFormatter)
+                      return categoryFormatter(value);
+                    if (xAxisConfig.valueFormatter)
+                      return xAxisConfig.valueFormatter(value);
+                    return String(value ?? "");
+                  },
+                  label: xAxisLabel ? {
+                    value: xAxisLabel,
+                    position: "insideBottomRight",
+                    offset: -5,
+                    style: {
+                      fontSize: 12,
+                      fill: "hsl(var(--muted-foreground))",
+                      fontWeight: 500
                     }
-                  ),
-                  /* @__PURE__ */ jsx96(
-                    XAxis,
-                    {
-                      dataKey: xAxisConfig.dataKey,
-                      stroke: "hsl(var(--muted-foreground))",
+                  } : void 0
+                }
+              ),
+              /* @__PURE__ */ jsx97(
+                YAxis2,
+                {
+                  yAxisId: "left",
+                  width: yAxisTickWidth,
+                  stroke: "hsl(var(--muted-foreground))",
+                  fontSize: 12,
+                  tickLine: false,
+                  axisLine: false,
+                  tickFormatter: yTickFormatter,
+                  domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
+                  tickCount: 6,
+                  label: yAxisLabel ? {
+                    value: yAxisLabel,
+                    angle: -90,
+                    position: "left",
+                    dx: leftYAxisLabelDx,
+                    style: {
                       fontSize: 12,
-                      tickLine: false,
-                      axisLine: false,
-                      tickFormatter: (value) => {
-                        if (categoryFormatter)
-                          return categoryFormatter(value);
-                        if (xAxisConfig.valueFormatter)
-                          return xAxisConfig.valueFormatter(value);
-                        return String(value ?? "");
-                      },
-                      label: xAxisLabel ? {
-                        value: xAxisLabel,
-                        position: "insideBottomRight",
-                        offset: -5,
-                        style: {
-                          fontSize: 12,
-                          fill: "hsl(var(--muted-foreground))",
-                          fontWeight: 500
-                        }
-                      } : void 0
+                      fill: "hsl(var(--muted-foreground))",
+                      fontWeight: 500,
+                      textAnchor: "middle"
                     }
-                  ),
-                  /* @__PURE__ */ jsx96(
-                    YAxis,
+                  } : void 0
+                }
+              ),
+              minLeftDataValue < 0 && /* @__PURE__ */ jsx97(
+                ReferenceLine,
+                {
+                  y: 0,
+                  yAxisId: "left",
+                  stroke: "hsl(var(--muted-foreground))",
+                  strokeWidth: 1,
+                  strokeDasharray: "4 4"
+                }
+              ),
+              rightKeys.length > 0 && (() => {
+                const decimals = typeof biaxialConfigNormalized?.decimals === "number" ? Math.max(0, Math.floor(biaxialConfigNormalized.decimals)) : 2;
+                const rightTickFormatter = (v) => {
+                  if (biaxialConfigNormalized?.percentage) {
+                    const num = Number(String(v));
+                    const nf = new Intl.NumberFormat("pt-BR", {
+                      minimumFractionDigits: decimals,
+                      maximumFractionDigits: decimals
+                    });
+                    const out = Number.isNaN(num) ? String(v ?? "") : nf.format(num);
+                    return `${out}%`;
+                  }
+                  return yTickFormatter(v);
+                };
+                const firstRightKey = biaxialConfigNormalized?.key && biaxialConfigNormalized.key[0];
+                const defaultRightColor = firstRightKey && finalColors[firstRightKey] || "hsl(var(--muted-foreground))";
+                const rightAxisColor = (() => {
+                  if (!biaxialConfigNormalized) return defaultRightColor;
+                  if (typeof biaxialConfigNormalized.stroke === "string")
+                    return biaxialConfigNormalized.stroke;
+                  if (biaxialConfigNormalized.stroke && firstRightKey && typeof biaxialConfigNormalized.stroke === "object")
+                    return biaxialConfigNormalized.stroke[firstRightKey] || defaultRightColor;
+                  return defaultRightColor;
+                })();
+                return /* @__PURE__ */ jsx97(
+                  YAxis2,
+                  {
+                    yAxisId: "right",
+                    width: finalChartRightMargin,
+                    orientation: "right",
+                    stroke: "hsl(var(--muted-foreground))",
+                    fontSize: 12,
+                    tickLine: false,
+                    axisLine: false,
+                    tick: { fill: rightAxisColor },
+                    tickFormatter: rightTickFormatter,
+                    domain: [Math.min(minRightDataValue, 0), niceMaxRight],
+                    tickCount: 6,
+                    label: biaxialConfigNormalized?.label ? {
+                      value: biaxialConfigNormalized.label,
+                      angle: -90,
+                      position: "right",
+                      dx: rightYAxisLabelDx,
+                      style: {
+                        fontSize: 12,
+                        fill: "hsl(var(--muted-foreground))",
+                        fontWeight: 500,
+                        textAnchor: "middle"
+                      }
+                    } : void 0
+                  }
+                );
+              })(),
+              showTooltip && /* @__PURE__ */ jsx97(
+                Tooltip,
+                {
+                  content: showTooltipTotal ? /* @__PURE__ */ jsx97(
+                    TooltipWithTotal_default,
                     {
-                      yAxisId: "left",
-                      width: yAxisTickWidth,
-                      stroke: "hsl(var(--muted-foreground))",
-                      fontSize: 12,
-                      tickLine: false,
-                      axisLine: false,
-                      tickFormatter: yTickFormatter,
-                      domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
-                      tickCount: 6,
-                      label: yAxisLabel ? {
-                        value: yAxisLabel,
-                        angle: -90,
-                        position: "left",
-                        dx: leftYAxisLabelDx,
-                        style: {
-                          fontSize: 12,
-                          fill: "hsl(var(--muted-foreground))",
-                          fontWeight: 500,
-                          textAnchor: "middle"
-                        }
-                      } : void 0
+                      finalColors,
+                      valueFormatter: finalValueFormatter,
+                      categoryFormatter,
+                      periodLabel
                     }
-                  ),
-                  minLeftDataValue < 0 && /* @__PURE__ */ jsx96(
-                    ReferenceLine,
+                  ) : /* @__PURE__ */ jsx97(
+                    TooltipSimple_default,
                     {
-                      y: 0,
-                      yAxisId: "left",
-                      stroke: "hsl(var(--muted-foreground))",
-                      strokeWidth: 1,
-                      strokeDasharray: "4 4"
+                      finalColors,
+                      valueFormatter: finalValueFormatter,
+                      categoryFormatter,
+                      periodLabel
                     }
                   ),
-                  rightKeys.length > 0 && (() => {
-                    const decimals = typeof biaxialConfigNormalized?.decimals === "number" ? Math.max(0, Math.floor(biaxialConfigNormalized.decimals)) : 2;
-                    const rightTickFormatter = (v) => {
-                      if (biaxialConfigNormalized?.percentage) {
-                        const num = Number(String(v));
-                        const nf = new Intl.NumberFormat("pt-BR", {
-                          minimumFractionDigits: decimals,
-                          maximumFractionDigits: decimals
-                        });
-                        const out = Number.isNaN(num) ? String(v ?? "") : nf.format(num);
-                        return `${out}%`;
-                      }
-                      return yTickFormatter(v);
-                    };
-                    const firstRightKey = biaxialConfigNormalized?.key && biaxialConfigNormalized.key[0];
-                    const defaultRightColor = firstRightKey && finalColors[firstRightKey] || "hsl(var(--muted-foreground))";
-                    const rightAxisColor = (() => {
-                      if (!biaxialConfigNormalized) return defaultRightColor;
-                      if (typeof biaxialConfigNormalized.stroke === "string")
-                        return biaxialConfigNormalized.stroke;
-                      if (biaxialConfigNormalized.stroke && firstRightKey && typeof biaxialConfigNormalized.stroke === "object")
-                        return biaxialConfigNormalized.stroke[firstRightKey] || defaultRightColor;
-                      return defaultRightColor;
-                    })();
-                    return /* @__PURE__ */ jsx96(
-                      YAxis,
-                      {
-                        yAxisId: "right",
-                        width: finalChartRightMargin,
-                        orientation: "right",
-                        stroke: "hsl(var(--muted-foreground))",
-                        fontSize: 12,
-                        tickLine: false,
-                        axisLine: false,
-                        tick: { fill: rightAxisColor },
-                        tickFormatter: rightTickFormatter,
-                        domain: [Math.min(minRightDataValue, 0), niceMaxRight],
-                        tickCount: 6,
-                        label: biaxialConfigNormalized?.label ? {
-                          value: biaxialConfigNormalized.label,
-                          angle: -90,
-                          position: "right",
-                          dx: rightYAxisLabelDx,
-                          style: {
-                            fontSize: 12,
-                            fill: "hsl(var(--muted-foreground))",
-                            fontWeight: 500,
-                            textAnchor: "middle"
-                          }
-                        } : void 0
-                      }
-                    );
-                  })(),
-                  showTooltip && /* @__PURE__ */ jsx96(
-                    Tooltip,
+                  cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
+                }
+              ),
+              showLegend && /* @__PURE__ */ jsx97(
+                Legend,
+                {
+                  wrapperStyle: {
+                    color: "hsl(var(--foreground))",
+                    fontSize: "14px",
+                    paddingTop: "8px",
+                    letterSpacing: 0
+                  },
+                  formatter: (value) => {
+                    const key = String(value);
+                    const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName(key);
+                    const displayLabel = legendUppercase ? label.toUpperCase() : label;
+                    return /* @__PURE__ */ jsx97("span", { className: "tracking-[0]", children: displayLabel });
+                  }
+                }
+              ),
+              seriesOrder.map((s) => {
+                const key = s.key;
+                if (showOnlyHighlighted && !highlightedSeries.has(key))
+                  return null;
+                const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName(key);
+                let color = finalColors[key];
+                if (rightKeys.includes(key) && biaxialConfigNormalized?.stroke) {
+                  if (typeof biaxialConfigNormalized.stroke === "string") {
+                    color = biaxialConfigNormalized.stroke;
+                  } else {
+                    color = biaxialConfigNormalized.stroke[key] ?? color;
+                  }
+                }
+                if (s.type === "bar") {
+                  return /* @__PURE__ */ jsx97(
+                    Bar2,
                     {
-                      content: showTooltipTotal ? /* @__PURE__ */ jsx96(
-                        TooltipWithTotal_default,
-                        {
-                          finalColors,
-                          valueFormatter: finalValueFormatter,
-                          categoryFormatter,
-                          periodLabel
-                        }
-                      ) : /* @__PURE__ */ jsx96(
-                        TooltipSimple_default,
+                      dataKey: key,
+                      yAxisId: rightKeys.includes(key) ? "right" : "left",
+                      name: label,
+                      fill: color,
+                      radius: [4, 4, 0, 0],
+                      onClick: handleBarClick,
+                      className: "cursor-pointer",
+                      style: { opacity: getSeriesOpacity(key) },
+                      activeBar: /* @__PURE__ */ jsx97(
+                        Rectangle,
                         {
-                          finalColors,
-                          valueFormatter: finalValueFormatter,
-                          categoryFormatter,
-                          periodLabel
+                          fill: color,
+                          stroke: color,
+                          strokeWidth: 2,
+                          opacity: 0.8
                         }
                       ),
-                      cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
-                    }
-                  ),
-                  showLegend && /* @__PURE__ */ jsx96(
-                    Legend,
-                    {
-                      wrapperStyle: {
-                        color: "hsl(var(--foreground))",
-                        fontSize: "14px",
-                        paddingTop: "8px",
-                        letterSpacing: 0
-                      },
-                      formatter: (value) => {
-                        const key = String(value);
-                        const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName(key);
-                        const displayLabel = legendUppercase ? label.toUpperCase() : label;
-                        return /* @__PURE__ */ jsx96("span", { style: { letterSpacing: 0 }, children: displayLabel });
-                      }
-                    }
-                  ),
-                  seriesOrder.map((s) => {
-                    const key = s.key;
-                    if (showOnlyHighlighted && !highlightedSeries.has(key))
-                      return null;
-                    const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName(key);
-                    let color = finalColors[key];
-                    if (rightKeys.includes(key) && biaxialConfigNormalized?.stroke) {
-                      if (typeof biaxialConfigNormalized.stroke === "string") {
-                        color = biaxialConfigNormalized.stroke;
-                      } else {
-                        color = biaxialConfigNormalized.stroke[key] ?? color;
-                      }
-                    }
-                    if (s.type === "bar") {
-                      return /* @__PURE__ */ jsx96(
-                        Bar,
+                      children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx97(
+                        LabelList,
                         {
                           dataKey: key,
-                          yAxisId: rightKeys.includes(key) ? "right" : "left",
-                          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__ */ jsx96(
-                            Rectangle,
-                            {
-                              fill: color,
-                              stroke: color,
-                              strokeWidth: 2,
-                              opacity: 0.8
-                            }
-                          ),
-                          children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx96(
-                            LabelList,
-                            {
-                              dataKey: key,
-                              content: (props) => {
-                                const p = props;
-                                const barHeight = typeof p.height === "number" ? p.height : typeof p.height === "string" ? Number(p.height) : 0;
-                                const barWidth = typeof p.width === "number" ? p.width : typeof p.width === "string" ? Number(p.width) : 0;
-                                const smallThreshold = 14;
-                                const needsOutside = barHeight > 0 && barHeight < smallThreshold || barWidth > 0 && barWidth < smallThreshold;
-                                if (needsOutside) {
-                                  return null;
-                                }
-                                const inside = renderInsideBarLabel(
-                                  color,
-                                  finalValueFormatter
-                                );
-                                return inside(props);
-                              },
-                              offset: 0
+                          content: (props) => {
+                            const p = props;
+                            const barHeight = typeof p.height === "number" ? p.height : typeof p.height === "string" ? Number(p.height) : 0;
+                            const barWidth = typeof p.width === "number" ? p.width : typeof p.width === "string" ? Number(p.width) : 0;
+                            const smallThreshold = 14;
+                            const needsOutside = barHeight > 0 && barHeight < smallThreshold || barWidth > 0 && barWidth < smallThreshold;
+                            if (needsOutside) {
+                              return null;
                             }
-                          ) : null
-                        },
-                        `bar-${key}`
-                      );
-                    }
-                    if (s.type === "line") {
-                      return /* @__PURE__ */ jsx96(
-                        Line,
+                            const inside = renderInsideBarLabel(
+                              color,
+                              finalValueFormatter
+                            );
+                            return inside(props);
+                          },
+                          offset: 0
+                        }
+                      ) : null
+                    },
+                    `bar-${key}`
+                  );
+                }
+                if (s.type === "line") {
+                  return /* @__PURE__ */ jsx97(
+                    Line2,
+                    {
+                      dataKey: key,
+                      yAxisId: rightKeys.includes(key) ? "right" : "left",
+                      name: label,
+                      stroke: color,
+                      strokeWidth: 2,
+                      dot: { r: 3 },
+                      activeDot: { r: 6 },
+                      onClick: handleSeriesClick,
+                      className: "cursor-pointer pointer-events-auto",
+                      style: { opacity: getSeriesOpacity(key) },
+                      children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx97(
+                        LabelList,
                         {
                           dataKey: key,
-                          yAxisId: rightKeys.includes(key) ? "right" : "left",
-                          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__ */ jsx96(
-                            LabelList,
-                            {
-                              dataKey: key,
-                              position: "top",
-                              content: pillLabelRenderer_default(
-                                color,
-                                "filled",
-                                finalValueFormatter
-                              ),
-                              offset: 14
-                            }
-                          ) : null
-                        },
-                        `line-${key}`
-                      );
-                    }
-                    if (s.type === "area") {
-                      return /* @__PURE__ */ jsx96(
-                        Area,
+                          position: "top",
+                          content: pillLabelRenderer_default(
+                            color,
+                            "filled",
+                            finalValueFormatter
+                          ),
+                          offset: 14
+                        }
+                      ) : null
+                    },
+                    `line-${key}`
+                  );
+                }
+                if (s.type === "area") {
+                  return /* @__PURE__ */ jsx97(
+                    Area2,
+                    {
+                      type: "monotone",
+                      dataKey: key,
+                      yAxisId: rightKeys.includes(key) ? "right" : "left",
+                      name: label,
+                      stroke: color,
+                      fill: `url(#gradient-${key})`,
+                      fillOpacity: 1,
+                      strokeWidth: 2,
+                      onClick: handleSeriesClick,
+                      className: "cursor-pointer pointer-events-auto",
+                      style: { opacity: getSeriesOpacity(key) },
+                      activeDot: {
+                        r: 6,
+                        fill: color,
+                        stroke: "hsl(var(--background))",
+                        strokeWidth: 2
+                      },
+                      children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx97(
+                        LabelList,
                         {
-                          type: "monotone",
                           dataKey: key,
-                          yAxisId: rightKeys.includes(key) ? "right" : "left",
-                          name: label,
-                          stroke: color,
-                          fill: `url(#gradient-${key})`,
-                          fillOpacity: 1,
-                          strokeWidth: 2,
-                          onClick: handleSeriesClick,
-                          style: {
-                            cursor: "pointer",
-                            pointerEvents: "all",
-                            opacity: highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1
-                          },
-                          activeDot: {
-                            r: 6,
-                            fill: color,
-                            stroke: "hsl(var(--background))",
-                            strokeWidth: 2
-                          },
-                          children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx96(
-                            LabelList,
-                            {
-                              dataKey: key,
-                              position: "top",
-                              content: pillLabelRenderer_default(
-                                color,
-                                "soft",
-                                finalValueFormatter
-                              ),
-                              offset: 12
-                            }
-                          ) : null
-                        },
-                        `area-${key}`
-                      );
-                    }
-                    return null;
-                  })
-                ]
-              }
-            ) }),
-            enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ jsx96(
-              DraggableTooltip_default,
-              {
-                id: tooltip.id,
-                data: adaptDataForTooltip(tooltip.data, xAxisConfig.dataKey),
-                position: tooltip.position,
-                title,
-                dataKeys: allKeys,
-                finalColors,
-                highlightedSeries,
-                toggleHighlight,
-                showOnlyHighlighted,
-                onClose: (id) => setActiveTooltips((prev) => prev.filter((t) => t.id !== id)),
-                onPositionChange: onTooltipPositionChange,
-                periodLabel,
-                dataLabel: "Dados do Per\xEDodo",
-                valueFormatter: finalValueFormatter,
-                categoryFormatter,
-                globalTooltipCount: activeTooltips.length,
-                onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
-                closeAllButtonPosition: "top-center",
-                closeAllButtonVariant: "floating"
-              },
-              tooltip.id
-            )),
-            enableDraggableTooltips && activeTooltips.length > 1 && /* @__PURE__ */ jsx96(
-              CloseAllButton_default,
-              {
-                count: activeTooltips.length,
-                onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
-                position: "top-center",
-                variant: "floating"
-              }
-            )
-          ]
-        }
-      )
+                          position: "top",
+                          content: pillLabelRenderer_default(
+                            color,
+                            "soft",
+                            finalValueFormatter
+                          ),
+                          offset: 12
+                        }
+                      ) : null
+                    },
+                    `area-${key}`
+                  );
+                }
+                return null;
+              })
+            ]
+          }
+        ) }),
+        enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ jsx97(
+          DraggableTooltip_default,
+          {
+            id: tooltip.id,
+            data: adaptDataForTooltip(tooltip.data, xAxisConfig.dataKey),
+            position: tooltip.position,
+            title,
+            dataKeys: allKeys,
+            finalColors,
+            highlightedSeries,
+            toggleHighlight,
+            showOnlyHighlighted,
+            onClose: (id) => setActiveTooltips((prev) => prev.filter((t) => t.id !== id)),
+            onPositionChange: onTooltipPositionChange,
+            periodLabel,
+            dataLabel: "Dados do Per\xEDodo",
+            valueFormatter: finalValueFormatter,
+            categoryFormatter,
+            globalTooltipCount: activeTooltips.length,
+            onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
+            closeAllButtonPosition: "top-center",
+            closeAllButtonVariant: "floating"
+          },
+          tooltip.id
+        )),
+        enableDraggableTooltips && activeTooltips.length > 1 && /* @__PURE__ */ jsx97(
+          CloseAllButton_default,
+          {
+            count: activeTooltips.length,
+            onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
+            position: "top-center",
+            variant: "floating"
+          }
+        ),
+        timeSeriesConfig && /* @__PURE__ */ jsx97(
+          Brush_default,
+          {
+            data,
+            startIndex,
+            endIndex,
+            onMouseDown: handleMouseDown,
+            brushRef,
+            xAxisKey: xAxisConfig.dataKey,
+            seriesOrder,
+            finalColors,
+            brushHeight: timeSeriesConfig.height,
+            brushColor: timeSeriesConfig.brushColor,
+            miniChartOpacity: timeSeriesConfig.miniChartOpacity,
+            showGrid,
+            gridColor,
+            margin: {
+              left: finalChartLeftMargin,
+              right: finalChartRightMargin
+            }
+          }
+        )
+      ]
     }
-  );
+  ) });
 };
 var Chart_default = Chart;
 
 // src/components/ui/charts/BarChart.tsx
-import { useState as useState43, useEffect as useEffect34, useCallback as useCallback18, useMemo as useMemo27 } from "react";
+import { useState as useState44, useEffect as useEffect35, useCallback as useCallback19, useMemo as useMemo27 } from "react";
 import {
   BarChart as RechartsBarChart,
-  Bar as Bar2,
+  Bar as Bar3,
   Rectangle as Rectangle2,
-  XAxis as XAxis2,
-  YAxis as YAxis2,
+  XAxis as XAxis3,
+  YAxis as YAxis3,
   CartesianGrid as CartesianGrid2,
   Tooltip as Tooltip2,
   Legend as Legend2,
   LabelList as LabelList2
 } from "recharts";
-import { jsx as jsx97, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs76 } from "react/jsx-runtime";
 var DEFAULT_COLORS3 = ["#55af7d", "#8e68ff", "#2273e1"];
 var BarChart = ({
   data,
@@ -17425,14 +17839,14 @@ var BarChart = ({
     return { xAxisConfig: xAxisConfig2, mapperConfig: mapperConfig2 };
   }, [data, xAxis, mapper, yAxis, autoDetect, labelMap]);
   const { xAxisConfig, mapperConfig } = smartConfig;
-  const [activeTooltips, setActiveTooltips] = useState43([]);
-  const [isDragging, setIsDragging] = useState43(null);
-  const [dragOffset, setDragOffset] = useState43({
+  const [activeTooltips, setActiveTooltips] = useState44([]);
+  const [isDragging, setIsDragging] = useState44(null);
+  const [dragOffset, setDragOffset] = useState44({
     x: 0,
     y: 0
   });
-  const [globalTooltipCount, setGlobalTooltipCount] = useState43(0);
-  const [alignmentGuides, setAlignmentGuides] = useState43([]);
+  const [globalTooltipCount, setGlobalTooltipCount] = useState44(0);
+  const [alignmentGuides, setAlignmentGuides] = useState44([]);
   const processedData = data.map((item) => ({
     ...item,
     name: String(item[xAxisConfig.dataKey] || "N/A")
@@ -17509,7 +17923,7 @@ var BarChart = ({
   const GUIDE_THRESHOLD2 = 60;
   const STRONG_SNAP_THRESHOLD2 = 35;
   const PRECISION_SNAP_THRESHOLD2 = 8;
-  const updateAlignmentGuides = useCallback18(
+  const updateAlignmentGuides = useCallback19(
     (draggedTooltipId, currentPosition) => {
       if (!isDragging) return;
       const getAllTooltips = () => {
@@ -17573,7 +17987,7 @@ var BarChart = ({
     },
     [isDragging, activeTooltips]
   );
-  const snapToGuides = useCallback18(
+  const snapToGuides = useCallback19(
     (position) => {
       const snappedPosition = { ...position };
       let hasSnapped = false;
@@ -17635,7 +18049,7 @@ var BarChart = ({
     setIsDragging(tooltipId);
     setDragOffset({ x: offsetX, y: offsetY });
   };
-  useEffect34(() => {
+  useEffect35(() => {
     let rafId;
     let lastMousePosition = { x: 0, y: 0 };
     const handleGlobalMouseMove = (e) => {
@@ -17693,7 +18107,7 @@ var BarChart = ({
     updateAlignmentGuides,
     snapToGuides
   ]);
-  useEffect34(() => {
+  useEffect35(() => {
     const handleCloseAllTooltips = () => {
       setActiveTooltips([]);
       setGlobalTooltipCount(0);
@@ -17703,7 +18117,7 @@ var BarChart = ({
       window.removeEventListener("closeAllTooltips", handleCloseAllTooltips);
     };
   }, []);
-  useEffect34(() => {
+  useEffect35(() => {
     const handleTooltipCountRequest = () => {
       window.dispatchEvent(
         new CustomEvent("tooltipCountResponse", {
@@ -17742,7 +18156,7 @@ var BarChart = ({
       );
     };
   }, [activeTooltips]);
-  useEffect34(() => {
+  useEffect35(() => {
     if (isDragging) return;
     let totalCount = 0;
     const handleCountResponse = (event) => {
@@ -17766,25 +18180,25 @@ var BarChart = ({
     label
   }) => {
     if (!active || !payload) return null;
-    return /* @__PURE__ */ jsxs75("div", { className: "bg-card border border-border rounded-lg p-3 shadow-lg", children: [
-      /* @__PURE__ */ jsx97("p", { className: "font-medium text-foreground mb-2", children: label }),
+    return /* @__PURE__ */ jsxs76("div", { className: "bg-card border border-border rounded-lg p-3 shadow-lg", children: [
+      /* @__PURE__ */ jsx98("p", { className: "font-medium text-foreground mb-2", children: label }),
       payload.map(
-        (entry, index) => /* @__PURE__ */ jsxs75("div", { className: "flex items-center gap-2 text-sm", children: [
-          /* @__PURE__ */ jsx97(
+        (entry, index) => /* @__PURE__ */ jsxs76("div", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx98(
             "div",
             {
               className: "w-3 h-3 rounded-sm",
               style: { backgroundColor: entry.color }
             }
           ),
-          /* @__PURE__ */ jsxs75("span", { className: "text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs76("span", { className: "text-muted-foreground", children: [
             entry.name,
             ":"
           ] }),
-          /* @__PURE__ */ jsx97("span", { className: "text-foreground font-medium", children: entry.value?.toLocaleString("pt-BR") })
+          /* @__PURE__ */ jsx98("span", { className: "text-foreground font-medium", children: entry.value?.toLocaleString("pt-BR") })
         ] }, index)
       ),
-      /* @__PURE__ */ jsx97("p", { className: "text-xs text-muted-foreground mt-1", children: "Clique para fixar este tooltip" })
+      /* @__PURE__ */ jsx98("p", { className: "text-xs text-muted-foreground mt-1", children: "Clique para fixar este tooltip" })
     ] });
   };
   const getTitleClassName = (position) => {
@@ -17798,7 +18212,7 @@ var BarChart = ({
         return `${baseClasses} text-left`;
     }
   };
-  return /* @__PURE__ */ jsxs75(
+  return /* @__PURE__ */ jsxs76(
     "div",
     {
       className: cn("rounded-lg bg-card p-4 relative", className),
@@ -17807,8 +18221,8 @@ var BarChart = ({
         maxWidth: "100%"
       },
       children: [
-        title && /* @__PURE__ */ jsx97("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ jsx97("h3", { className: getTitleClassName(titlePosition), children: title }) }),
-        /* @__PURE__ */ jsxs75(
+        title && /* @__PURE__ */ jsx98("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ jsx98("h3", { className: getTitleClassName(titlePosition), children: title }) }),
+        /* @__PURE__ */ jsxs76(
           RechartsBarChart,
           {
             data: processedData,
@@ -17817,7 +18231,7 @@ var BarChart = ({
             margin: resolveChartMargins(margins, chartMargins, showLabels),
             onClick: handleChartClick,
             children: [
-              showGrid && /* @__PURE__ */ jsx97(
+              showGrid && /* @__PURE__ */ jsx98(
                 CartesianGrid2,
                 {
                   strokeDasharray: "3 3",
@@ -17825,8 +18239,8 @@ var BarChart = ({
                   opacity: 0.5
                 }
               ),
-              /* @__PURE__ */ jsx97(
-                XAxis2,
+              /* @__PURE__ */ jsx98(
+                XAxis3,
                 {
                   dataKey: xAxisConfig.dataKey,
                   stroke: "hsl(var(--muted-foreground))",
@@ -17836,8 +18250,8 @@ var BarChart = ({
                   tickFormatter: xAxisConfig.valueFormatter
                 }
               ),
-              /* @__PURE__ */ jsx97(
-                YAxis2,
+              /* @__PURE__ */ jsx98(
+                YAxis3,
                 {
                   stroke: "hsl(var(--muted-foreground))",
                   fontSize: 12,
@@ -17848,14 +18262,14 @@ var BarChart = ({
                   tickCount: 6
                 }
               ),
-              showTooltip && /* @__PURE__ */ jsx97(
+              showTooltip && /* @__PURE__ */ jsx98(
                 Tooltip2,
                 {
-                  content: /* @__PURE__ */ jsx97(CustomTooltip, {}),
+                  content: /* @__PURE__ */ jsx98(CustomTooltip, {}),
                   cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
                 }
               ),
-              showLegend && /* @__PURE__ */ jsx97(
+              showLegend && /* @__PURE__ */ jsx98(
                 Legend2,
                 {
                   wrapperStyle: {
@@ -17866,8 +18280,8 @@ var BarChart = ({
               ),
               dataKeys.map((key) => {
                 const fieldConfig = mapperConfig[key];
-                return /* @__PURE__ */ jsx97(
-                  Bar2,
+                return /* @__PURE__ */ jsx98(
+                  Bar3,
                   {
                     dataKey: key,
                     name: fieldConfig?.label || key,
@@ -17875,7 +18289,7 @@ var BarChart = ({
                     radius: [4, 4, 0, 0],
                     onClick: handleBarClick,
                     style: { cursor: "pointer" },
-                    activeBar: /* @__PURE__ */ jsx97(
+                    activeBar: /* @__PURE__ */ jsx98(
                       Rectangle2,
                       {
                         fill: finalColors[key],
@@ -17884,7 +18298,7 @@ var BarChart = ({
                         opacity: 0.8
                       }
                     ),
-                    children: showLabels && /* @__PURE__ */ jsx97(
+                    children: showLabels && /* @__PURE__ */ jsx98(
                       LabelList2,
                       {
                         dataKey: key,
@@ -17921,8 +18335,8 @@ var BarChart = ({
             guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
             guide.targetTooltip.top + guide.targetTooltip.height / 2
           );
-          return /* @__PURE__ */ jsxs75("div", { children: [
-            /* @__PURE__ */ jsx97(
+          return /* @__PURE__ */ jsxs76("div", { children: [
+            /* @__PURE__ */ jsx98(
               "div",
               {
                 className: "fixed pointer-events-none z-30",
@@ -17941,7 +18355,7 @@ var BarChart = ({
                 }
               }
             ),
-            /* @__PURE__ */ jsx97(
+            /* @__PURE__ */ jsx98(
               "div",
               {
                 className: "fixed pointer-events-none z-31",
@@ -17957,7 +18371,7 @@ var BarChart = ({
                 }
               }
             ),
-            /* @__PURE__ */ jsx97(
+            /* @__PURE__ */ jsx98(
               "div",
               {
                 className: "fixed pointer-events-none z-31",
@@ -17975,7 +18389,7 @@ var BarChart = ({
             )
           ] }, index);
         }),
-        activeTooltips.map((tooltip, index) => /* @__PURE__ */ jsx97(
+        activeTooltips.map((tooltip, index) => /* @__PURE__ */ jsx98(
           DraggableTooltip_default,
           {
             id: tooltip.id,
@@ -18008,18 +18422,18 @@ var BarChart = ({
 var BarChart_default = BarChart;
 
 // src/components/ui/charts/LineChart.tsx
-import { useState as useState44, useEffect as useEffect35, useCallback as useCallback19, useMemo as useMemo28 } from "react";
+import { useState as useState45, useEffect as useEffect36, useCallback as useCallback20, useMemo as useMemo28 } from "react";
 import {
   LineChart as RechartsLineChart,
-  Line as Line2,
-  XAxis as XAxis3,
-  YAxis as YAxis3,
+  Line as Line3,
+  XAxis as XAxis4,
+  YAxis as YAxis4,
   CartesianGrid as CartesianGrid3,
   Tooltip as Tooltip3,
   Legend as Legend3,
   LabelList as LabelList3
 } from "recharts";
-import { jsx as jsx98, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs77 } from "react/jsx-runtime";
 var defaultData = [
   { name: "A", value: 100 },
   { name: "B", value: 200 },
@@ -18051,14 +18465,14 @@ var CustomLineChart = ({
     containerPaddingLeft,
     16
   );
-  const [activeTooltips, setActiveTooltips] = useState44([]);
-  const [isDragging, setIsDragging] = useState44(null);
-  const [dragOffset, setDragOffset] = useState44({
+  const [activeTooltips, setActiveTooltips] = useState45([]);
+  const [isDragging, setIsDragging] = useState45(null);
+  const [dragOffset, setDragOffset] = useState45({
     x: 0,
     y: 0
   });
-  const [globalTooltipCount, setGlobalTooltipCount] = useState44(0);
-  const [alignmentGuides, setAlignmentGuides] = useState44([]);
+  const [globalTooltipCount, setGlobalTooltipCount] = useState45(0);
+  const [alignmentGuides, setAlignmentGuides] = useState45([]);
   const generateColors = (dataKeys2) => {
     const colorMap = {};
     const allColors = generateAdditionalColors(colors2, dataKeys2.length);
@@ -18118,7 +18532,7 @@ var CustomLineChart = ({
         setActiveTooltips((prev) => [...prev, newTooltip]);
       }
     };
-    return /* @__PURE__ */ jsx98(
+    return /* @__PURE__ */ jsx99(
       "circle",
       {
         cx,
@@ -18160,10 +18574,10 @@ var CustomLineChart = ({
   const handleChartBackgroundClick = () => {
     setActiveTooltips([]);
   };
-  const handleCloseAllTooltips = useCallback19(() => {
+  const handleCloseAllTooltips = useCallback20(() => {
     window.dispatchEvent(new CustomEvent("closeAllTooltips"));
   }, []);
-  const updateAlignmentGuides = useCallback19(
+  const updateAlignmentGuides = useCallback20(
     (draggedTooltipId, draggedPosition) => {
       const SNAP_THRESHOLD = 15;
       const draggedTooltip = activeTooltips.find(
@@ -18244,7 +18658,7 @@ var CustomLineChart = ({
     },
     [activeTooltips]
   );
-  const snapToGuides = useCallback19(
+  const snapToGuides = useCallback20(
     (position) => {
       const SNAP_DISTANCE = 10;
       const snappedPosition = { ...position };
@@ -18272,7 +18686,7 @@ var CustomLineChart = ({
     setIsDragging(tooltipId);
     setDragOffset({ x: offsetX, y: offsetY });
   };
-  useEffect35(() => {
+  useEffect36(() => {
     let rafId;
     let lastMousePosition = { x: 0, y: 0 };
     const handleGlobalMouseMove = (e) => {
@@ -18319,7 +18733,7 @@ var CustomLineChart = ({
     updateAlignmentGuides,
     snapToGuides
   ]);
-  useEffect35(() => {
+  useEffect36(() => {
     const handleCloseAllTooltips2 = () => {
       setActiveTooltips([]);
       setGlobalTooltipCount(0);
@@ -18329,7 +18743,7 @@ var CustomLineChart = ({
       window.removeEventListener("closeAllTooltips", handleCloseAllTooltips2);
     };
   }, []);
-  useEffect35(() => {
+  useEffect36(() => {
     const handleTooltipCountRequest = () => {
       window.dispatchEvent(
         new CustomEvent("tooltipCountResponse", {
@@ -18373,7 +18787,7 @@ var CustomLineChart = ({
       );
     };
   }, [activeTooltips]);
-  useEffect35(() => {
+  useEffect36(() => {
     if (isDragging) return;
     let totalCount = 0;
     const handleCountResponse = (event) => {
@@ -18401,7 +18815,7 @@ var CustomLineChart = ({
         return "text-left";
     }
   };
-  return /* @__PURE__ */ jsx98("div", { className: cn("relative", className), children: /* @__PURE__ */ jsxs76(
+  return /* @__PURE__ */ jsx99("div", { className: cn("relative", className), children: /* @__PURE__ */ jsxs77(
     "div",
     {
       className: "rounded-lg bg-card p-4 relative border border-border",
@@ -18411,8 +18825,8 @@ var CustomLineChart = ({
       },
       onClick: handleChartBackgroundClick,
       children: [
-        title && /* @__PURE__ */ jsx98("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ jsx98("div", { className: cn("mb-4", getTitleClass()), children: /* @__PURE__ */ jsx98("h3", { className: "text-lg font-semibold text-foreground", children: title }) }) }),
-        /* @__PURE__ */ jsxs76(
+        title && /* @__PURE__ */ jsx99("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ jsx99("div", { className: cn("mb-4", getTitleClass()), children: /* @__PURE__ */ jsx99("h3", { className: "text-lg font-semibold text-foreground", children: title }) }) }),
+        /* @__PURE__ */ jsxs77(
           RechartsLineChart,
           {
             data,
@@ -18421,7 +18835,7 @@ var CustomLineChart = ({
             margin: resolveChartMargins(margins, chartMargins, showLabels),
             onClick: handleChartClick,
             children: [
-              showGrid && /* @__PURE__ */ jsx98(
+              showGrid && /* @__PURE__ */ jsx99(
                 CartesianGrid3,
                 {
                   strokeDasharray: "3 3",
@@ -18429,16 +18843,16 @@ var CustomLineChart = ({
                   opacity: 0.3
                 }
               ),
-              /* @__PURE__ */ jsx98(
-                XAxis3,
+              /* @__PURE__ */ jsx99(
+                XAxis4,
                 {
                   dataKey: "name",
                   className: "fill-muted-foreground text-xs",
                   fontSize: 12
                 }
               ),
-              /* @__PURE__ */ jsx98(
-                YAxis3,
+              /* @__PURE__ */ jsx99(
+                YAxis4,
                 {
                   className: "fill-muted-foreground text-xs",
                   fontSize: 12,
@@ -18447,8 +18861,8 @@ var CustomLineChart = ({
                   tickCount: 6
                 }
               ),
-              showTooltip && /* @__PURE__ */ jsx98(Tooltip3, { content: () => null }),
-              showLegend && /* @__PURE__ */ jsx98(
+              showTooltip && /* @__PURE__ */ jsx99(Tooltip3, { content: () => null }),
+              showLegend && /* @__PURE__ */ jsx99(
                 Legend3,
                 {
                   wrapperStyle: {
@@ -18457,16 +18871,16 @@ var CustomLineChart = ({
                   }
                 }
               ),
-              dataKeys.map((key) => /* @__PURE__ */ jsx98(
-                Line2,
+              dataKeys.map((key) => /* @__PURE__ */ jsx99(
+                Line3,
                 {
                   type: "monotone",
                   dataKey: key,
                   stroke: finalColors[key],
                   strokeWidth,
                   dot: showDots ? { r: 4, cursor: "pointer" } : false,
-                  activeDot: (props) => /* @__PURE__ */ jsx98(ClickableDot, { ...props, dataKey: key }),
-                  children: showLabels && /* @__PURE__ */ jsx98(
+                  activeDot: (props) => /* @__PURE__ */ jsx99(ClickableDot, { ...props, dataKey: key }),
+                  children: showLabels && /* @__PURE__ */ jsx99(
                     LabelList3,
                     {
                       dataKey: key,
@@ -18503,8 +18917,8 @@ var CustomLineChart = ({
             guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
             guide.targetTooltip.top + guide.targetTooltip.height / 2
           );
-          return /* @__PURE__ */ jsxs76("div", { children: [
-            /* @__PURE__ */ jsx98(
+          return /* @__PURE__ */ jsxs77("div", { children: [
+            /* @__PURE__ */ jsx99(
               "div",
               {
                 className: "fixed pointer-events-none z-30",
@@ -18523,7 +18937,7 @@ var CustomLineChart = ({
                 }
               }
             ),
-            /* @__PURE__ */ jsx98(
+            /* @__PURE__ */ jsx99(
               "div",
               {
                 className: "fixed pointer-events-none z-31",
@@ -18539,7 +18953,7 @@ var CustomLineChart = ({
                 }
               }
             ),
-            /* @__PURE__ */ jsx98(
+            /* @__PURE__ */ jsx99(
               "div",
               {
                 className: "fixed pointer-events-none z-31",
@@ -18557,7 +18971,7 @@ var CustomLineChart = ({
             )
           ] }, index);
         }),
-        activeTooltips.map((tooltip, index) => /* @__PURE__ */ jsx98(
+        activeTooltips.map((tooltip, index) => /* @__PURE__ */ jsx99(
           DraggableTooltip_default,
           {
             id: tooltip.id,
@@ -18592,11 +19006,11 @@ import {
   PieChart as RechartsPieChart,
   Pie,
   Cell,
-  ResponsiveContainer as ResponsiveContainer2,
+  ResponsiveContainer as ResponsiveContainer3,
   Tooltip as Tooltip4,
   Legend as Legend4
 } from "recharts";
-import { jsx as jsx99, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx100, jsxs as jsxs78 } from "react/jsx-runtime";
 var defaultData2 = [
   { name: "Vendas", value: 4e3 },
   { name: "Marketing", value: 3e3 },
@@ -18634,7 +19048,7 @@ var renderCustomizedLabel = ({
   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__ */ jsx99(
+  return /* @__PURE__ */ jsx100(
     "text",
     {
       x,
@@ -18663,8 +19077,8 @@ var CustomPieChart = ({
   centerY = "50%"
 }) => {
   const finalColors = colors2 || DEFAULT_COLORS5;
-  return /* @__PURE__ */ jsx99("div", { className: cn("w-full rounded-lg bg-card p-4", className), children: /* @__PURE__ */ jsx99(ResponsiveContainer2, { width, height, children: /* @__PURE__ */ jsxs77(RechartsPieChart, { children: [
-    /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsx100("div", { className: cn("w-full rounded-lg bg-card p-4", className), children: /* @__PURE__ */ jsx100(ResponsiveContainer3, { width, height, children: /* @__PURE__ */ jsxs78(RechartsPieChart, { children: [
+    /* @__PURE__ */ jsx100(
       Pie,
       {
         data,
@@ -18676,7 +19090,7 @@ var CustomPieChart = ({
         innerRadius,
         fill: "#8884d8",
         dataKey: "value",
-        children: data.map((entry, index) => /* @__PURE__ */ jsx99(
+        children: data.map((entry, index) => /* @__PURE__ */ jsx100(
           Cell,
           {
             fill: finalColors[index % finalColors.length]
@@ -18685,7 +19099,7 @@ var CustomPieChart = ({
         ))
       }
     ),
-    showTooltip && /* @__PURE__ */ jsx99(
+    showTooltip && /* @__PURE__ */ jsx100(
       Tooltip4,
       {
         contentStyle: {
@@ -18696,96 +19110,154 @@ var CustomPieChart = ({
         }
       }
     ),
-    showLegend && /* @__PURE__ */ jsx99(Legend4, {})
+    showLegend && /* @__PURE__ */ jsx100(Legend4, {})
   ] }) }) });
 };
 var PieChart_default = CustomPieChart;
 
+// src/components/ui/charts/TimeSeries.tsx
+import { jsx as jsx101 } from "react/jsx-runtime";
+var TimeSeries = ({
+  data,
+  xAxis,
+  chartHeight = 350,
+  height,
+  brushHeight,
+  className,
+  start,
+  end,
+  defaultStartIndex,
+  defaultEndIndex,
+  onRangeChange,
+  brushColor,
+  brushStroke,
+  miniChartOpacity = 0.2,
+  ...rest
+}) => {
+  const brushHeightValue = brushHeight ?? height ?? 60;
+  const startIndex = defaultStartIndex ?? start ?? 0;
+  const endIndex = defaultEndIndex ?? end;
+  return /* @__PURE__ */ jsx101("div", { className: cn("w-full flex flex-col", className), children: /* @__PURE__ */ jsx101(
+    Chart_default,
+    {
+      ...rest,
+      data,
+      xAxis,
+      height: chartHeight + brushHeightValue + 40,
+      timeSeries: {
+        start: startIndex,
+        end: endIndex,
+        onRangeChange,
+        height: brushHeightValue,
+        brushColor,
+        brushStroke,
+        miniChartOpacity
+      }
+    }
+  ) });
+};
+var TimeSeries_default = TimeSeries;
+
 // src/components/ui/LeaderBoard.tsx
 import { CaretUpDownIcon as CaretUpDownIcon3 } from "@phosphor-icons/react";
-import { useState as useState45 } from "react";
+import { useState as useState46 } from "react";
 import { motion as motion22 } from "framer-motion";
-import { jsx as jsx100, jsxs as jsxs78 } from "react/jsx-runtime";
+import { jsx as jsx102, jsxs as jsxs79 } from "react/jsx-runtime";
 function Leaderboard({
   items,
   order: initialOrder = "desc",
   title = "LeaderBoard",
   className,
-  isLoading = false
+  isLoading = false,
+  legend
 }) {
-  const [order, setOrder] = useState45(initialOrder);
+  const [order, setOrder] = useState46(initialOrder);
   const mockData = [
-    { name: "Ana", percentage: 92 },
-    { name: "Bruno", percentage: 81 },
-    { name: "Carla", percentage: 74 },
-    { name: "Daniel", percentage: 68 },
-    { name: "Eduardo", percentage: 55 },
-    { name: "Fernanda", percentage: 44 },
-    { name: "Gabriela", percentage: 33 },
-    { name: "Heitor", percentage: 28 },
-    { name: "Isabela", percentage: 22 },
-    { name: "Jo\xE3o", percentage: 18 }
+    { name: "Ana", value: 92 },
+    { name: "Bruno", value: 81 },
+    { name: "Carla", value: 74 },
+    { name: "Daniel", value: 68 },
+    { name: "Eduardo", value: 55 },
+    { name: "Fernanda", value: 44 },
+    { name: "Gabriela", value: 33 },
+    { name: "Heitor", value: 28 },
+    { name: "Isabela", value: 22 },
+    { name: "Jo\xE3o", value: 18 }
   ];
   const data = items ?? mockData;
-  const sortedData = [...data].sort(
-    (a, b) => order === "desc" ? b.percentage - a.percentage : a.percentage - b.percentage
-  );
-  const getBadgeColor = (pct) => {
-    if (pct >= 75) return "red";
-    if (pct >= 25) return "yellow";
+  const sortedData = [...data].sort((a, b) => {
+    const aValue = typeof a.value === "string" ? parseFloat(a.value) || a.value : a.value;
+    const bValue = typeof b.value === "string" ? parseFloat(b.value) || b.value : b.value;
+    if (typeof aValue === "number" && typeof bValue === "number") {
+      return order === "desc" ? bValue - aValue : aValue - bValue;
+    }
+    if (typeof aValue === "string" && typeof bValue === "string") {
+      return order === "desc" ? bValue.localeCompare(aValue) : aValue.localeCompare(bValue);
+    }
+    if (typeof aValue === "number") return order === "desc" ? -1 : 1;
+    return order === "desc" ? 1 : -1;
+  });
+  const getBadgeColor = (value) => {
+    const numValue = typeof value === "string" ? parseFloat(value) : value;
+    if (isNaN(numValue)) return "green";
+    if (numValue >= 75) return "red";
+    if (numValue >= 25) return "yellow";
     return "green";
   };
-  return /* @__PURE__ */ jsxs78(
+  return /* @__PURE__ */ jsxs79(
     "div",
     {
       className: `border rounded-xl flex flex-col max-h-80 w-96 ${className}`,
       children: [
-        /* @__PURE__ */ jsxs78("div", { className: "flex items-center justify-between p-4 border-b flex-shrink-0 gap-3", children: [
-          /* @__PURE__ */ jsx100("h2", { className: "text-lg font-semibold px-1", children: title }),
-          /* @__PURE__ */ jsx100(
+        /* @__PURE__ */ jsxs79("div", { className: "flex items-center justify-between py-2 px-4 border-b flex-shrink-0 gap-3", children: [
+          /* @__PURE__ */ jsx102("h2", { className: "text-lg font-semibold px-1", children: title }),
+          /* @__PURE__ */ jsx102(
             ButtonBase,
             {
               size: "icon",
               variant: "ghost",
               onClick: () => setOrder(order === "desc" ? "asc" : "desc"),
               disabled: isLoading || sortedData.length === 0,
-              children: /* @__PURE__ */ jsx100(CaretUpDownIcon3, {})
+              children: /* @__PURE__ */ jsx102(CaretUpDownIcon3, {})
             }
           )
         ] }),
-        /* @__PURE__ */ jsx100("div", { className: "overflow-y-auto flex-1", children: isLoading ? /* @__PURE__ */ jsx100("div", { className: "p-4 space-y-3", children: Array.from({ length: 5 }).map((_, idx) => /* @__PURE__ */ jsxs78("div", { className: "flex items-center justify-between p-1", children: [
-          /* @__PURE__ */ jsxs78("div", { className: "flex items-center gap-3 flex-1", children: [
-            /* @__PURE__ */ jsx100(SkeletonBase, { className: "w-8 h-8 rounded-full" }),
-            /* @__PURE__ */ jsx100(SkeletonBase, { className: "h-4 w-36" })
+        /* @__PURE__ */ jsx102("div", { className: "overflow-y-auto flex-1", children: isLoading ? /* @__PURE__ */ jsx102("div", { className: "p-4 space-y-3", children: Array.from({ length: 5 }).map((_, idx) => /* @__PURE__ */ jsxs79("div", { className: "flex items-center justify-between p-1", children: [
+          /* @__PURE__ */ jsxs79("div", { className: "flex items-center gap-3 flex-1", children: [
+            /* @__PURE__ */ jsx102(SkeletonBase, { className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ jsx102(SkeletonBase, { className: "h-4 w-36" })
           ] }),
-          /* @__PURE__ */ jsx100(SkeletonBase, { className: "h-6 w-12 rounded-full" })
-        ] }, idx)) }) : sortedData.length === 0 ? /* @__PURE__ */ jsx100("div", { className: "flex items-center justify-center h-full py-12", children: /* @__PURE__ */ jsx100("p", { className: "text-muted-foreground text-sm", children: "Sem dados dispon\xEDveis" }) }) : /* @__PURE__ */ jsx100("ul", { children: sortedData.map((item, idx) => /* @__PURE__ */ jsx100(
-          motion22.span,
-          {
-            initial: { opacity: 0, y: 10 },
-            animate: { opacity: 1, y: 0 },
-            transition: { delay: idx * 5e-3 },
-            children: /* @__PURE__ */ jsxs78("li", { className: "flex items-center justify-between py-3 border-b last:border-b-0 hover:bg-muted transition-colors px-4", children: [
-              /* @__PURE__ */ jsxs78("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ jsx100("span", { className: "text-sm text-gray-400 w-6 h-6 border rounded-full text-center bg-muted/50", children: idx + 1 }),
-                /* @__PURE__ */ jsx100("span", { className: "font-medium", children: item.name })
-              ] }),
-              /* @__PURE__ */ jsxs78(
-                Badge,
-                {
-                  color: getBadgeColor(item.percentage),
-                  size: "md",
-                  className: "font-bold",
-                  children: [
-                    item.percentage,
-                    "%"
-                  ]
-                }
-              )
-            ] })
-          },
-          idx
-        )) }) })
+          /* @__PURE__ */ jsx102(SkeletonBase, { className: "h-6 w-12 rounded-full" })
+        ] }, idx)) }) : sortedData.length === 0 ? /* @__PURE__ */ jsx102("div", { className: "flex items-center justify-center h-full py-12", children: /* @__PURE__ */ jsx102("p", { className: "text-muted-foreground text-sm", children: "Sem dados dispon\xEDveis" }) }) : /* @__PURE__ */ jsxs79("div", { children: [
+          /* @__PURE__ */ jsxs79("div", { className: "flex items-center justify-between py-2.5 px-4 border-b flex-shrink-0 gap-3 sticky top-0 bg-background", children: [
+            /* @__PURE__ */ jsx102("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider pl-1", children: legend?.[0]?.[0] ?? "Participante" }),
+            /* @__PURE__ */ jsx102("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: legend?.[0]?.[1] ?? "Pontua\xE7\xE3o" })
+          ] }),
+          /* @__PURE__ */ jsx102("ul", { children: sortedData.map((item, idx) => /* @__PURE__ */ jsx102(
+            motion22.span,
+            {
+              initial: { opacity: 0, y: 10 },
+              animate: { opacity: 1, y: 0 },
+              transition: { delay: idx * 5e-3 },
+              children: /* @__PURE__ */ jsxs79("li", { className: "flex items-center justify-between py-3 border-b last:border-b-0 hover:bg-muted transition-colors px-4", children: [
+                /* @__PURE__ */ jsxs79("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsx102("span", { className: "text-sm text-gray-400 w-6 h-6 border rounded-full text-center bg-muted/50", children: idx + 1 }),
+                  /* @__PURE__ */ jsx102("span", { className: "font-medium", children: item.name })
+                ] }),
+                /* @__PURE__ */ jsx102(
+                  Badge,
+                  {
+                    color: getBadgeColor(item.value),
+                    size: "md",
+                    className: "font-bold",
+                    children: item.value
+                  }
+                )
+              ] })
+            },
+            idx
+          )) })
+        ] }) })
       ]
     }
   );
@@ -18821,6 +19293,7 @@ export {
   BreadcrumbListBase,
   BreadcrumbPageBase,
   BreadcrumbSeparatorBase,
+  Brush_default as Brush,
   ButtonBase,
   ButtonGroupBase,
   CalendarBase,
@@ -19074,6 +19547,7 @@ export {
   ThemeProviderBase,
   TimePicker,
   TimePickerInput,
+  TimeSeries_default as TimeSeries,
   Toaster,
   TooltipBase,
   TooltipContentBase,
@@ -19169,5 +19643,6 @@ export {
   useEventVisibilityAgenda,
   useIsMobile,
   useTheme,
+  useTimeSeriesRange,
   visualForItem
 };