@mlw-packages/react-components 1.8.5 → 1.8.7

package/dist/index.js

@@ -515,6 +515,7 @@ __export(index_exports, {
   BreadcrumbListBase: () => BreadcrumbListBase,
   BreadcrumbPageBase: () => BreadcrumbPageBase,
   BreadcrumbSeparatorBase: () => BreadcrumbSeparatorBase,
+  Brush: () => Brush_default,
   ButtonBase: () => ButtonBase,
   ButtonGroupBase: () => ButtonGroupBase,
   CalendarBase: () => CalendarBase,
@@ -768,6 +769,7 @@ __export(index_exports, {
   ThemeProviderBase: () => ThemeProviderBase,
   TimePicker: () => TimePicker,
   TimePickerInput: () => TimePickerInput,
+  TimeSeries: () => TimeSeries_default,
   Toaster: () => Toaster,
   TooltipBase: () => TooltipBase,
   TooltipContentBase: () => TooltipContentBase,
@@ -863,6 +865,7 @@ __export(index_exports, {
   useEventVisibilityAgenda: () => useEventVisibilityAgenda,
   useIsMobile: () => useIsMobile,
   useTheme: () => useTheme,
+  useTimeSeriesRange: () => useTimeSeriesRange,
   visualForItem: () => visualForItem
 });
 module.exports = __toCommonJS(index_exports);
@@ -1555,45 +1558,55 @@ function SkeletonBase({
 var import_react2 = require("@phosphor-icons/react");
 var import_sonner = require("sonner");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var iconBaseClass = "w-5 h-auto";
+var iconBaseClass = "w-5 h-5";
 var Toaster = ({ testId, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_sonner.Toaster,
     {
       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-
+            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
           `
         }
       },
@@ -1603,24 +1616,52 @@ var Toaster = ({ testId, ...props }) => {
   );
 };
 var toast = {
-  success: (message) => import_sonner.toast.success(message, {
-    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react2.CheckCircleIcon, { className: `${iconBaseClass} text-green-600`, weight: "fill" }),
+  success: (message, description) => import_sonner.toast.success(message, {
+    description,
+    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react2.CheckCircleIcon,
+      {
+        className: `${iconBaseClass} text-green-600`,
+        weight: "fill"
+      }
+    ),
     className: "sonner-success"
   }),
-  error: (message) => import_sonner.toast.error(message, {
-    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react2.XCircleIcon, { className: `${iconBaseClass} text-red-600`, weight: "fill" }),
+  error: (message, description) => import_sonner.toast.error(message, {
+    description,
+    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react2.XCircleIcon,
+      {
+        className: `${iconBaseClass} text-red-600`,
+        weight: "fill"
+      }
+    ),
     className: "sonner-error"
   }),
-  warning: (message) => import_sonner.toast.warning(message, {
-    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react2.WarningIcon, { className: `${iconBaseClass} text-yellow-600`, weight: "fill" }),
-    className: "sonner-WarningIcon"
+  warning: (message, description) => import_sonner.toast.warning(message, {
+    description,
+    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react2.WarningIcon,
+      {
+        className: `${iconBaseClass} text-yellow-600`,
+        weight: "fill"
+      }
+    ),
+    className: "sonner-warning"
   }),
-  info: (message) => import_sonner.toast.info(message, {
+  info: (message, description) => import_sonner.toast.info(message, {
+    description,
     icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react2.InfoIcon, { className: `${iconBaseClass} text-blue-600`, weight: "fill" }),
-    className: "sonner-InfoIcon"
+    className: "sonner-info"
   }),
-  loading: (message) => (0, import_sonner.toast)(message, {
-    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react2.SpinnerIcon, { className: `${iconBaseClass} animate-spin text-neutral-500`, weight: "fill" }),
+  loading: (message, description) => (0, import_sonner.toast)(message, {
+    description,
+    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react2.CircleNotchIcon,
+      {
+        className: `${iconBaseClass} animate-spin text-gray-600`
+      }
+    ),
     className: "sonner-loading"
   })
 };
@@ -1768,12 +1809,21 @@ var TooltipTriggerBase = React7.forwardRef(({ children, onPointerDown, ...props
     },
     [onPointerDown]
   );
+  const onClick = React7.useCallback(
+    (e) => {
+      if (onPointerDown) {
+        onPointerDown(e);
+      }
+    },
+    [onPointerDown]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     TooltipPrimitive.Trigger,
     {
       ref,
       tabIndex: -1,
       onPointerDown: onPointerDown ? handlePointerDown : void 0,
+      onClick,
       "data-tooltip-trigger": true,
       "aria-describedby": "tooltip-content",
       ...props,
@@ -3139,8 +3189,7 @@ function MultiCombobox({
               )
             ]
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ErrorMessage_default, { error })
+        )
       ]
     }
   );
@@ -7953,7 +8002,7 @@ 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 opacity-60 aria-selected:bg-muted/50 aria-selected:text-foreground",
-            disabled: "text-muted-foreground cursor-not-allowed line-through decoration-2",
+            disabled: "text-muted-foreground cursor-not-allowed",
             range_middle: "aria-selected:bg-muted aria-selected:text-foreground",
             hidden: "invisible",
             ...classNames
@@ -14205,6 +14254,11 @@ function WeekView({
 // src/components/ui/selects/AvatarCombobox.tsx
 var import_react84 = require("react");
 var import_react85 = require("@phosphor-icons/react");
+
+// public/pwa-512x512.png
+var pwa_512x512_default = "./pwa-512x512-4NJPUGCI.png";
+
+// src/components/ui/selects/AvatarCombobox.tsx
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var DEFAULT_COLORS = [
   "bg-purple-100 text-purple-700",
@@ -14253,10 +14307,14 @@ function AvatarCombobox({
   const allItems = items || (groupItems ? Object.values(groupItems).flat() : []);
   const selectedItem = allItems.find((item) => item.value === selected);
   const renderItem = (item) => {
-    const avatarContent = item.avatar ?? item.label.charAt(0).toUpperCase();
-    const colorClass = item.avatarClassName ?? getColor(item.value, colors2);
+    let avatarContent;
+    let colorClass;
+    if (!item.img) {
+      avatarContent = item.avatar ?? item.label.charAt(0).toUpperCase();
+      colorClass = item.avatarClassName ?? getColor(item.value, colors2);
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Square, { className: colorClass, children: avatarContent }),
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Square, { className: colorClass, children: !avatarContent ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("img", { src: pwa_512x512_default }) : avatarContent }),
       /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "truncate", children: item.label })
     ] });
   };
@@ -14592,13 +14650,13 @@ function MultiSelect({
 }
 
 // src/components/ui/charts/Chart.tsx
-var import_react96 = require("react");
-var import_recharts = require("recharts");
+var import_react97 = require("react");
+var import_recharts2 = require("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) => {
@@ -16153,8 +16211,205 @@ var TooltipSimple = ({
 };
 var TooltipSimple_default = TooltipSimple;
 
-// src/components/ui/charts/utils/pillLabelRenderer.tsx
+// src/components/ui/charts/components/Brush.tsx
+var import_recharts = require("recharts");
 var import_jsx_runtime94 = require("react/jsx-runtime");
+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__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "w-full px-8 pb-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+      "div",
+      {
+        className: "relative rounded-md border bg-muted/5 shadow-inner",
+        style: { height: brushHeight },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+            "div",
+            {
+              className: "absolute inset-0 pointer-events-none rounded-md",
+              style: { opacity: miniChartOpacity },
+              children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: brushHeight, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+                import_recharts.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__ */ (0, import_jsx_runtime94.jsx)(import_recharts.XAxis, { dataKey: xAxisKey, hide: true }),
+                    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_recharts.YAxis, { yAxisId: "left", hide: true }),
+                    seriesOrder.map((s) => {
+                      const key = s.key;
+                      const color = finalColors[key];
+                      if (s.type === "bar") {
+                        return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                          import_recharts.Bar,
+                          {
+                            dataKey: key,
+                            yAxisId: "left",
+                            fill: color,
+                            radius: [2, 2, 0, 0]
+                          },
+                          `brush-bar-${key}`
+                        );
+                      }
+                      if (s.type === "line") {
+                        return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                          import_recharts.Line,
+                          {
+                            type: "monotone",
+                            dataKey: key,
+                            yAxisId: "left",
+                            stroke: color,
+                            strokeWidth: 1.5,
+                            dot: false
+                          },
+                          `brush-line-${key}`
+                        );
+                      }
+                      if (s.type === "area") {
+                        return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                          import_recharts.Area,
+                          {
+                            type: "monotone",
+                            dataKey: key,
+                            yAxisId: "left",
+                            stroke: color,
+                            fill: `url(#gradient-${key})`,
+                            strokeWidth: 1.5
+                          },
+                          `brush-area-${key}`
+                        );
+                      }
+                      return null;
+                    })
+                  ]
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+            "div",
+            {
+              ref: brushRef,
+              className: "absolute inset-0 cursor-move rounded-md",
+              style: { userSelect: "none" },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                  "div",
+                  {
+                    className: "absolute top-0 bottom-0 left-0 bg-background/80 backdrop-blur-[1px] pointer-events-none rounded-l-md border-r border-border/50",
+                    style: {
+                      width: `${startIndex / (dataLength - 1) * 100}%`
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                  "div",
+                  {
+                    className: "absolute top-0 bottom-0 right-0 bg-background/80 backdrop-blur-[1px] pointer-events-none rounded-r-md border-l border-border/50",
+                    style: {
+                      width: `${(dataLength - 1 - endIndex) / (dataLength - 1) * 100}%`
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+                  "div",
+                  {
+                    className: "absolute top-0 bottom-0 border-x-2 border-y border-primary/50 cursor-move group hover:bg-primary/5 rounded-md",
+                    style: {
+                      left: `${startIndex / (dataLength - 1) * 100}%`,
+                      right: `${(dataLength - 1 - endIndex) / (dataLength - 1) * 100}%`,
+                      backgroundColor: "transparent"
+                    },
+                    onMouseDown: (e) => onMouseDown(e, "middle"),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                        "div",
+                        {
+                          className: "absolute top-1/2 -translate-y-1/2 -left-3.5 w-7 h-12 flex items-center justify-center cursor-ew-resize group/handle",
+                          onMouseDown: (e) => {
+                            e.stopPropagation();
+                            onMouseDown(e, "start");
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                            "div",
+                            {
+                              className: "w-1.5 h-6 rounded-sm flex flex-col items-center justify-center gap-1 border border-primary/20",
+                              style: {
+                                backgroundColor: brushColor ?? "hsl(var(--primary))"
+                              }
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                        "div",
+                        {
+                          className: "absolute top-1/2 -translate-y-1/2 -right-3.5 w-7 h-12 flex items-center justify-center cursor-ew-resize group/handle",
+                          onMouseDown: (e) => {
+                            e.stopPropagation();
+                            onMouseDown(e, "end");
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                            "div",
+                            {
+                              className: "w-1.5 h-6 rounded-sm flex flex-col items-center justify-center gap-1 border border-primary/20",
+                              style: {
+                                backgroundColor: brushColor ?? "hsl(var(--primary))"
+                              }
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex justify-between items-center mt-2 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("span", { children: [
+        data[startIndex]?.[xAxisKey],
+        " - ",
+        data[endIndex]?.[xAxisKey]
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("span", { children: [
+        endIndex - startIndex + 1,
+        " de ",
+        dataLength,
+        " per\xEDodos"
+      ] })
+    ] })
+  ] });
+};
+var Brush_default = Brush;
+
+// src/components/ui/charts/utils/pillLabelRenderer.tsx
+var import_jsx_runtime95 = require("react/jsx-runtime");
 var formatCompactNumber = (value) => {
   const isNegative = value < 0;
   const absValue = Math.abs(value);
@@ -16245,8 +16500,8 @@ var renderPillLabel = (color, variant, valueFormatter2) => {
     } else {
       textColor = "#374151";
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("g", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("g", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         "rect",
         {
           x: rectX,
@@ -16259,7 +16514,7 @@ var renderPillLabel = (color, variant, valueFormatter2) => {
           strokeWidth: rectStroke ? 1 : 0
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         "text",
         {
           x: textX,
@@ -16330,7 +16585,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__ */ (0, import_jsx_runtime94.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
       "text",
       {
         x: centerX,
@@ -16349,7 +16604,7 @@ var renderInsideBarLabel = (color, valueFormatter2) => {
 
 // src/components/ui/charts/NoData.tsx
 var import_framer_motion21 = require("framer-motion");
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 var ChartBar = ({ x, y, w, h, i, loading }) => {
   const baseY = y - h;
   const d = i * 0.08;
@@ -16360,8 +16615,8 @@ var ChartBar = ({ x, y, w, h, i, loading }) => {
     ease: "easeInOut",
     delay: d
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       import_framer_motion21.motion.rect,
       {
         x,
@@ -16376,7 +16631,7 @@ var ChartBar = ({ x, y, w, h, i, loading }) => {
         style: { transformBox: "fill-box", originY: 1 }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       import_framer_motion21.motion.rect,
       {
         x,
@@ -16392,7 +16647,7 @@ var ChartBar = ({ x, y, w, h, i, loading }) => {
         style: { transformBox: "fill-box", originY: 1 }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       import_framer_motion21.motion.line,
       {
         x1: x + w / 2,
@@ -16426,7 +16681,7 @@ var NoData = ({
     { x: 580, w: 100, h: h * 0.35 },
     { x: 700, w: 100, h: h * 0.3 }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
     "div",
     {
       className: cn(
@@ -16439,17 +16694,17 @@ var NoData = ({
       },
       role: "img",
       "aria-label": message,
-      children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "w-full flex items-center justify-center pl-[var(--pl)] p-6 h-[var(--svg-h)]", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "w-full max-w-[900px] relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "w-full flex items-center justify-center pl-[var(--pl)] p-6 h-[var(--svg-h)]", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "w-full max-w-[900px] relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
           "svg",
           {
             className: "w-full h-[var(--svg-h)] opacity-40",
             viewBox: `0 0 900 ${h}`,
             preserveAspectRatio: "none",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("defs", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("linearGradient", { id: "bg", x1: "0", x2: "0", y1: "0", y2: "1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("defs", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("linearGradient", { id: "bg", x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                     "stop",
                     {
                       offset: "0%",
@@ -16457,7 +16712,7 @@ var NoData = ({
                       stopOpacity: "0.15"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                     "stop",
                     {
                       offset: "100%",
@@ -16466,8 +16721,8 @@ var NoData = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("linearGradient", { id: "gg", x1: "0", x2: "0", y1: "0", y2: "1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("linearGradient", { id: "gg", x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                     "stop",
                     {
                       offset: "0%",
@@ -16475,7 +16730,7 @@ var NoData = ({
                       stopOpacity: "0.4"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                     "stop",
                     {
                       offset: "100%",
@@ -16484,17 +16739,17 @@ var NoData = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("filter", { id: "s", x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("feGaussianBlur", { in: "SourceAlpha", stdDeviation: "3" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("feOffset", { dx: "0", dy: "2" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("feComponentTransfer", { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("feFuncA", { type: "linear", slope: "0.2" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("feMerge", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("feMergeNode", {}),
-                    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("feMergeNode", { in: "SourceGraphic" })
+                /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("filter", { id: "s", x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("feGaussianBlur", { in: "SourceAlpha", stdDeviation: "3" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("feOffset", { dx: "0", dy: "2" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("feComponentTransfer", { children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("feFuncA", { type: "linear", slope: "0.2" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("feMerge", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("feMergeNode", {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("feMergeNode", { in: "SourceGraphic" })
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                 "rect",
                 {
                   x: 0,
@@ -16505,7 +16760,7 @@ var NoData = ({
                   rx: 8
                 }
               ),
-              [...Array(6)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+              [...Array(6)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                 "line",
                 {
                   x1: 50,
@@ -16518,7 +16773,7 @@ var NoData = ({
                 },
                 i
               )),
-              /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                 "line",
                 {
                   x1: 50,
@@ -16530,7 +16785,7 @@ var NoData = ({
                   opacity: 0.5
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                 "line",
                 {
                   x1: 50,
@@ -16542,7 +16797,7 @@ var NoData = ({
                   opacity: 0.5
                 }
               ),
-              bars.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+              bars.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                 ChartBar,
                 {
                   x: b.x,
@@ -16557,15 +16812,15 @@ var NoData = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none h-[var(--svg-h)]", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("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__ */ (0, import_jsx_runtime95.jsx)("div", { className: "flex flex-col items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none h-[var(--svg-h)]", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("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__ */ (0, import_jsx_runtime96.jsx)("div", { className: "flex flex-col items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
           LoadingBase,
           {
             size: "xl",
             message: loadingMessage ?? "Carregando"
           }
-        ) }) : /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_jsx_runtime95.Fragment, { children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("h3", { className: "text-xl font-semibold text-foreground mb-2", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("p", { className: "text-lg font-medium text-foreground/90 mb-2", children: message })
+        ) }) : /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("h3", { className: "text-xl font-semibold text-foreground mb-2", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: "text-lg font-medium text-foreground/90 mb-2", children: message })
         ] }) }) })
       ] }) })
     }
@@ -16786,8 +17041,126 @@ var useChartClick = ({
   };
 };
 
+// src/components/ui/charts/hooks/useTimeSeriesRange.ts
+var import_react96 = require("react");
+function useTimeSeriesRange({
+  dataLength,
+  defaultStartIndex = 0,
+  defaultEndIndex,
+  onRangeChange
+}) {
+  const [startIndex, setStartIndex] = (0, import_react96.useState)(defaultStartIndex);
+  const [endIndex, setEndIndex] = (0, import_react96.useState)(
+    defaultEndIndex ?? Math.max(0, dataLength - 1)
+  );
+  const [isDragging, setIsDragging] = (0, import_react96.useState)(null);
+  const [dragStartX, setDragStartX] = (0, import_react96.useState)(0);
+  const [initialStartIndex, setInitialStartIndex] = (0, import_react96.useState)(0);
+  const [initialEndIndex, setInitialEndIndex] = (0, import_react96.useState)(0);
+  const brushRef = (0, import_react96.useRef)(null);
+  (0, import_react96.useEffect)(() => {
+    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 = (0, import_react96.useCallback)(
+    (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 = (0, import_react96.useCallback)(
+    (e, type) => {
+      e.preventDefault();
+      setIsDragging(type);
+      setDragStartX(e.clientX);
+      setInitialStartIndex(startIndex);
+      setInitialEndIndex(endIndex);
+    },
+    [startIndex, endIndex]
+  );
+  const handleMouseMove = (0, import_react96.useCallback)(
+    (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 = (0, import_react96.useCallback)(() => {
+    setIsDragging(null);
+  }, []);
+  (0, import_react96.useEffect)(() => {
+    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
-var import_jsx_runtime96 = require("react/jsx-runtime");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 var DEFAULT_COLORS2 = ["#55af7d", "#8e68ff", "#2273e1"];
 var Chart = ({
   data,
@@ -16820,9 +17193,10 @@ var Chart = ({
   formatBR = false,
   legendUppercase = false,
   chartMargin,
-  isLoading = false
+  isLoading = false,
+  timeSeries
 }) => {
-  const smartConfig = (0, import_react96.useMemo)(() => {
+  const smartConfig = (0, import_react97.useMemo)(() => {
     const resolvedXAxisKey = typeof xAxis === "string" ? xAxis : xAxis && xAxis.dataKey || detectXAxis(data);
     const xAxisConfig2 = typeof xAxis === "string" ? {
       dataKey: resolvedXAxisKey,
@@ -16860,15 +17234,33 @@ var Chart = ({
     onTooltipPositionChange,
     setActiveTooltips
   } = useChartTooltips(maxTooltips);
-  (0, import_react96.useEffect)(() => {
+  (0, import_react97.useEffect)(() => {
     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 = (0, import_react97.useMemo)(() => {
+    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 = (0, import_react97.useMemo)(() => {
+    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)
@@ -16883,17 +17275,17 @@ var Chart = ({
     );
   }
   const allKeys = seriesOrder.map((s) => s.key).filter(Boolean);
-  const finalColors = (0, import_react96.useMemo)(
+  const finalColors = (0, import_react97.useMemo)(
     () => generateColorMap(allKeys, colors2, mapperConfig),
     [allKeys, colors2, mapperConfig]
   );
-  const biaxialConfigNormalized = (0, import_react96.useMemo)(() => {
+  const biaxialConfigNormalized = (0, import_react97.useMemo)(() => {
     if (!biaxial) return null;
     if (typeof biaxial === "string") return { key: [biaxial] };
     if (Array.isArray(biaxial)) return { key: biaxial };
     return biaxial;
   }, [biaxial]);
-  (0, import_react96.useMemo)(() => {
+  (0, import_react97.useMemo)(() => {
     if (!biaxialConfigNormalized) return;
     const leftLabelMissing = !yAxisLabel || String(yAxisLabel).trim() === "";
     const rightLabelMissing = !biaxialConfigNormalized.label || String(biaxialConfigNormalized.label).trim() === "";
@@ -16903,43 +17295,43 @@ var Chart = ({
       );
     }
   }, [biaxialConfigNormalized, yAxisLabel]);
-  const rightKeys = (0, import_react96.useMemo)(
+  const rightKeys = (0, import_react97.useMemo)(
     () => biaxialConfigNormalized?.key ?? [],
     [biaxialConfigNormalized]
   );
-  const leftKeys = (0, import_react96.useMemo)(
+  const leftKeys = (0, import_react97.useMemo)(
     () => allKeys.filter((k) => !rightKeys.includes(k)),
     [allKeys, rightKeys]
   );
-  const activePeriods = (0, import_react96.useMemo)(
+  const activePeriods = (0, import_react97.useMemo)(
     () => activeTooltips.map((t) => adaptDataForTooltip(t.data, xAxisConfig.dataKey).name),
     [activeTooltips, xAxisConfig.dataKey]
   );
-  const maxLeftDataValue = (0, import_react96.useMemo)(() => {
+  const maxLeftDataValue = (0, import_react97.useMemo)(() => {
     const numericKeys = leftKeys.length > 0 ? leftKeys : allKeys;
     return getMaxDataValue(processedData, numericKeys);
   }, [processedData, leftKeys, allKeys]);
-  const minLeftDataValue = (0, import_react96.useMemo)(() => {
+  const minLeftDataValue = (0, import_react97.useMemo)(() => {
     const numericKeys = leftKeys.length > 0 ? leftKeys : allKeys;
     return getMinDataValue(processedData, numericKeys);
   }, [processedData, leftKeys, allKeys]);
-  const maxRightDataValue = (0, import_react96.useMemo)(() => {
+  const maxRightDataValue = (0, import_react97.useMemo)(() => {
     if (rightKeys.length === 0) return 0;
     return getMaxDataValue(processedData, rightKeys);
   }, [processedData, rightKeys]);
-  const minRightDataValue = (0, import_react96.useMemo)(() => {
+  const minRightDataValue = (0, import_react97.useMemo)(() => {
     if (rightKeys.length === 0) return 0;
     return getMinDataValue(processedData, rightKeys);
   }, [processedData, rightKeys]);
-  const niceMaxLeft = (0, import_react96.useMemo)(
+  const niceMaxLeft = (0, import_react97.useMemo)(
     () => computeNiceMax(maxLeftDataValue),
     [maxLeftDataValue]
   );
-  const niceMaxRight = (0, import_react96.useMemo)(
+  const niceMaxRight = (0, import_react97.useMemo)(
     () => computeNiceMax(maxRightDataValue),
     [maxRightDataValue]
   );
-  const computedWidth = (0, import_react96.useMemo)(
+  const computedWidth = (0, import_react97.useMemo)(
     () => computeChartWidth(
       width,
       processedData.length,
@@ -16957,17 +17349,17 @@ var Chart = ({
       setActiveTooltips
     }
   );
-  const getSeriesOpacity = (0, import_react96.useCallback)(
+  const getSeriesOpacity = (0, import_react97.useCallback)(
     (key) => {
       return highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1;
     },
     [highlightedSeries]
   );
-  const finalValueFormatter = (0, import_react96.useMemo)(
+  const finalValueFormatter = (0, import_react97.useMemo)(
     () => createValueFormatter(valueFormatter2, formatBR),
     [valueFormatter2, formatBR]
   );
-  const yTickFormatter = (0, import_react96.useMemo)(
+  const yTickFormatter = (0, import_react97.useMemo)(
     () => createYTickFormatter(finalValueFormatter),
     [finalValueFormatter]
   );
@@ -16975,7 +17367,7 @@ var Chart = ({
   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 = (0, import_react96.useMemo)(
+  const yAxisTickWidth = (0, import_react97.useMemo)(
     () => computeYAxisTickWidth(
       chartMargin?.left,
       yAxisLabel,
@@ -16994,11 +17386,12 @@ var Chart = ({
   );
   const finalChartTopMargin = chartMargin?.top ?? (showLabels ? 48 : 20);
   const finalChartBottomMargin = (chartMargin?.bottom ?? 5) + (xAxisLabel ? 22 : 0) + (showLegend ? 36 : 0);
+  const HORIZONTAL_PADDING_CLASS = "px-20";
   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 = (0, import_react96.useCallback)(
+  const openTooltipForPeriod = (0, import_react97.useCallback)(
     (periodName) => {
       if (!enableDraggableTooltips) return;
       const row = processedData.find((r) => String(r.name) === periodName);
@@ -17042,7 +17435,7 @@ var Chart = ({
   );
   if (!data && !isLoading) return null;
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
       NoData_default,
       {
         title,
@@ -17054,7 +17447,7 @@ var Chart = ({
     );
   }
   if (Array.isArray(data) && data.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
       NoData_default,
       {
         title,
@@ -17063,67 +17456,87 @@ var Chart = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { ref: wrapperRef, className: "w-full overflow-hidden min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
     "div",
     {
-      className: cn(
-        "rounded-lg bg-card relative w-full max-w-full min-w-0",
-        className
-      ),
-      children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+      ref: wrapperRef,
+      className: cn("w-full overflow-hidden min-w-0 rounded-lg", className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "rounded-lg bg-card relative w-full max-w-full min-w-0", children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           "div",
           {
             className: cn(
-              "w-full flex items-center mt-[19px] ml-[90px]",
+              "w-full flex items-center mt-5",
+              HORIZONTAL_PADDING_CLASS,
               titlePosition === "center" && "justify-center",
               titlePosition === "right" && "justify-end",
               titlePosition === "left" && "justify-start"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "text-[1.4rem] font-semibold text-foreground mb-3", children: title })
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "text-[1.4rem] font-semibold text-foreground mb-3", children: [
+              title,
+              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                "div",
+                {
+                  className: "absolute inset-0 flex items-center justify-center pointer-events-none z-50 select-text overflow-hidden",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "text-[1.6rem] font-bold text-transparent selection:bg-primary selection:text-primary-foreground whitespace-nowrap", children: "Eduardo Ronchi de Araujo Desenvolvidor de Sistemas Junio" })
+                }
+              )
+            ] })
           }
         ),
-        allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "flex items-center w-[98%] ml-[90px] gap-2", children: [
-          enableHighlights && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-            Highlights_default,
-            {
-              allKeys,
-              mapperConfig,
-              finalColors,
-              highlightedSeries,
-              toggleHighlight,
-              containerWidth: chartInnerWidth
-            }
-          ),
-          enableShowOnly && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-            ShowOnly_default,
-            {
-              showOnlyHighlighted,
-              setShowOnlyHighlighted,
-              highlightedSeriesSize: highlightedSeries.size,
-              clearHighlights
-            }
-          ),
-          enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-            PeriodsDropdown_default,
-            {
-              processedData,
-              onOpenPeriod: openTooltipForPeriod,
-              rightOffset: finalChartRightMargin,
-              activePeriods
-            }
-          ) })
-        ] }),
-        !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2 mb-2",
+              HORIZONTAL_PADDING_CLASS
+            ),
+            children: [
+              enableHighlights && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                Highlights_default,
+                {
+                  allKeys,
+                  mapperConfig,
+                  finalColors,
+                  highlightedSeries,
+                  toggleHighlight,
+                  containerWidth: chartInnerWidth
+                }
+              ),
+              enableShowOnly && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                ShowOnly_default,
+                {
+                  showOnlyHighlighted,
+                  setShowOnlyHighlighted,
+                  highlightedSeriesSize: highlightedSeries.size,
+                  clearHighlights
+                }
+              ),
+              enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                PeriodsDropdown_default,
+                {
+                  processedData,
+                  onOpenPeriod: openTooltipForPeriod,
+                  rightOffset: finalChartRightMargin,
+                  activePeriods
+                }
+              ) })
+            ]
+          }
+        ),
+        !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           "div",
           {
-            className: "w-full flex justify-end",
+            className: cn(
+              "w-full flex justify-end mb-2",
+              HORIZONTAL_PADDING_CLASS
+            ),
             style: {
-              paddingLeft: `${CONTAINER_PADDING_LEFT + finalChartLeftMargin}px`,
               paddingRight: `${finalChartRightMargin}px`,
               maxWidth: `${chartInnerWidth}px`
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
               PeriodsDropdown_default,
               {
                 processedData,
@@ -17133,8 +17546,8 @@ var Chart = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
-          import_recharts.ComposedChart,
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
+          import_recharts2.ComposedChart,
           {
             data: processedData,
             height,
@@ -17146,10 +17559,10 @@ var Chart = ({
             },
             onClick: handleChartClick,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
+              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
                 const key = s.key;
                 const color = finalColors[key];
-                return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
                   "linearGradient",
                   {
                     id: `gradient-${key}`,
@@ -17158,23 +17571,23 @@ var Chart = ({
                     x2: "0",
                     y2: "0.8",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
-                      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("stop", { offset: "90%", stopColor: color, stopOpacity: 0.1 })
+                      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
+                      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("stop", { offset: "90%", stopColor: color, stopOpacity: 0.1 })
                     ]
                   },
                   `gradient-${key}`
                 );
               }) }),
-              showGrid && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                import_recharts.CartesianGrid,
+              showGrid && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                import_recharts2.CartesianGrid,
                 {
                   strokeDasharray: "3 3",
                   stroke: gridColor || "hsl(var(--muted-foreground))",
                   opacity: 0.5
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                import_recharts.XAxis,
+              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                import_recharts2.XAxis,
                 {
                   dataKey: xAxisConfig.dataKey,
                   stroke: "hsl(var(--muted-foreground))",
@@ -17200,8 +17613,8 @@ var Chart = ({
                   } : void 0
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                import_recharts.YAxis,
+              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                import_recharts2.YAxis,
                 {
                   yAxisId: "left",
                   width: yAxisTickWidth,
@@ -17226,8 +17639,8 @@ var Chart = ({
                   } : void 0
                 }
               ),
-              minLeftDataValue < 0 && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                import_recharts.ReferenceLine,
+              minLeftDataValue < 0 && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                import_recharts2.ReferenceLine,
                 {
                   y: 0,
                   yAxisId: "left",
@@ -17260,8 +17673,8 @@ var Chart = ({
                     return biaxialConfigNormalized.stroke[firstRightKey] || defaultRightColor;
                   return defaultRightColor;
                 })();
-                return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                  import_recharts.YAxis,
+                return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                  import_recharts2.YAxis,
                   {
                     yAxisId: "right",
                     width: finalChartRightMargin,
@@ -17289,10 +17702,10 @@ var Chart = ({
                   }
                 );
               })(),
-              showTooltip && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                import_recharts.Tooltip,
+              showTooltip && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                import_recharts2.Tooltip,
                 {
-                  content: showTooltipTotal ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+                  content: showTooltipTotal ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
                     TooltipWithTotal_default,
                     {
                       finalColors,
@@ -17300,7 +17713,7 @@ var Chart = ({
                       categoryFormatter,
                       periodLabel
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
                     TooltipSimple_default,
                     {
                       finalColors,
@@ -17312,8 +17725,8 @@ var Chart = ({
                   cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
                 }
               ),
-              showLegend && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                import_recharts.Legend,
+              showLegend && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                import_recharts2.Legend,
                 {
                   wrapperStyle: {
                     color: "hsl(var(--foreground))",
@@ -17325,7 +17738,7 @@ var Chart = ({
                     const key = String(value);
                     const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName(key);
                     const displayLabel = legendUppercase ? label.toUpperCase() : label;
-                    return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "tracking-[0]", children: displayLabel });
+                    return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "tracking-[0]", children: displayLabel });
                   }
                 }
               ),
@@ -17343,8 +17756,8 @@ var Chart = ({
                   }
                 }
                 if (s.type === "bar") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                    import_recharts.Bar,
+                  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                    import_recharts2.Bar,
                     {
                       dataKey: key,
                       yAxisId: rightKeys.includes(key) ? "right" : "left",
@@ -17354,8 +17767,8 @@ var Chart = ({
                       onClick: handleBarClick,
                       className: "cursor-pointer",
                       style: { opacity: getSeriesOpacity(key) },
-                      activeBar: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                        import_recharts.Rectangle,
+                      activeBar: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                        import_recharts2.Rectangle,
                         {
                           fill: color,
                           stroke: color,
@@ -17363,8 +17776,8 @@ var Chart = ({
                           opacity: 0.8
                         }
                       ),
-                      children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                        import_recharts.LabelList,
+                      children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                        import_recharts2.LabelList,
                         {
                           dataKey: key,
                           content: (props) => {
@@ -17390,8 +17803,8 @@ var Chart = ({
                   );
                 }
                 if (s.type === "line") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                    import_recharts.Line,
+                  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                    import_recharts2.Line,
                     {
                       dataKey: key,
                       yAxisId: rightKeys.includes(key) ? "right" : "left",
@@ -17403,8 +17816,8 @@ var Chart = ({
                       onClick: handleSeriesClick,
                       className: "cursor-pointer pointer-events-auto",
                       style: { opacity: getSeriesOpacity(key) },
-                      children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                        import_recharts.LabelList,
+                      children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                        import_recharts2.LabelList,
                         {
                           dataKey: key,
                           position: "top",
@@ -17421,8 +17834,8 @@ var Chart = ({
                   );
                 }
                 if (s.type === "area") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                    import_recharts.Area,
+                  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                    import_recharts2.Area,
                     {
                       type: "monotone",
                       dataKey: key,
@@ -17441,8 +17854,8 @@ var Chart = ({
                         stroke: "hsl(var(--background))",
                         strokeWidth: 2
                       },
-                      children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                        import_recharts.LabelList,
+                      children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                        import_recharts2.LabelList,
                         {
                           dataKey: key,
                           position: "top",
@@ -17463,7 +17876,7 @@ var Chart = ({
             ]
           }
         ) }),
-        enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           DraggableTooltip_default,
           {
             id: tooltip.id,
@@ -17488,7 +17901,7 @@ var Chart = ({
           },
           tooltip.id
         )),
-        enableDraggableTooltips && activeTooltips.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        enableDraggableTooltips && activeTooltips.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           CloseAllButton_default,
           {
             count: activeTooltips.length,
@@ -17496,17 +17909,39 @@ var Chart = ({
             position: "top-center",
             variant: "floating"
           }
+        ),
+        timeSeriesConfig && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+          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
-var import_react97 = require("react");
-var import_recharts2 = require("recharts");
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_react98 = require("react");
+var import_recharts3 = require("recharts");
+var import_jsx_runtime98 = require("react/jsx-runtime");
 var DEFAULT_COLORS3 = ["#55af7d", "#8e68ff", "#2273e1"];
 var BarChart = ({
   data,
@@ -17536,7 +17971,7 @@ var BarChart = ({
     containerPaddingLeft,
     16
   );
-  const smartConfig = (0, import_react97.useMemo)(() => {
+  const smartConfig = (0, import_react98.useMemo)(() => {
     const providedMapper = yAxis ?? mapper;
     if (autoDetect === true || xAxis == null || providedMapper == null) {
       const detectedXAxis = detectXAxis(data);
@@ -17586,14 +18021,14 @@ var BarChart = ({
     return { xAxisConfig: xAxisConfig2, mapperConfig: mapperConfig2 };
   }, [data, xAxis, mapper, yAxis, autoDetect, labelMap]);
   const { xAxisConfig, mapperConfig } = smartConfig;
-  const [activeTooltips, setActiveTooltips] = (0, import_react97.useState)([]);
-  const [isDragging, setIsDragging] = (0, import_react97.useState)(null);
-  const [dragOffset, setDragOffset] = (0, import_react97.useState)({
+  const [activeTooltips, setActiveTooltips] = (0, import_react98.useState)([]);
+  const [isDragging, setIsDragging] = (0, import_react98.useState)(null);
+  const [dragOffset, setDragOffset] = (0, import_react98.useState)({
     x: 0,
     y: 0
   });
-  const [globalTooltipCount, setGlobalTooltipCount] = (0, import_react97.useState)(0);
-  const [alignmentGuides, setAlignmentGuides] = (0, import_react97.useState)([]);
+  const [globalTooltipCount, setGlobalTooltipCount] = (0, import_react98.useState)(0);
+  const [alignmentGuides, setAlignmentGuides] = (0, import_react98.useState)([]);
   const processedData = data.map((item) => ({
     ...item,
     name: String(item[xAxisConfig.dataKey] || "N/A")
@@ -17616,7 +18051,7 @@ var BarChart = ({
       // Garantir que tem a propriedade 'name'
     };
   };
-  const maxDataValue = (0, import_react97.useMemo)(() => {
+  const maxDataValue = (0, import_react98.useMemo)(() => {
     let max = 0;
     const keys = Object.keys(mapperConfig);
     for (const row of processedData) {
@@ -17629,7 +18064,7 @@ var BarChart = ({
     }
     return max;
   }, [processedData, mapperConfig]);
-  const niceMax = (0, import_react97.useMemo)(() => {
+  const niceMax = (0, import_react98.useMemo)(() => {
     let padding2 = 0.08;
     if (maxDataValue > 1e6) padding2 = 0.05;
     if (maxDataValue > 1e7) padding2 = 0.03;
@@ -17670,7 +18105,7 @@ var BarChart = ({
   const GUIDE_THRESHOLD2 = 60;
   const STRONG_SNAP_THRESHOLD2 = 35;
   const PRECISION_SNAP_THRESHOLD2 = 8;
-  const updateAlignmentGuides = (0, import_react97.useCallback)(
+  const updateAlignmentGuides = (0, import_react98.useCallback)(
     (draggedTooltipId, currentPosition) => {
       if (!isDragging) return;
       const getAllTooltips = () => {
@@ -17734,7 +18169,7 @@ var BarChart = ({
     },
     [isDragging, activeTooltips]
   );
-  const snapToGuides = (0, import_react97.useCallback)(
+  const snapToGuides = (0, import_react98.useCallback)(
     (position) => {
       const snappedPosition = { ...position };
       let hasSnapped = false;
@@ -17796,7 +18231,7 @@ var BarChart = ({
     setIsDragging(tooltipId);
     setDragOffset({ x: offsetX, y: offsetY });
   };
-  (0, import_react97.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     let rafId;
     let lastMousePosition = { x: 0, y: 0 };
     const handleGlobalMouseMove = (e) => {
@@ -17854,7 +18289,7 @@ var BarChart = ({
     updateAlignmentGuides,
     snapToGuides
   ]);
-  (0, import_react97.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     const handleCloseAllTooltips = () => {
       setActiveTooltips([]);
       setGlobalTooltipCount(0);
@@ -17864,7 +18299,7 @@ var BarChart = ({
       window.removeEventListener("closeAllTooltips", handleCloseAllTooltips);
     };
   }, []);
-  (0, import_react97.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     const handleTooltipCountRequest = () => {
       window.dispatchEvent(
         new CustomEvent("tooltipCountResponse", {
@@ -17903,7 +18338,7 @@ var BarChart = ({
       );
     };
   }, [activeTooltips]);
-  (0, import_react97.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     if (isDragging) return;
     let totalCount = 0;
     const handleCountResponse = (event) => {
@@ -17927,25 +18362,25 @@ var BarChart = ({
     label
   }) => {
     if (!active || !payload) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "bg-card border border-border rounded-lg p-3 shadow-lg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("p", { className: "font-medium text-foreground mb-2", children: label }),
+    return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "bg-card border border-border rounded-lg p-3 shadow-lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("p", { className: "font-medium text-foreground mb-2", children: label }),
       payload.map(
-        (entry, index) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+        (entry, index) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
             "div",
             {
               className: "w-3 h-3 rounded-sm",
               style: { backgroundColor: entry.color }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("span", { className: "text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("span", { className: "text-muted-foreground", children: [
             entry.name,
             ":"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "text-foreground font-medium", children: entry.value?.toLocaleString("pt-BR") })
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: "text-foreground font-medium", children: entry.value?.toLocaleString("pt-BR") })
         ] }, index)
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("p", { className: "text-xs text-muted-foreground mt-1", children: "Clique para fixar este tooltip" })
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("p", { className: "text-xs text-muted-foreground mt-1", children: "Clique para fixar este tooltip" })
     ] });
   };
   const getTitleClassName = (position) => {
@@ -17959,7 +18394,7 @@ var BarChart = ({
         return `${baseClasses} text-left`;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
     "div",
     {
       className: cn("rounded-lg bg-card p-4 relative", className),
@@ -17968,9 +18403,9 @@ var BarChart = ({
         maxWidth: "100%"
       },
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("h3", { className: getTitleClassName(titlePosition), children: title }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
-          import_recharts2.BarChart,
+        title && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("h3", { className: getTitleClassName(titlePosition), children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+          import_recharts3.BarChart,
           {
             data: processedData,
             width: typeof width === "number" ? width : 900,
@@ -17978,16 +18413,16 @@ var BarChart = ({
             margin: resolveChartMargins(margins, chartMargins, showLabels),
             onClick: handleChartClick,
             children: [
-              showGrid && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                import_recharts2.CartesianGrid,
+              showGrid && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                import_recharts3.CartesianGrid,
                 {
                   strokeDasharray: "3 3",
                   stroke: gridColor || "hsl(var(--muted-foreground))",
                   opacity: 0.5
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                import_recharts2.XAxis,
+              /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                import_recharts3.XAxis,
                 {
                   dataKey: xAxisConfig.dataKey,
                   stroke: "hsl(var(--muted-foreground))",
@@ -17997,8 +18432,8 @@ var BarChart = ({
                   tickFormatter: xAxisConfig.valueFormatter
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                import_recharts2.YAxis,
+              /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                import_recharts3.YAxis,
                 {
                   stroke: "hsl(var(--muted-foreground))",
                   fontSize: 12,
@@ -18009,15 +18444,15 @@ var BarChart = ({
                   tickCount: 6
                 }
               ),
-              showTooltip && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                import_recharts2.Tooltip,
+              showTooltip && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                import_recharts3.Tooltip,
                 {
-                  content: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(CustomTooltip, {}),
+                  content: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(CustomTooltip, {}),
                   cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
                 }
               ),
-              showLegend && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                import_recharts2.Legend,
+              showLegend && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                import_recharts3.Legend,
                 {
                   wrapperStyle: {
                     color: "hsl(var(--foreground))",
@@ -18027,8 +18462,8 @@ var BarChart = ({
               ),
               dataKeys.map((key) => {
                 const fieldConfig = mapperConfig[key];
-                return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                  import_recharts2.Bar,
+                return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                  import_recharts3.Bar,
                   {
                     dataKey: key,
                     name: fieldConfig?.label || key,
@@ -18036,8 +18471,8 @@ var BarChart = ({
                     radius: [4, 4, 0, 0],
                     onClick: handleBarClick,
                     style: { cursor: "pointer" },
-                    activeBar: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                      import_recharts2.Rectangle,
+                    activeBar: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                      import_recharts3.Rectangle,
                       {
                         fill: finalColors[key],
                         stroke: finalColors[key],
@@ -18045,8 +18480,8 @@ var BarChart = ({
                         opacity: 0.8
                       }
                     ),
-                    children: showLabels && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                      import_recharts2.LabelList,
+                    children: showLabels && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                      import_recharts3.LabelList,
                       {
                         dataKey: key,
                         position: "top",
@@ -18082,8 +18517,8 @@ var BarChart = ({
             guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
             guide.targetTooltip.top + guide.targetTooltip.height / 2
           );
-          return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
               "div",
               {
                 className: "fixed pointer-events-none z-30",
@@ -18102,7 +18537,7 @@ var BarChart = ({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
               "div",
               {
                 className: "fixed pointer-events-none z-31",
@@ -18118,7 +18553,7 @@ var BarChart = ({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
               "div",
               {
                 className: "fixed pointer-events-none z-31",
@@ -18136,7 +18571,7 @@ var BarChart = ({
             )
           ] }, index);
         }),
-        activeTooltips.map((tooltip, index) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+        activeTooltips.map((tooltip, index) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
           DraggableTooltip_default,
           {
             id: tooltip.id,
@@ -18169,9 +18604,9 @@ var BarChart = ({
 var BarChart_default = BarChart;
 
 // src/components/ui/charts/LineChart.tsx
-var import_react98 = require("react");
-var import_recharts3 = require("recharts");
-var import_jsx_runtime98 = require("react/jsx-runtime");
+var import_react99 = require("react");
+var import_recharts4 = require("recharts");
+var import_jsx_runtime99 = require("react/jsx-runtime");
 var defaultData = [
   { name: "A", value: 100 },
   { name: "B", value: 200 },
@@ -18203,14 +18638,14 @@ var CustomLineChart = ({
     containerPaddingLeft,
     16
   );
-  const [activeTooltips, setActiveTooltips] = (0, import_react98.useState)([]);
-  const [isDragging, setIsDragging] = (0, import_react98.useState)(null);
-  const [dragOffset, setDragOffset] = (0, import_react98.useState)({
+  const [activeTooltips, setActiveTooltips] = (0, import_react99.useState)([]);
+  const [isDragging, setIsDragging] = (0, import_react99.useState)(null);
+  const [dragOffset, setDragOffset] = (0, import_react99.useState)({
     x: 0,
     y: 0
   });
-  const [globalTooltipCount, setGlobalTooltipCount] = (0, import_react98.useState)(0);
-  const [alignmentGuides, setAlignmentGuides] = (0, import_react98.useState)([]);
+  const [globalTooltipCount, setGlobalTooltipCount] = (0, import_react99.useState)(0);
+  const [alignmentGuides, setAlignmentGuides] = (0, import_react99.useState)([]);
   const generateColors = (dataKeys2) => {
     const colorMap = {};
     const allColors = generateAdditionalColors(colors2, dataKeys2.length);
@@ -18219,12 +18654,12 @@ var CustomLineChart = ({
     });
     return colorMap;
   };
-  const dataKeys = (0, import_react98.useMemo)(
+  const dataKeys = (0, import_react99.useMemo)(
     () => data.length > 0 ? Object.keys(data[0]).filter((key) => key !== "name") : [],
     [data]
   );
   const finalColors = generateColors(dataKeys);
-  const maxDataValue = (0, import_react98.useMemo)(() => {
+  const maxDataValue = (0, import_react99.useMemo)(() => {
     let max = 0;
     for (const row of data) {
       const r = row;
@@ -18236,7 +18671,7 @@ var CustomLineChart = ({
     }
     return max;
   }, [data, dataKeys]);
-  const niceMax = (0, import_react98.useMemo)(() => {
+  const niceMax = (0, import_react99.useMemo)(() => {
     let padding2 = 0.08;
     if (maxDataValue > 1e6) padding2 = 0.05;
     if (maxDataValue > 1e7) padding2 = 0.03;
@@ -18270,7 +18705,7 @@ var CustomLineChart = ({
         setActiveTooltips((prev) => [...prev, newTooltip]);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
       "circle",
       {
         cx,
@@ -18312,10 +18747,10 @@ var CustomLineChart = ({
   const handleChartBackgroundClick = () => {
     setActiveTooltips([]);
   };
-  const handleCloseAllTooltips = (0, import_react98.useCallback)(() => {
+  const handleCloseAllTooltips = (0, import_react99.useCallback)(() => {
     window.dispatchEvent(new CustomEvent("closeAllTooltips"));
   }, []);
-  const updateAlignmentGuides = (0, import_react98.useCallback)(
+  const updateAlignmentGuides = (0, import_react99.useCallback)(
     (draggedTooltipId, draggedPosition) => {
       const SNAP_THRESHOLD = 15;
       const draggedTooltip = activeTooltips.find(
@@ -18396,7 +18831,7 @@ var CustomLineChart = ({
     },
     [activeTooltips]
   );
-  const snapToGuides = (0, import_react98.useCallback)(
+  const snapToGuides = (0, import_react99.useCallback)(
     (position) => {
       const SNAP_DISTANCE = 10;
       const snappedPosition = { ...position };
@@ -18424,7 +18859,7 @@ var CustomLineChart = ({
     setIsDragging(tooltipId);
     setDragOffset({ x: offsetX, y: offsetY });
   };
-  (0, import_react98.useEffect)(() => {
+  (0, import_react99.useEffect)(() => {
     let rafId;
     let lastMousePosition = { x: 0, y: 0 };
     const handleGlobalMouseMove = (e) => {
@@ -18471,7 +18906,7 @@ var CustomLineChart = ({
     updateAlignmentGuides,
     snapToGuides
   ]);
-  (0, import_react98.useEffect)(() => {
+  (0, import_react99.useEffect)(() => {
     const handleCloseAllTooltips2 = () => {
       setActiveTooltips([]);
       setGlobalTooltipCount(0);
@@ -18481,7 +18916,7 @@ var CustomLineChart = ({
       window.removeEventListener("closeAllTooltips", handleCloseAllTooltips2);
     };
   }, []);
-  (0, import_react98.useEffect)(() => {
+  (0, import_react99.useEffect)(() => {
     const handleTooltipCountRequest = () => {
       window.dispatchEvent(
         new CustomEvent("tooltipCountResponse", {
@@ -18525,7 +18960,7 @@ var CustomLineChart = ({
       );
     };
   }, [activeTooltips]);
-  (0, import_react98.useEffect)(() => {
+  (0, import_react99.useEffect)(() => {
     if (isDragging) return;
     let totalCount = 0;
     const handleCountResponse = (event) => {
@@ -18553,7 +18988,7 @@ var CustomLineChart = ({
         return "text-left";
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: cn("relative", className), children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: cn("relative", className), children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
     "div",
     {
       className: "rounded-lg bg-card p-4 relative border border-border",
@@ -18563,9 +18998,9 @@ var CustomLineChart = ({
       },
       onClick: handleChartBackgroundClick,
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: cn("mb-4", getTitleClass()), children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: title }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
-          import_recharts3.LineChart,
+        title && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: cn("mb-4", getTitleClass()), children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: title }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
+          import_recharts4.LineChart,
           {
             data,
             width: typeof width === "number" ? width : 900,
@@ -18573,24 +19008,24 @@ var CustomLineChart = ({
             margin: resolveChartMargins(margins, chartMargins, showLabels),
             onClick: handleChartClick,
             children: [
-              showGrid && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
-                import_recharts3.CartesianGrid,
+              showGrid && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+                import_recharts4.CartesianGrid,
                 {
                   strokeDasharray: "3 3",
                   stroke: gridColor || "hsl(var(--muted-foreground))",
                   opacity: 0.3
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
-                import_recharts3.XAxis,
+              /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+                import_recharts4.XAxis,
                 {
                   dataKey: "name",
                   className: "fill-muted-foreground text-xs",
                   fontSize: 12
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
-                import_recharts3.YAxis,
+              /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+                import_recharts4.YAxis,
                 {
                   className: "fill-muted-foreground text-xs",
                   fontSize: 12,
@@ -18599,9 +19034,9 @@ var CustomLineChart = ({
                   tickCount: 6
                 }
               ),
-              showTooltip && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_recharts3.Tooltip, { content: () => null }),
-              showLegend && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
-                import_recharts3.Legend,
+              showTooltip && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_recharts4.Tooltip, { content: () => null }),
+              showLegend && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+                import_recharts4.Legend,
                 {
                   wrapperStyle: {
                     fontSize: "12px",
@@ -18609,17 +19044,17 @@ var CustomLineChart = ({
                   }
                 }
               ),
-              dataKeys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
-                import_recharts3.Line,
+              dataKeys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+                import_recharts4.Line,
                 {
                   type: "monotone",
                   dataKey: key,
                   stroke: finalColors[key],
                   strokeWidth,
                   dot: showDots ? { r: 4, cursor: "pointer" } : false,
-                  activeDot: (props) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(ClickableDot, { ...props, dataKey: key }),
-                  children: showLabels && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
-                    import_recharts3.LabelList,
+                  activeDot: (props) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(ClickableDot, { ...props, dataKey: key }),
+                  children: showLabels && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+                    import_recharts4.LabelList,
                     {
                       dataKey: key,
                       position: "top",
@@ -18655,8 +19090,8 @@ var CustomLineChart = ({
             guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
             guide.targetTooltip.top + guide.targetTooltip.height / 2
           );
-          return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
               "div",
               {
                 className: "fixed pointer-events-none z-30",
@@ -18675,7 +19110,7 @@ var CustomLineChart = ({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
               "div",
               {
                 className: "fixed pointer-events-none z-31",
@@ -18691,7 +19126,7 @@ var CustomLineChart = ({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
               "div",
               {
                 className: "fixed pointer-events-none z-31",
@@ -18709,7 +19144,7 @@ var CustomLineChart = ({
             )
           ] }, index);
         }),
-        activeTooltips.map((tooltip, index) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+        activeTooltips.map((tooltip, index) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
           DraggableTooltip_default,
           {
             id: tooltip.id,
@@ -18740,8 +19175,8 @@ var CustomLineChart = ({
 var LineChart_default = CustomLineChart;
 
 // src/components/ui/charts/PieChart.tsx
-var import_recharts4 = require("recharts");
-var import_jsx_runtime99 = require("react/jsx-runtime");
+var import_recharts5 = require("recharts");
+var import_jsx_runtime100 = require("react/jsx-runtime");
 var defaultData2 = [
   { name: "Vendas", value: 4e3 },
   { name: "Marketing", value: 3e3 },
@@ -18779,7 +19214,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__ */ (0, import_jsx_runtime99.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
     "text",
     {
       x,
@@ -18808,9 +19243,9 @@ var CustomPieChart = ({
   centerY = "50%"
 }) => {
   const finalColors = colors2 || DEFAULT_COLORS5;
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: cn("w-full rounded-lg bg-card p-4", className), children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_recharts4.ResponsiveContainer, { width, height, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_recharts4.PieChart, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
-      import_recharts4.Pie,
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: cn("w-full rounded-lg bg-card p-4", className), children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_recharts5.ResponsiveContainer, { width, height, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_recharts5.PieChart, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+      import_recharts5.Pie,
       {
         data,
         cx: centerX,
@@ -18821,8 +19256,8 @@ var CustomPieChart = ({
         innerRadius,
         fill: "#8884d8",
         dataKey: "value",
-        children: data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
-          import_recharts4.Cell,
+        children: data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+          import_recharts5.Cell,
           {
             fill: finalColors[index % finalColors.length]
           },
@@ -18830,8 +19265,8 @@ var CustomPieChart = ({
         ))
       }
     ),
-    showTooltip && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
-      import_recharts4.Tooltip,
+    showTooltip && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+      import_recharts5.Tooltip,
       {
         contentStyle: {
           backgroundColor: "hsl(var(--popover))",
@@ -18841,25 +19276,71 @@ var CustomPieChart = ({
         }
       }
     ),
-    showLegend && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_recharts4.Legend, {})
+    showLegend && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_recharts5.Legend, {})
   ] }) }) });
 };
 var PieChart_default = CustomPieChart;
 
+// src/components/ui/charts/TimeSeries.tsx
+var import_jsx_runtime101 = require("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__ */ (0, import_jsx_runtime101.jsx)("div", { className: cn("w-full flex flex-col", className), children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+    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
-var import_react99 = require("@phosphor-icons/react");
-var import_react100 = require("react");
+var import_react100 = require("@phosphor-icons/react");
+var import_react101 = require("react");
 var import_framer_motion22 = require("framer-motion");
-var import_jsx_runtime100 = require("react/jsx-runtime");
+var import_jsx_runtime102 = require("react/jsx-runtime");
 function Leaderboard({
   items,
   order: initialOrder = "desc",
   title = "LeaderBoard",
   className,
   isLoading = false,
-  legend
+  legend,
+  best = false,
+  worst = false
 }) {
-  const [order, setOrder] = (0, import_react100.useState)(initialOrder);
+  const [order, setOrder] = (0, import_react101.useState)(initialOrder);
+  const [searchTerm, setSearchTerm] = (0, import_react101.useState)("");
   const mockData = [
     { name: "Ana", value: 92 },
     { name: "Bruno", value: 81 },
@@ -18873,7 +19354,10 @@ function Leaderboard({
     { name: "Jo\xE3o", value: 18 }
   ];
   const data = items ?? mockData;
-  const sortedData = [...data].sort((a, b) => {
+  const filteredData = data.filter(
+    (item) => item.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+  const sortedData = [...filteredData].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") {
@@ -18885,57 +19369,87 @@ function Leaderboard({
     if (typeof aValue === "number") return order === "desc" ? -1 : 1;
     return order === "desc" ? 1 : -1;
   });
-  const getBadgeColor = (value) => {
+  const getBadgeColor = (value, index, total) => {
+    if (best || worst) {
+      const third = total / 3;
+      if (best) {
+        if (index < third) return "green";
+        if (index < 2 * third) return "yellow";
+        return "red";
+      }
+      if (worst) {
+        if (index < third) return "red";
+        if (index < 2 * third) return "yellow";
+        return "green";
+      }
+    }
     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__ */ (0, import_jsx_runtime100.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
     "div",
     {
-      className: `border rounded-xl flex flex-col max-h-80 w-96 ${className}`,
+      className: `border rounded-xl flex flex-col max-h-80 w-96  ${className}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "flex items-center justify-between py-2 px-4 border-b flex-shrink-0 gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("h2", { className: "text-lg font-semibold px-1", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center justify-between py-2 px-4 border-b flex-shrink-0 gap-3 ", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("h2", { className: "text-lg font-semibold px-1 whitespace-nowrap", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "flex-1 max-w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+            InputBase,
+            {
+              value: searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value),
+              placeholder: "Pesquisar...",
+              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_react100.MagnifyingGlassIcon, { size: 16 }),
+              className: "h-8 py-1"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
             ButtonBase,
             {
               size: "icon",
-              variant: "ghost",
+              variant: "outline",
               onClick: () => setOrder(order === "desc" ? "asc" : "desc"),
               disabled: isLoading || sortedData.length === 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_react99.CaretUpDownIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+                import_framer_motion22.motion.div,
+                {
+                  animate: { rotate: order === "asc" ? 180 : 0 },
+                  transition: { type: "spring", stiffness: 300, damping: 20 },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_react100.CaretUpDownIcon, {})
+                }
+              )
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "overflow-y-auto flex-1", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "p-4 space-y-3", children: Array.from({ length: 5 }).map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "flex items-center justify-between p-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "flex items-center gap-3 flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SkeletonBase, { className: "w-8 h-8 rounded-full" }),
-            /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SkeletonBase, { className: "h-4 w-36" })
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "overflow-y-auto flex-1 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/40 transition-colors", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "p-4 space-y-3", children: Array.from({ length: 5 }).map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center justify-between p-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center gap-3 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(SkeletonBase, { className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(SkeletonBase, { className: "h-4 w-36 rounded-full" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SkeletonBase, { className: "h-6 w-12 rounded-full" })
-        ] }, idx)) }) : sortedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "flex items-center justify-center h-full py-12", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { className: "text-muted-foreground text-sm", children: "Sem dados dispon\xEDveis" }) }) : /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("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__ */ (0, import_jsx_runtime100.jsx)("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider pl-1", children: legend?.[0]?.[0] ?? "Participante" }),
-            /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: legend?.[0]?.[1] ?? "Pontua\xE7\xE3o" })
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(SkeletonBase, { className: "h-6 w-12 rounded-full" })
+        ] }, idx)) }) : sortedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "flex items-center justify-center h-full py-12", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: "text-muted-foreground text-sm", children: "Sem dados dispon\xEDveis" }) }) : /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("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__ */ (0, import_jsx_runtime102.jsx)("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider pl-1", children: legend?.[0] }),
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: legend?.[1] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("ul", { children: sortedData.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("ul", { children: sortedData.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
             import_framer_motion22.motion.span,
             {
               initial: { opacity: 0, y: 10 },
               animate: { opacity: 1, y: 0 },
               transition: { delay: idx * 5e-3 },
-              children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("li", { className: "flex items-center justify-between py-3 border-b last:border-b-0 hover:bg-muted transition-colors px-4", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "text-sm text-gray-400 w-6 h-6 border rounded-full text-center bg-muted/50", children: idx + 1 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "font-medium", children: item.name })
+              children: /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("li", { className: "flex items-center justify-between py-3 border-b last:border-b-0 hover:bg-muted transition-colors px-4", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: "text-sm text-gray-400 w-6 h-6 border rounded-full text-center bg-muted/50", children: order === "desc" ? idx + 1 : sortedData.length - idx }),
+                  /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: "font-medium", children: item.name })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
                   Badge,
                   {
-                    color: getBadgeColor(item.value),
+                    color: getBadgeColor(item.value, idx, sortedData.length),
                     size: "md",
                     className: "font-bold",
                     children: item.value