@mlw-packages/react-components 1.9.7 → 1.9.8

package/dist/index.js

@@ -1891,9 +1891,9 @@ var InputBase = React33__namespace.forwardRef(
         "div",
         {
           className: cn(
-            "flex items-center rounded-md transition h-9 focus-within:ring-1 focus-within:ring-ring focus-within:border-ring bg-background overflow-hidden",
+            "flex items-center rounded-md transition h-9  bg-background overflow-hidden",
             type !== "file" && "border border-input",
-            error ? "border-destructive focus:ring-1 focus:ring-destructive" : "border-input focus:ring-1 focus:ring-ring"
+            error ? "border-destructive focus:ring-1 focus:ring-destructive" : "border-input"
           ),
           children: [
             leftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center px-2", children: leftIcon }),
@@ -1977,87 +1977,130 @@ var CommandInputBase = React33__namespace.forwardRef(({ className, testid: dataT
   }
 ));
 CommandInputBase.displayName = cmdk.Command.Input.displayName;
-var CommandListBase = React33__namespace.forwardRef(({ className, testid: dataTestId = "command-list", ...props }, ref) => {
-  const listRef = React33__namespace.useRef(null);
-  React33__namespace.useEffect(() => {
-    const element = listRef.current;
-    if (!element) return;
-    const handleWheel = (e) => {
-      const target = e.currentTarget;
-      const { scrollTop, scrollHeight, clientHeight } = target;
-      const isScrollingDown = e.deltaY > 0;
-      const isScrollingUp = e.deltaY < 0;
-      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
-      const isAtTop = scrollTop <= 1;
-      if (isScrollingDown && !isAtBottom || isScrollingUp && !isAtTop) {
-        e.stopPropagation();
-      }
-    };
-    let touchStartY = 0;
-    const handleTouchStart = (e) => {
-      touchStartY = e.touches[0].clientY;
-      e.stopPropagation();
-    };
-    const handleTouchMove = (e) => {
-      const target = e.currentTarget;
-      const { scrollTop, scrollHeight, clientHeight } = target;
-      const touchCurrentY = e.touches[0].clientY;
-      const touchDeltaY = touchStartY - touchCurrentY;
-      const isScrollingDown = touchDeltaY > 0;
-      const isScrollingUp = touchDeltaY < 0;
-      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
-      const isAtTop = scrollTop <= 1;
-      if (isScrollingDown && !isAtBottom || isScrollingUp && !isAtTop) {
+var CommandDebouncedInputBase = React33__namespace.forwardRef(({ className, testid: dataTestId = "command-input", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    className: "flex items-center border-b px-3  border-border",
+    "cmdk-input-wrapper": "",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 text-primary" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        cmdk.Command.Input,
+        {
+          ref,
+          className: cn(
+            "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none text-primary placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          ),
+          "data-testid": dataTestId,
+          ...props
+        }
+      )
+    ]
+  }
+));
+CommandDebouncedInputBase.displayName = cmdk.Command.Input.displayName;
+var CommandListBase = React33__namespace.forwardRef(
+  ({ className, testid: dataTestId = "command-list", onEndReached, ...props }, ref) => {
+    const listRef = React33__namespace.useRef(null);
+    React33__namespace.useEffect(() => {
+      const element = listRef.current;
+      if (!element) return;
+      const handleWheel = (e) => {
+        const target = e.currentTarget;
+        const { scrollTop, scrollHeight, clientHeight } = target;
+        const isScrollingDown = e.deltaY > 0;
+        const isScrollingUp = e.deltaY < 0;
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
+        const isAtTop = scrollTop <= 1;
+        if (isScrollingDown && isAtBottom && onEndReached) {
+          onEndReached();
+        }
+        if (isScrollingDown && !isAtBottom || isScrollingUp && !isAtTop) {
+          e.stopPropagation();
+        }
+      };
+      const handleScroll = (e) => {
+        const target = e.currentTarget;
+        const { scrollTop, scrollHeight, clientHeight } = target;
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
+        if (isAtBottom && onEndReached) {
+          onEndReached();
+        }
+      };
+      let touchStartY = 0;
+      const handleTouchStart = (e) => {
+        touchStartY = e.touches[0].clientY;
         e.stopPropagation();
-      } else if (isScrollingDown && isAtBottom || isScrollingUp && isAtTop) {
-        e.preventDefault();
-      }
-    };
-    element.addEventListener("wheel", handleWheel, { passive: false });
-    element.addEventListener("touchstart", handleTouchStart, {
-      passive: false
-    });
-    element.addEventListener("touchmove", handleTouchMove, { passive: false });
-    return () => {
-      element.removeEventListener("wheel", handleWheel);
-      element.removeEventListener("touchmove", handleTouchMove);
-      element.removeEventListener("touchstart", handleTouchStart);
-    };
-  }, []);
-  const combinedRef = React33__namespace.useCallback(
-    (node) => {
-      listRef.current = node;
-      if (typeof ref === "function") {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
-      }
-    },
-    [ref]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    cmdk.Command.List,
-    {
-      ref: combinedRef,
-      className: cn(
-        "max-h-[300px] overflow-y-auto overflow-x-hidden scroll-smooth [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/50",
-        className
-      ),
-      "data-testid": dataTestId,
-      style: {
-        overscrollBehavior: "contain",
-        WebkitOverflowScrolling: "touch",
-        touchAction: "pan-y",
-        scrollbarWidth: "thin",
-        scrollbarColor: "hsl(var(--muted)) transparent",
-        overflowY: "auto",
-        willChange: "scroll-position",
-        transform: "translateZ(0)"
+      };
+      const handleTouchMove = (e) => {
+        const target = e.currentTarget;
+        const { scrollTop, scrollHeight, clientHeight } = target;
+        const touchCurrentY = e.touches[0].clientY;
+        const touchDeltaY = touchStartY - touchCurrentY;
+        const isScrollingDown = touchDeltaY > 0;
+        const isScrollingUp = touchDeltaY < 0;
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
+        const isAtTop = scrollTop <= 1;
+        if (isScrollingDown && isAtBottom && onEndReached) {
+          onEndReached();
+        }
+        if (isScrollingDown && !isAtBottom || isScrollingUp && !isAtTop) {
+          e.stopPropagation();
+        } else if (isScrollingDown && isAtBottom || isScrollingUp && isAtTop) {
+          e.preventDefault();
+        }
+      };
+      element.addEventListener("wheel", handleWheel, { passive: false });
+      element.addEventListener("scroll", handleScroll);
+      element.addEventListener("touchstart", handleTouchStart, {
+        passive: false
+      });
+      element.addEventListener("touchmove", handleTouchMove, {
+        passive: false
+      });
+      return () => {
+        element.removeEventListener("wheel", handleWheel);
+        element.removeEventListener("scroll", handleScroll);
+        element.removeEventListener("touchmove", handleTouchMove);
+        element.removeEventListener("touchstart", handleTouchStart);
+      };
+    }, [onEndReached]);
+    const combinedRef = React33__namespace.useCallback(
+      (node) => {
+        listRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
       },
-      ...props
-    }
-  );
-});
+      [ref]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      cmdk.Command.List,
+      {
+        ref: combinedRef,
+        className: cn(
+          "max-h-[300px] overflow-y-auto overflow-x-hidden scroll-smooth [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/50",
+          className
+        ),
+        "data-testid": dataTestId,
+        style: {
+          overscrollBehavior: "contain",
+          WebkitOverflowScrolling: "touch",
+          touchAction: "pan-y",
+          scrollbarWidth: "thin",
+          scrollbarColor: "hsl(var(--muted)) transparent",
+          overflowY: "auto",
+          willChange: "scroll-position",
+          transform: "translateZ(0)"
+        },
+        ...props
+      }
+    );
+  }
+);
 CommandListBase.displayName = cmdk.Command.List.displayName;
 var CommandEmptyBase = React33__namespace.forwardRef(({ testid: dataTestId = "command-empty", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   cmdk.Command.Empty,
@@ -7323,58 +7366,62 @@ function StatusIndicator({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children })
   ] });
 }
-function DebouncedInput({
-  value: initialValue,
-  onChange,
-  debounce: debounce2 = 500,
-  label,
-  labelClassname,
-  leftIcon,
-  rightIcon,
-  showLoadingIndicator = false,
-  className,
-  error,
-  ...props
-}) {
-  const [value, setValue] = React33.useState(initialValue);
-  const [isDebouncing, setIsDebouncing] = React33.useState(false);
-  React33.useEffect(() => {
-    setValue(initialValue);
-  }, [initialValue]);
-  React33.useEffect(() => {
-    if (value !== initialValue) {
-      setIsDebouncing(true);
-    }
-    const timeout = setTimeout(() => {
-      onChange(value);
-      setIsDebouncing(false);
-    }, debounce2);
-    return () => {
-      clearTimeout(timeout);
-      setIsDebouncing(false);
+var DebouncedInput = React33.forwardRef(
+  ({
+    value: initialValue,
+    onChange,
+    debounce: debounce2 = 500,
+    label,
+    labelClassname,
+    leftIcon,
+    rightIcon,
+    showLoadingIndicator = false,
+    className,
+    error,
+    ...props
+  }, ref) => {
+    const [value, setValue] = React33.useState(initialValue);
+    const [isDebouncing, setIsDebouncing] = React33.useState(false);
+    React33.useEffect(() => {
+      setValue(initialValue);
+    }, [initialValue]);
+    React33.useEffect(() => {
+      if (value !== initialValue) {
+        setIsDebouncing(true);
+      }
+      const timeout = setTimeout(() => {
+        onChange(value);
+        setIsDebouncing(false);
+      }, debounce2);
+      return () => {
+        clearTimeout(timeout);
+        setIsDebouncing(false);
+      };
+    }, [debounce2, initialValue, onChange, value]);
+    const renderRightIcon = () => {
+      if (showLoadingIndicator && isDebouncing) {
+        return /* @__PURE__ */ jsxRuntime.jsx(react.CircleNotchIcon, { className: "h-4 w-4 animate-spin  text-muted-foreground" });
+      }
+      return rightIcon;
     };
-  }, [debounce2, initialValue, onChange, value]);
-  const renderRightIcon = () => {
-    if (showLoadingIndicator && isDebouncing) {
-      return /* @__PURE__ */ jsxRuntime.jsx(react.CircleNotchIcon, { className: "h-4 w-4 animate-spin  text-muted-foreground" });
-    }
-    return rightIcon;
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    InputBase,
-    {
-      ...props,
-      label,
-      labelClassname,
-      leftIcon,
-      rightIcon: renderRightIcon(),
-      className: cn("transition-all duration-200", className),
-      value,
-      onChange: (e) => setValue(e.target.value),
-      error
-    }
-  );
-}
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      InputBase,
+      {
+        ...props,
+        ref,
+        label,
+        labelClassname,
+        leftIcon,
+        rightIcon: renderRightIcon(),
+        className: cn("transition-all duration-200", className),
+        value,
+        onChange: (e) => setValue(e.target.value),
+        error
+      }
+    );
+  }
+);
+DebouncedInput.displayName = "DebouncedInput";
 function useCheckboxTree(initialTree) {
   const initialCheckedNodes = React33.useMemo(() => {
     const checkedSet = /* @__PURE__ */ new Set();
@@ -9144,19 +9191,19 @@ function getEventColorClassesAgenda(color) {
   const eventColor = color || "sky";
   switch (eventColor) {
     case "sky":
-      return "bg-sky-200/50 hover:bg-sky-200/40 text-sky-950/80 dark:bg-sky-400/25 dark:hover:bg-sky-400/20 dark:text-sky-200 shadow-sky-700/8";
+      return "bg-sky-100 hover:bg-sky-200 text-sky-900 border dark:bg-sky-500/30 dark:hover:bg-sky-500/40 dark:text-sky-50 dark:border-sky-400/40 shadow-sky-500/15  hover:shadow-sky-500/25 transition-all duration-200";
     case "amber":
-      return "bg-amber-200/50 hover:bg-amber-200/40 text-amber-950/80 dark:bg-amber-400/25 dark:hover:bg-amber-400/20 dark:text-amber-200 shadow-amber-700/8";
+      return "bg-amber-100 hover:bg-amber-200 text-amber-900 border dark:bg-amber-500/30 dark:hover:bg-amber-500/40 dark:text-amber-50 dark:border-amber-400/40 shadow-amber-500/15  hover:shadow-amber-500/25 transition-all duration-200";
     case "violet":
-      return "bg-violet-200/50 hover:bg-violet-200/40 text-violet-950/80 dark:bg-violet-400/25 dark:hover:bg-violet-400/20 dark:text-violet-200 shadow-violet-700/8";
+      return "bg-violet-100 hover:bg-violet-200 text-violet-900 border dark:bg-violet-500/30 dark:hover:bg-violet-500/40 dark:text-violet-50 dark:border-violet-400/40 shadow-violet-500/15  hover:shadow-violet-500/25 transition-all duration-200";
     case "rose":
-      return "bg-rose-200/50 hover:bg-rose-200/40 text-rose-950/80 dark:bg-rose-400/25 dark:hover:bg-rose-400/20 dark:text-rose-200 shadow-rose-700/8";
+      return "bg-rose-100 hover:bg-rose-200 text-rose-900 border dark:bg-rose-500/30 dark:hover:bg-rose-500/40 dark:text-rose-50 dark:border-rose-400/40  shadow-rose-500/15  hover:shadow-rose-500/25 transition-all duration-200";
     case "emerald":
-      return "bg-emerald-200/50 hover:bg-emerald-200/40 text-emerald-950/80 dark:bg-emerald-400/25 dark:hover:bg-emerald-400/20 dark:text-emerald-200 shadow-emerald-700/8";
+      return "bg-emerald-100 hover:bg-emerald-200 text-emerald-900 border dark:bg-emerald-500/30 dark:hover:bg-emerald-500/40 dark:text-emerald-50 dark:border-emerald-400/40  shadow-emerald-500/15  hover:shadow-emerald-500/25 transition-all duration-200";
     case "orange":
-      return "bg-orange-200/50 hover:bg-orange-200/40 text-orange-950/80 dark:bg-orange-400/25 dark:hover:bg-orange-400/20 dark:text-orange-200 shadow-orange-700/8";
+      return "bg-orange-100 hover:bg-orange-200 text-orange-900 border dark:bg-orange-500/30 dark:hover:bg-orange-500/40 dark:text-orange-50 dark:border-orange-400/40  shadow-orange-500/15  hover:shadow-orange-500/25 transition-all duration-200";
     default:
-      return "bg-sky-200/50 hover:bg-sky-200/40 text-sky-950/80 dark:bg-sky-400/25 dark:hover:bg-sky-400/20 dark:text-sky-200 shadow-sky-700/8";
+      return "bg-sky-100 hover:bg-sky-200 text-sky-900 border dark:bg-sky-500/30 dark:hover:bg-sky-500/40 dark:text-sky-50 dark:border-sky-400/40  shadow-sky-500/15  hover:shadow-sky-500/25 transition-all duration-200";
   }
 }
 function getBorderRadiusClassesAgenda(isFirstDay, isLastDay) {
@@ -9175,7 +9222,7 @@ function isMultiDayEventAgenda(event) {
   const eventStart = getEventStartDate(event);
   const eventEnd = getEventEndDate(event);
   if (!eventStart || !eventEnd) return !!event.allDay;
-  return event.allDay || eventStart.getDate() !== eventEnd.getDate();
+  return event.allDay || !dateFns.isSameDay(eventStart, eventEnd);
 }
 function getEventsForDayAgenda(events, day) {
   return events.filter((event) => {
@@ -9331,12 +9378,13 @@ function EventWrapper({
     return void 0;
   })();
   const isEventInPast = displayEnd ? dateFns.isPast(displayEnd) : false;
-  const colorClasses = hasValidTimeForWrapper ? getEventColorClassesAgenda(event.color) : "bg-gray-200/50 hover:bg-gray-200/40 text-gray-900/80 dark:bg-gray-700/25 dark:text-gray-200/90 shadow-none";
+  const colorClasses = hasValidTimeForWrapper ? getEventColorClassesAgenda(event.color) : "bg-gray-200/50 hover:bg-gray-200/40 text-gray-900/80 dark:bg-gray-700/25 dark:text-gray-200/90 shadow-none ";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       className: cn(
-        "flex w-full select-none overflow-hidden px-3 py-1 text-left font-medium outline-none transition-transform duration-150 ease-out backdrop-blur-sm focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:border-ring data-dragging:cursor-grabbing data-past-event:line-through data-dragging:shadow-lg sm:px-3 rounded-lg shadow-sm hover:shadow-md border",
+        "flex w-full select-none px-3 py-1 text-left font-medium outline-none transition-transform duration-150 ease-out backdrop-blur-sm focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:border-ring data-dragging:cursor-grabbing data-past-event:line-through data-dragging:shadow-lg sm:px-3 rounded-lg shadow-sm hover:shadow-md border ",
+        className?.includes("overflow-visible") ? "" : "overflow-hidden",
         colorClasses,
         getBorderRadiusClassesAgenda(isFirstDay, isLastDay),
         className
@@ -9961,7 +10009,7 @@ function Select({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaBase, { "data-testid": testIds.scrollarea ?? "select-scrollarea", children: /* @__PURE__ */ jsxRuntime.jsx(SelectContentBase, { "data-testid": testIds.content ?? "select-content", children: pagination && pagination > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaBase, { "data-testid": testIds.scrollarea ?? "select-scrollarea", children: /* @__PURE__ */ jsxRuntime.jsx(SelectContentBase, { "data-testid": testIds.content ?? "select-content", className: "border-border", children: pagination && pagination > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -10459,7 +10507,7 @@ function MonthViewAgenda({
                       "div",
                       {
                         className: tailwindMerge.twMerge(
-                          `mt-1 inline-flex w-6 h-6 sm:w-7 sm:h-7 items-center justify-center rounded-full text-xs sm:text-sm font-semibold text-muted-foreground`,
+                          `mt-1 inline-flex w-6 h-6 sm:w-7 sm:h-7 items-center justify-center border rounded-md text-xs sm:text-sm font-semibold text-muted-foreground`,
                           dateFns.isToday(day) ? "bg-blue-500 text-white" : ""
                         ),
                         children: dateFns.format(day, "d")
@@ -10492,21 +10540,19 @@ function MonthViewAgenda({
                                       isLastDay,
                                       onClick: (e) => handleEventClick(event, e),
                                       view: "month",
-                                      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 truncate text-[12px] text-foreground", children: [
-                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] opacity-80", children: "\u2192" }),
-                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: event.title })
-                                      ] })
+                                      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 truncate text-[12px] text-foreground" })
                                     }
                                   )
                                 },
                                 `spanning-${event.id}-${day.toISOString().slice(0, 10)}`
                               );
                             }
+                            const isMultiDay = !isLastDay;
                             return /* @__PURE__ */ jsxRuntime.jsx(
                               "div",
                               {
                                 "aria-hidden": isHidden ? "true" : void 0,
-                                className: "aria-hidden:hidden",
+                                className: "aria-hidden:hidden relative",
                                 children: /* @__PURE__ */ jsxRuntime.jsx(
                                   EventItemAgenda,
                                   {
@@ -10515,9 +10561,16 @@ function MonthViewAgenda({
                                     isLastDay,
                                     onClick: (e) => handleEventClick(event, e),
                                     view: "month",
-                                    children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 sm:gap-2 truncate text-[12px] text-foreground", children: [
+                                    className: isMultiDay ? "overflow-visible" : "",
+                                    children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 sm:gap-2 truncate text-[12px] text-foreground relative z-10", children: [
                                       !event.allDay && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-normal opacity-80 text-[10px] sm:text-[11px] bg-white/10 px-1 py-0.5 rounded-full", children: dateFns.format(eventStart, "HH:mm") }),
-                                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium text-xs sm:text-sm", children: event.title })
+                                      /* @__PURE__ */ jsxRuntime.jsx(
+                                        "span",
+                                        {
+                                          className: `font-medium text-xs sm:text-sm ${isMultiDay ? "whitespace-nowrap" : "truncate"}`,
+                                          children: event.title
+                                        }
+                                      )
                                     ] })
                                   }
                                 )
@@ -13283,13 +13336,13 @@ function getEventColorClasses(color) {
 }
 function getBorderRadiusClasses(isFirstDay, isLastDay) {
   if (isFirstDay && isLastDay) {
-    return "rounded";
+    return "rounded-lg";
   }
   if (isFirstDay) {
-    return "rounded-l rounded-r-none";
+    return "rounded-l-lg rounded-r-none";
   }
   if (isLastDay) {
-    return "rounded-r rounded-l-none";
+    return "rounded-r-lg rounded-l-none";
   }
   return "rounded-none";
 }
@@ -15123,7 +15176,7 @@ var DraggableTooltipComponent = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
           {
-            className: "fixed pointer-events-none z-30",
+            className: "fixed pointer-events-none z-[9998]",
             variants: guideVariants,
             initial: "hidden",
             animate: "visible",
@@ -15145,7 +15198,7 @@ var DraggableTooltipComponent = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
           {
-            className: "fixed pointer-events-none z-31",
+            className: "fixed pointer-events-none z-[9999]",
             variants: guideDotVariants,
             initial: "hidden",
             animate: "visible",
@@ -15185,7 +15238,7 @@ var DraggableTooltipComponent = ({
     /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.div,
       {
-        className: "fixed bg-card border border-border rounded-lg shadow-lg z-50 min-w-80 select-none",
+        className: "fixed bg-card border border-border rounded-lg shadow-lg z-[10000] min-w-80 select-none",
         variants: tooltipVariants,
         initial: "hidden",
         animate: "visible",
@@ -15417,7 +15470,7 @@ var RechartTooltipWithTotal = ({
     {
       role: "dialog",
       "aria-label": `Tooltip ${label ?? ""}`,
-      className: "bg-card border border-border rounded-lg p-3 shadow-2xl max-w-xs z-9999",
+      className: "bg-card border border-border rounded-lg p-3 shadow-2xl max-w-xs z-[10000]",
       style: { minWidth: 220 },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-2", children: [
@@ -15530,7 +15583,7 @@ var TooltipSimple = ({
     {
       role: "dialog",
       "aria-label": `Tooltip ${label ?? ""}`,
-      className: "bg-card border border-border rounded-lg p-3 shadow-2xl max-w-[280px] z-9999",
+      className: "bg-card border border-border rounded-lg p-3 shadow-2xl max-w-[280px] z-[10000]",
       style: { minWidth: 220 },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
@@ -15719,7 +15772,7 @@ var SystemTooltip = ({
   return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     framerMotion.motion.div,
     {
-      className: "fixed bg-card/95 backdrop-blur-md border border-border/50 rounded-xl shadow-2xl z-50 w-80 overflow-hidden",
+      className: "fixed bg-card/95 backdrop-blur-md border border-border/50 rounded-xl shadow-2xl z-[10000] w-80 overflow-hidden",
       variants: tooltipVariants2,
       initial: "hidden",
       animate: "visible",
@@ -15794,7 +15847,9 @@ var SystemTooltip = ({
                   "div",
                   {
                     className: "group flex items-center justify-between p-2 rounded-lg bg-emerald-500/5 border border-emerald-500/10 hover:border-emerald-500/30 transition-all cursor-pointer",
-                    onClick: () => setExpandedId(expandedId === conn.id ? null : conn.id),
+                    onClick: () => setExpandedId(
+                      expandedId === conn.id ? null : conn.id
+                    ),
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate", children: conn.name }) }),
                       /* @__PURE__ */ jsxRuntime.jsx(
@@ -15856,7 +15911,9 @@ var SystemTooltip = ({
                   "div",
                   {
                     className: "group flex items-center justify-between p-2 rounded-lg bg-blue-500/5 border border-blue-500/10 hover:border-blue-500/30 transition-all cursor-pointer",
-                    onClick: () => setExpandedId(expandedId === conn.id ? null : conn.id),
+                    onClick: () => setExpandedId(
+                      expandedId === conn.id ? null : conn.id
+                    ),
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate", children: conn.name }) }),
                       /* @__PURE__ */ jsxRuntime.jsx(
@@ -15917,6 +15974,35 @@ var SystemTooltip = ({
   ) });
 };
 var SystemTooltip_default = SystemTooltip;
+
+// src/components/ui/charts/components/tooltips/systemTooltipUtils.ts
+function processNeo4jData(integrations, targetSystemName) {
+  const connections = [];
+  integrations.forEach((integration) => {
+    const origemNome = integration.origem.properties.nome;
+    const destinoNome = integration.destino.properties.nome;
+    if (origemNome === targetSystemName) {
+      connections.push({
+        id: integration.r.elementId,
+        name: destinoNome,
+        type: "saida",
+        integration: integration.r.properties
+      });
+    }
+    if (destinoNome === targetSystemName) {
+      connections.push({
+        id: integration.r.elementId,
+        name: origemNome,
+        type: "entrada",
+        integration: integration.r.properties
+      });
+    }
+  });
+  return {
+    name: targetSystemName,
+    connections
+  };
+}
 var Brush = ({
   data,
   legend,
@@ -16621,7 +16707,7 @@ var NoData = ({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "svg",
           {
-            className: "w-full h-[var(--svg-h)] opacity-40",
+            className: "w-full h-full opacity-40",
             viewBox: `0 0 900 ${h}`,
             preserveAspectRatio: "none",
             children: [
@@ -17391,6 +17477,16 @@ var Chart = ({
   // horizontal removido
   // orderBy removido
 }) => {
+  const usesFullHeight = typeof height === "string" && (height === "100%" || height === "100vh") || typeof className === "string" && /\bh-full\b/.test(className || "");
+  const responsiveHeight = usesFullHeight ? "100%" : height;
+  const wrapperClass = cn(
+    "w-full min-w-0 rounded-lg border-border",
+    className,
+    "overflow-hidden"
+  );
+  const wrapperStyle = usesFullHeight ? void 0 : {
+    height: typeof responsiveHeight === "number" ? `${responsiveHeight}px` : responsiveHeight
+  };
   const { xAxisConfig, mapperConfig } = React33.useMemo(() => {
     return fnSmartConfig({ xAxis, data, labelMap });
   }, [data, xAxis, labelMap]);
@@ -17534,6 +17630,10 @@ var Chart = ({
     maxTooltips,
     effectiveChartWidth
   });
+  const legendSpace = showLegend ? 44 : 0;
+  const xAxisLabelSpace = xAxisLabel ? 18 : 0;
+  const brushSpace = timeSeriesConfig?.height ? 200 : 0;
+  const bottomMargin = 10 + legendSpace + xAxisLabelSpace + brushSpace;
   if (!data && !isLoading) return null;
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -17557,16 +17657,13 @@ var Chart = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: wrapperRef,
-      className: cn(
-        "w-full overflow-hidden min-w-0 rounded-lg border-border h-full",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-card relative w-full max-w-full min-w-0 py-1", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className: wrapperClass, style: wrapperStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "rounded-lg bg-card relative w-full max-w-full min-w-0 py-1",
+        style: usesFullHeight ? { height: "100%" } : void 0,
+        children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             ChartHeader,
             {
@@ -17628,16 +17725,15 @@ var Chart = ({
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height, className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: responsiveHeight, children: /* @__PURE__ */ jsxRuntime.jsxs(
             recharts.ComposedChart,
             {
               data: processedData,
-              height,
               margin: {
                 top: 10,
                 right: finalChartRightMargin,
                 left: finalChartLeftMargin,
-                bottom: 10
+                bottom: bottomMargin
               },
               onClick: handleChartClick,
               children: [
@@ -17918,67 +18014,67 @@ var Chart = ({
               ]
             }
           ) })
-        ] }),
-        enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ jsxRuntime.jsx(
-          DraggableTooltip_default,
-          {
-            id: tooltip.id,
-            data: adaptDataForTooltip(tooltip.data, xAxisConfig.dataKey),
-            position: tooltip.position,
-            title,
-            dataKeys: allKeys,
-            finalColors,
-            highlightedSeries,
-            toggleHighlight,
-            showOnlyHighlighted,
-            onClose: (id) => setActiveTooltips((prev) => prev.filter((t) => t.id !== id)),
-            onPositionChange: onTooltipPositionChange,
-            periodLabel,
-            dataLabel: "Dados do Per\xEDodo",
-            valueFormatter: finalValueFormatter,
-            categoryFormatter,
-            globalTooltipCount: activeTooltips.length,
-            onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
-            closeAllButtonPosition: "top-center",
-            closeAllButtonVariant: "floating"
-          },
-          tooltip.id
-        )),
-        enableDraggableTooltips && activeTooltips.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-          CloseAllButton_default,
-          {
-            count: activeTooltips.length,
-            onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
-            position: "top-center",
-            variant: "floating"
-          }
-        ),
-        timeSeriesConfig && /* @__PURE__ */ jsxRuntime.jsx(
-          Brush_default,
-          {
-            legend: timeSeriesLegend,
-            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
-            }
-          }
-        )
-      ]
-    }
-  );
+        ]
+      }
+    ),
+    enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ jsxRuntime.jsx(
+      DraggableTooltip_default,
+      {
+        id: tooltip.id,
+        data: adaptDataForTooltip(tooltip.data, xAxisConfig.dataKey),
+        position: tooltip.position,
+        title,
+        dataKeys: allKeys,
+        finalColors,
+        highlightedSeries,
+        toggleHighlight,
+        showOnlyHighlighted,
+        onClose: (id) => setActiveTooltips((prev) => prev.filter((t) => t.id !== id)),
+        onPositionChange: onTooltipPositionChange,
+        periodLabel,
+        dataLabel: "Dados do Per\xEDodo",
+        valueFormatter: finalValueFormatter,
+        categoryFormatter,
+        globalTooltipCount: activeTooltips.length,
+        onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
+        closeAllButtonPosition: "top-center",
+        closeAllButtonVariant: "floating"
+      },
+      tooltip.id
+    )),
+    enableDraggableTooltips && activeTooltips.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+      CloseAllButton_default,
+      {
+        count: activeTooltips.length,
+        onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
+        position: "top-center",
+        variant: "floating"
+      }
+    ),
+    timeSeriesConfig && /* @__PURE__ */ jsxRuntime.jsx(
+      Brush_default,
+      {
+        legend: timeSeriesLegend,
+        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;
 var DEFAULT_COLORS3 = ["#0d1136", "#666655", "#1a1a1a"];
@@ -19092,6 +19188,7 @@ exports.isValidHour = isValidHour;
 exports.isValidMinuteOrSecond = isValidMinuteOrSecond;
 exports.niceCeil = niceCeil;
 exports.normalizeAttendDate = normalizeAttendDate;
+exports.processNeo4jData = processNeo4jData;
 exports.renderInsideBarLabel = renderInsideBarLabel;
 exports.renderPillLabel = pillLabelRenderer_default;
 exports.resolveChartMargins = resolveChartMargins;