@mlw-packages/react-components 1.8.6 → 1.8.7

package/dist/index.css

@@ -429,14 +429,14 @@ body {
 .-left-1 {
   left: -0.25rem;
 }
-.-left-3 {
-  left: -0.75rem;
+.-left-3\.5 {
+  left: -0.875rem;
 }
 .-right-1 {
   right: -0.25rem;
 }
-.-right-3 {
-  right: -0.75rem;
+.-right-3\.5 {
+  right: -0.875rem;
 }
 .-top-1 {
   top: -0.25rem;
@@ -738,9 +738,6 @@ body {
 .ml-64 {
   margin-left: 16rem;
 }
-.ml-\[90px\] {
-  margin-left: 90px;
-}
 .ml-auto {
   margin-left: auto;
 }
@@ -798,9 +795,6 @@ body {
 .mt-8 {
   margin-top: 2rem;
 }
-.mt-\[19px\] {
-  margin-top: 19px;
-}
 .mt-\[var\(--event-gap\)\] {
   margin-top: var(--event-gap);
 }
@@ -1264,9 +1258,6 @@ body {
 .w-\[90\%\] {
   width: 90%;
 }
-.w-\[98\%\] {
-  width: 98%;
-}
 .w-auto {
   width: auto;
 }
@@ -1366,6 +1357,9 @@ body {
 .max-w-\[1100px\] {
   max-width: 1100px;
 }
+.max-w-\[200px\] {
+  max-width: 200px;
+}
 .max-w-\[210px\] {
   max-width: 210px;
 }
@@ -1971,6 +1965,10 @@ body {
   border-left-width: 1px;
   border-right-width: 1px;
 }
+.border-x-2 {
+  border-left-width: 2px;
+  border-right-width: 2px;
+}
 .border-y {
   border-top-width: 1px;
   border-bottom-width: 1px;
@@ -2095,6 +2093,9 @@ body {
 .border-primary\/30 {
   border-color: hsl(var(--primary) / 0.3);
 }
+.border-primary\/50 {
+  border-color: hsl(var(--primary) / 0.5);
+}
 .border-primary\/70 {
   border-color: hsl(var(--primary) / 0.7);
 }
@@ -2388,9 +2389,6 @@ body {
 .bg-muted\/50 {
   background-color: hsl(var(--muted) / 0.5);
 }
-.bg-muted\/60 {
-  background-color: hsl(var(--muted) / 0.6);
-}
 .bg-muted\/80 {
   background-color: hsl(var(--muted) / 0.8);
 }
@@ -2750,6 +2748,10 @@ body {
   padding-left: 0.625rem;
   padding-right: 0.625rem;
 }
+.px-20 {
+  padding-left: 5rem;
+  padding-right: 5rem;
+}
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -2964,6 +2966,9 @@ body {
 .text-\[1\.4rem\] {
   font-size: 1.4rem;
 }
+.text-\[1\.6rem\] {
+  font-size: 1.6rem;
+}
 .text-\[10px\] {
   font-size: 10px;
 }
@@ -3038,6 +3043,9 @@ body {
 .capitalize {
   text-transform: capitalize;
 }
+.italic {
+  font-style: italic;
+}
 .tabular-nums {
   --tw-numeric-spacing: tabular-nums;
   font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
@@ -3610,6 +3618,10 @@ body {
   --tw-backdrop-blur: blur(8px);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
+.backdrop-blur-\[1px\] {
+  --tw-backdrop-blur: blur(1px);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
 .backdrop-blur-md {
   --tw-backdrop-blur: blur(12px);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -4274,6 +4286,9 @@ body {
 .hover\:bg-primary\/20:hover {
   background-color: hsl(var(--primary) / 0.2);
 }
+.hover\:bg-primary\/5:hover {
+  background-color: hsl(var(--primary) / 0.05);
+}
 .hover\:bg-primary\/90:hover {
   background-color: hsl(var(--primary) / 0.9);
 }
@@ -6332,6 +6347,12 @@ body {
 .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-muted::-webkit-scrollbar-thumb {
   background-color: hsl(var(--muted));
 }
+.\[\&\:\:-webkit-scrollbar-thumb\]\:bg-muted-foreground\/20::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--muted-foreground) / 0.2);
+}
+.hover\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-muted-foreground\/40::-webkit-scrollbar-thumb:hover {
+  background-color: hsl(var(--muted-foreground) / 0.4);
+}
 .hover\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-muted-foreground\/50::-webkit-scrollbar-thumb:hover {
   background-color: hsl(var(--muted-foreground) / 0.5);
 }
@@ -6341,6 +6362,9 @@ body {
 .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
   display: none;
 }
+.\[\&\:\:-webkit-scrollbar\]\:w-1\.5::-webkit-scrollbar {
+  width: 0.375rem;
+}
 .\[\&\:\:-webkit-scrollbar\]\:w-2::-webkit-scrollbar {
   width: 0.5rem;
 }

package/dist/index.d.mts

@@ -1313,6 +1313,7 @@ interface AvatarComboboxItem<T extends string> {
     value: T;
     avatar?: ReactNode;
     avatarClassName?: string;
+    img?: string;
 }
 interface AvatarComboboxTestIds {
     root?: string;
@@ -2147,9 +2148,11 @@ interface LeaderboardProps<T extends string> {
     title?: string;
     className?: string;
     isLoading?: boolean;
-    legend?: [string, string][];
+    legend?: string[];
+    best?: boolean;
+    worst?: boolean;
 }
-declare function Leaderboard<T extends string>({ items, order: initialOrder, title, className, isLoading, legend, }: LeaderboardProps<T>): react_jsx_runtime.JSX.Element;
+declare function Leaderboard<T extends string>({ items, order: initialOrder, title, className, isLoading, legend, best, worst, }: LeaderboardProps<T>): react_jsx_runtime.JSX.Element;
 
 declare function useIsMobile(): boolean;
 

package/dist/index.d.ts

@@ -1313,6 +1313,7 @@ interface AvatarComboboxItem<T extends string> {
     value: T;
     avatar?: ReactNode;
     avatarClassName?: string;
+    img?: string;
 }
 interface AvatarComboboxTestIds {
     root?: string;
@@ -2147,9 +2148,11 @@ interface LeaderboardProps<T extends string> {
     title?: string;
     className?: string;
     isLoading?: boolean;
-    legend?: [string, string][];
+    legend?: string[];
+    best?: boolean;
+    worst?: boolean;
 }
-declare function Leaderboard<T extends string>({ items, order: initialOrder, title, className, isLoading, legend, }: LeaderboardProps<T>): react_jsx_runtime.JSX.Element;
+declare function Leaderboard<T extends string>({ items, order: initialOrder, title, className, isLoading, legend, best, worst, }: LeaderboardProps<T>): react_jsx_runtime.JSX.Element;
 
 declare function useIsMobile(): boolean;
 

package/dist/index.js

@@ -1578,14 +1578,14 @@ var Toaster = ({ testId, ...props }) => {
             text-foreground
             shadow-xl rounded-lg
             border-l-4
-            border-border
+
             flex items-center gap-3
             transition-all duration-300
             hover:scale-[1.02] hover:shadow-2xl
-            data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50/95 data-[type=success]:text-green-800 data-[type=success]:border-green-500
+            data-[type=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
+            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-xs
@@ -14254,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",
@@ -14302,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 })
     ] });
   };
@@ -16309,7 +16318,7 @@ var Brush = ({
                 /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
                   "div",
                   {
-                    className: "absolute top-0 bottom-0 left-0 bg-muted/60 pointer-events-none rounded-md",
+                    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}%`
                     }
@@ -16318,7 +16327,7 @@ var Brush = ({
                 /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
                   "div",
                   {
-                    className: "absolute top-0 bottom-0 right-0 bg-muted/60 pointer-events-none rounded-md",
+                    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}%`
                     }
@@ -16327,18 +16336,18 @@ var Brush = ({
                 /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
                   "div",
                   {
-                    className: "absolute top-0 bottom-0 border cursor-move group rounded-md border-primary/30",
+                    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: "hsl(var(--primary) / 0.03)"
+                      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 w-6 h-10 flex items-center justify-center cursor-ew-resize active:scale-95 transition-all",
+                          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");
@@ -16346,9 +16355,9 @@ var Brush = ({
                           children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
                             "div",
                             {
-                              className: "w-2 h-7 rounded-full shadow-md ring-2 ring-background flex flex-col items-center justify-center gap-0.5",
+                              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) / 0.7)"
+                                backgroundColor: brushColor ?? "hsl(var(--primary))"
                               }
                             }
                           )
@@ -16357,7 +16366,7 @@ var Brush = ({
                       /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
                         "div",
                         {
-                          className: "absolute top-1/2 -translate-y-1/2 -right-3 w-6 h-10 flex items-center justify-center cursor-ew-resize active:scale-95 transition-all",
+                          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");
@@ -16365,9 +16374,9 @@ var Brush = ({
                           children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
                             "div",
                             {
-                              className: "w-2 h-7 rounded-full shadow-md ring-2 ring-background flex flex-col items-center justify-center gap-0.5",
+                              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) / 0.7)"
+                                backgroundColor: brushColor ?? "hsl(var(--primary))"
                               }
                             }
                           )
@@ -17236,12 +17245,7 @@ var Chart = ({
     }
     return timeSeries;
   }, [timeSeries]);
-  const {
-    startIndex,
-    endIndex,
-    brushRef,
-    handleMouseDown
-  } = useTimeSeriesRange({
+  const { startIndex, endIndex, brushRef, handleMouseDown } = useTimeSeriesRange({
     dataLength: data.length,
     defaultStartIndex: timeSeriesConfig?.start,
     defaultEndIndex: timeSeriesConfig?.end,
@@ -17382,6 +17386,7 @@ 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));
@@ -17451,63 +17456,83 @@ var Chart = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { ref: wrapperRef, className: "w-full overflow-hidden min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime97.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: [
+      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_runtime97.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_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) && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex items-center w-[98%] ml-[90px] gap-2", 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`
             },
@@ -17907,9 +17932,9 @@ var Chart = ({
             }
           }
         )
-      ]
+      ] })
     }
-  ) });
+  );
 };
 var Chart_default = Chart;
 
@@ -19310,9 +19335,12 @@ function Leaderboard({
   title = "LeaderBoard",
   className,
   isLoading = false,
-  legend
+  legend,
+  best = false,
+  worst = false
 }) {
   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 },
@@ -19326,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") {
@@ -19338,7 +19369,20 @@ 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";
@@ -19348,31 +19392,48 @@ function Leaderboard({
   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_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", children: title }),
+        /* @__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_runtime102.jsx)(import_react100.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_runtime102.jsx)("div", { className: "overflow-y-auto flex-1", 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.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" })
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(SkeletonBase, { className: "h-4 w-36 rounded-full" })
           ] }),
           /* @__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]?.[0] ?? "Participante" }),
-            /* @__PURE__ */ (0, import_jsx_runtime102.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)("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_runtime102.jsx)("ul", { children: sortedData.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
             import_framer_motion22.motion.span,
@@ -19382,13 +19443,13 @@ function Leaderboard({
               transition: { delay: idx * 5e-3 },
               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: idx + 1 }),
+                  /* @__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_runtime102.jsx)(
                   Badge,
                   {
-                    color: getBadgeColor(item.value),
+                    color: getBadgeColor(item.value, idx, sortedData.length),
                     size: "md",
                     className: "font-bold",
                     children: item.value

package/dist/index.mjs

@@ -1190,14 +1190,14 @@ var Toaster = ({ testId, ...props }) => {
             text-foreground
             shadow-xl rounded-lg
             border-l-4
-            border-border
+
             flex items-center gap-3
             transition-all duration-300
             hover:scale-[1.02] hover:shadow-2xl
-            data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50/95 data-[type=success]:text-green-800 data-[type=success]:border-green-500
+            data-[type=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
+            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-xs
@@ -14059,6 +14059,11 @@ function WeekView({
 // src/components/ui/selects/AvatarCombobox.tsx
 import { useId as useId3, useState as useState36 } from "react";
 import { CaretDownIcon as CaretDownIcon6, CheckIcon as CheckIcon11 } from "@phosphor-icons/react";
+
+// public/pwa-512x512.png
+var pwa_512x512_default = "./pwa-512x512-4NJPUGCI.png";
+
+// src/components/ui/selects/AvatarCombobox.tsx
 import { Fragment as Fragment13, jsx as jsx85, jsxs as jsxs63 } from "react/jsx-runtime";
 var DEFAULT_COLORS = [
   "bg-purple-100 text-purple-700",
@@ -14107,10 +14112,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__ */ jsxs63(Fragment13, { children: [
-      /* @__PURE__ */ jsx85(Square, { className: colorClass, children: avatarContent }),
+      /* @__PURE__ */ jsx85(Square, { className: colorClass, children: !avatarContent ? /* @__PURE__ */ jsx85("img", { src: pwa_512x512_default }) : avatarContent }),
       /* @__PURE__ */ jsx85("span", { className: "truncate", children: item.label })
     ] });
   };
@@ -16142,7 +16151,7 @@ var Brush = ({
                 /* @__PURE__ */ jsx94(
                   "div",
                   {
-                    className: "absolute top-0 bottom-0 left-0 bg-muted/60 pointer-events-none rounded-md",
+                    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}%`
                     }
@@ -16151,7 +16160,7 @@ var Brush = ({
                 /* @__PURE__ */ jsx94(
                   "div",
                   {
-                    className: "absolute top-0 bottom-0 right-0 bg-muted/60 pointer-events-none rounded-md",
+                    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}%`
                     }
@@ -16160,18 +16169,18 @@ var Brush = ({
                 /* @__PURE__ */ jsxs72(
                   "div",
                   {
-                    className: "absolute top-0 bottom-0 border cursor-move group rounded-md border-primary/30",
+                    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: "hsl(var(--primary) / 0.03)"
+                      backgroundColor: "transparent"
                     },
                     onMouseDown: (e) => onMouseDown(e, "middle"),
                     children: [
                       /* @__PURE__ */ jsx94(
                         "div",
                         {
-                          className: "absolute top-1/2 -translate-y-1/2 -left-3 w-6 h-10 flex items-center justify-center cursor-ew-resize active:scale-95 transition-all",
+                          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");
@@ -16179,9 +16188,9 @@ var Brush = ({
                           children: /* @__PURE__ */ jsx94(
                             "div",
                             {
-                              className: "w-2 h-7 rounded-full shadow-md ring-2 ring-background flex flex-col items-center justify-center gap-0.5",
+                              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) / 0.7)"
+                                backgroundColor: brushColor ?? "hsl(var(--primary))"
                               }
                             }
                           )
@@ -16190,7 +16199,7 @@ var Brush = ({
                       /* @__PURE__ */ jsx94(
                         "div",
                         {
-                          className: "absolute top-1/2 -translate-y-1/2 -right-3 w-6 h-10 flex items-center justify-center cursor-ew-resize active:scale-95 transition-all",
+                          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");
@@ -16198,9 +16207,9 @@ var Brush = ({
                           children: /* @__PURE__ */ jsx94(
                             "div",
                             {
-                              className: "w-2 h-7 rounded-full shadow-md ring-2 ring-background flex flex-col items-center justify-center gap-0.5",
+                              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) / 0.7)"
+                                backgroundColor: brushColor ?? "hsl(var(--primary))"
                               }
                             }
                           )
@@ -17069,12 +17078,7 @@ var Chart = ({
     }
     return timeSeries;
   }, [timeSeries]);
-  const {
-    startIndex,
-    endIndex,
-    brushRef,
-    handleMouseDown
-  } = useTimeSeriesRange({
+  const { startIndex, endIndex, brushRef, handleMouseDown } = useTimeSeriesRange({
     dataLength: data.length,
     defaultStartIndex: timeSeriesConfig?.start,
     defaultEndIndex: timeSeriesConfig?.end,
@@ -17215,6 +17219,7 @@ 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));
@@ -17284,63 +17289,83 @@ var Chart = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx97("div", { ref: wrapperRef, className: "w-full overflow-hidden min-w-0", children: /* @__PURE__ */ jsxs75(
+  return /* @__PURE__ */ jsx97(
     "div",
     {
-      className: cn(
-        "rounded-lg bg-card relative w-full max-w-full min-w-0",
-        className
-      ),
-      children: [
+      ref: wrapperRef,
+      className: cn("w-full overflow-hidden min-w-0 rounded-lg", className),
+      children: /* @__PURE__ */ jsxs75("div", { className: "rounded-lg bg-card relative w-full max-w-full min-w-0", children: [
         title && /* @__PURE__ */ jsx97(
           "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__ */ jsx97("div", { className: "text-[1.4rem] font-semibold text-foreground mb-3", children: title })
+            children: /* @__PURE__ */ jsxs75("div", { className: "text-[1.4rem] font-semibold text-foreground mb-3", children: [
+              title,
+              /* @__PURE__ */ jsx97(
+                "div",
+                {
+                  className: "absolute inset-0 flex items-center justify-center pointer-events-none z-50 select-text overflow-hidden",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx97("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__ */ jsxs75(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2 mb-2",
+              HORIZONTAL_PADDING_CLASS
+            ),
+            children: [
+              enableHighlights && /* @__PURE__ */ jsx97(
+                Highlights_default,
+                {
+                  allKeys,
+                  mapperConfig,
+                  finalColors,
+                  highlightedSeries,
+                  toggleHighlight,
+                  containerWidth: chartInnerWidth
+                }
+              ),
+              enableShowOnly && /* @__PURE__ */ jsx97(
+                ShowOnly_default,
+                {
+                  showOnlyHighlighted,
+                  setShowOnlyHighlighted,
+                  highlightedSeriesSize: highlightedSeries.size,
+                  clearHighlights
+                }
+              ),
+              enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx97("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx97(
+                PeriodsDropdown_default,
+                {
+                  processedData,
+                  onOpenPeriod: openTooltipForPeriod,
+                  rightOffset: finalChartRightMargin,
+                  activePeriods
+                }
+              ) })
+            ]
           }
         ),
-        allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxs75("div", { className: "flex items-center w-[98%] ml-[90px] gap-2", children: [
-          enableHighlights && /* @__PURE__ */ jsx97(
-            Highlights_default,
-            {
-              allKeys,
-              mapperConfig,
-              finalColors,
-              highlightedSeries,
-              toggleHighlight,
-              containerWidth: chartInnerWidth
-            }
-          ),
-          enableShowOnly && /* @__PURE__ */ jsx97(
-            ShowOnly_default,
-            {
-              showOnlyHighlighted,
-              setShowOnlyHighlighted,
-              highlightedSeriesSize: highlightedSeries.size,
-              clearHighlights
-            }
-          ),
-          enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx97("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx97(
-            PeriodsDropdown_default,
-            {
-              processedData,
-              onOpenPeriod: openTooltipForPeriod,
-              rightOffset: finalChartRightMargin,
-              activePeriods
-            }
-          ) })
-        ] }),
         !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx97(
           "div",
           {
-            className: "w-full flex justify-end",
+            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`
             },
@@ -17740,9 +17765,9 @@ var Chart = ({
             }
           }
         )
-      ]
+      ] })
     }
-  ) });
+  );
 };
 var Chart_default = Chart;
 
@@ -19159,7 +19184,7 @@ var TimeSeries = ({
 var TimeSeries_default = TimeSeries;
 
 // src/components/ui/LeaderBoard.tsx
-import { CaretUpDownIcon as CaretUpDownIcon3 } from "@phosphor-icons/react";
+import { CaretUpDownIcon as CaretUpDownIcon3, MagnifyingGlassIcon as MagnifyingGlassIcon3 } from "@phosphor-icons/react";
 import { useState as useState46 } from "react";
 import { motion as motion22 } from "framer-motion";
 import { jsx as jsx102, jsxs as jsxs79 } from "react/jsx-runtime";
@@ -19169,9 +19194,12 @@ function Leaderboard({
   title = "LeaderBoard",
   className,
   isLoading = false,
-  legend
+  legend,
+  best = false,
+  worst = false
 }) {
   const [order, setOrder] = useState46(initialOrder);
+  const [searchTerm, setSearchTerm] = useState46("");
   const mockData = [
     { name: "Ana", value: 92 },
     { name: "Bruno", value: 81 },
@@ -19185,7 +19213,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") {
@@ -19197,7 +19228,20 @@ 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";
@@ -19207,31 +19251,48 @@ function Leaderboard({
   return /* @__PURE__ */ jsxs79(
     "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__ */ jsxs79("div", { className: "flex items-center justify-between py-2 px-4 border-b flex-shrink-0 gap-3", children: [
-          /* @__PURE__ */ jsx102("h2", { className: "text-lg font-semibold px-1", children: title }),
+        /* @__PURE__ */ jsxs79("div", { className: "flex items-center justify-between py-2 px-4 border-b flex-shrink-0 gap-3 ", children: [
+          /* @__PURE__ */ jsx102("h2", { className: "text-lg font-semibold px-1 whitespace-nowrap", children: title }),
+          /* @__PURE__ */ jsx102("div", { className: "flex-1 max-w-[200px]", children: /* @__PURE__ */ jsx102(
+            InputBase,
+            {
+              value: searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value),
+              placeholder: "Pesquisar...",
+              leftIcon: /* @__PURE__ */ jsx102(MagnifyingGlassIcon3, { size: 16 }),
+              className: "h-8 py-1"
+            }
+          ) }),
           /* @__PURE__ */ jsx102(
             ButtonBase,
             {
               size: "icon",
-              variant: "ghost",
+              variant: "outline",
               onClick: () => setOrder(order === "desc" ? "asc" : "desc"),
               disabled: isLoading || sortedData.length === 0,
-              children: /* @__PURE__ */ jsx102(CaretUpDownIcon3, {})
+              children: /* @__PURE__ */ jsx102(
+                motion22.div,
+                {
+                  animate: { rotate: order === "asc" ? 180 : 0 },
+                  transition: { type: "spring", stiffness: 300, damping: 20 },
+                  children: /* @__PURE__ */ jsx102(CaretUpDownIcon3, {})
+                }
+              )
             }
           )
         ] }),
-        /* @__PURE__ */ jsx102("div", { className: "overflow-y-auto flex-1", children: isLoading ? /* @__PURE__ */ jsx102("div", { className: "p-4 space-y-3", children: Array.from({ length: 5 }).map((_, idx) => /* @__PURE__ */ jsxs79("div", { className: "flex items-center justify-between p-1", children: [
+        /* @__PURE__ */ jsx102("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__ */ jsx102("div", { className: "p-4 space-y-3", children: Array.from({ length: 5 }).map((_, idx) => /* @__PURE__ */ jsxs79("div", { className: "flex items-center justify-between p-1", children: [
           /* @__PURE__ */ jsxs79("div", { className: "flex items-center gap-3 flex-1", children: [
             /* @__PURE__ */ jsx102(SkeletonBase, { className: "w-8 h-8 rounded-full" }),
-            /* @__PURE__ */ jsx102(SkeletonBase, { className: "h-4 w-36" })
+            /* @__PURE__ */ jsx102(SkeletonBase, { className: "h-4 w-36 rounded-full" })
           ] }),
           /* @__PURE__ */ jsx102(SkeletonBase, { className: "h-6 w-12 rounded-full" })
         ] }, idx)) }) : sortedData.length === 0 ? /* @__PURE__ */ jsx102("div", { className: "flex items-center justify-center h-full py-12", children: /* @__PURE__ */ jsx102("p", { className: "text-muted-foreground text-sm", children: "Sem dados dispon\xEDveis" }) }) : /* @__PURE__ */ jsxs79("div", { children: [
           /* @__PURE__ */ jsxs79("div", { className: "flex items-center justify-between py-2.5 px-4 border-b flex-shrink-0 gap-3 sticky top-0 bg-background", children: [
-            /* @__PURE__ */ jsx102("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider pl-1", children: legend?.[0]?.[0] ?? "Participante" }),
-            /* @__PURE__ */ jsx102("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: legend?.[0]?.[1] ?? "Pontua\xE7\xE3o" })
+            /* @__PURE__ */ jsx102("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider pl-1", children: legend?.[0] }),
+            /* @__PURE__ */ jsx102("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: legend?.[1] })
           ] }),
           /* @__PURE__ */ jsx102("ul", { children: sortedData.map((item, idx) => /* @__PURE__ */ jsx102(
             motion22.span,
@@ -19241,13 +19302,13 @@ function Leaderboard({
               transition: { delay: idx * 5e-3 },
               children: /* @__PURE__ */ jsxs79("li", { className: "flex items-center justify-between py-3 border-b last:border-b-0 hover:bg-muted transition-colors px-4", children: [
                 /* @__PURE__ */ jsxs79("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ jsx102("span", { className: "text-sm text-gray-400 w-6 h-6 border rounded-full text-center bg-muted/50", children: idx + 1 }),
+                  /* @__PURE__ */ jsx102("span", { className: "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__ */ jsx102("span", { className: "font-medium", children: item.name })
                 ] }),
                 /* @__PURE__ */ jsx102(
                   Badge,
                   {
-                    color: getBadgeColor(item.value),
+                    color: getBadgeColor(item.value, idx, sortedData.length),
                     size: "md",
                     className: "font-bold",
                     children: item.value

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@mlw-packages/react-components",
+  "developer": "Eduardo Ronchi de Araujo - Desenvolvidor de Sistemas Junio",
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.8.6",
+  "version": "1.8.7",
   "homepage": "https://main--68e80310a069c2f10b546ef3.chromatic.com/",
   "repository": {
     "type": "git",