@mlw-packages/react-components 1.10.21 → 1.10.23

package/dist/index.js

@@ -1664,9 +1664,16 @@ var ModalContentBase = React32__namespace.forwardRef(
     size = "md",
     centered = true,
     backdropBlur = true,
+    noPadding = false,
     ...props
   }, ref) => {
-    const sizeClass = size === "sm" ? "max-w-md" : size === "lg" ? "max-w-4xl" : size === "full" ? "w-full max-w-[calc(100%-2rem)]" : "max-w-2xl";
+    const sizeClass = {
+      sm: "max-w-md",
+      md: "max-w-2xl",
+      lg: "max-w-4xl",
+      xl: "max-w-6xl",
+      full: "w-full max-w-[calc(100%-2rem)]"
+    }[size];
     const positionClass = centered ? "left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]" : "left-[50%] top-20 translate-x-[-50%] translate-y-0 sm:translate-y-0";
     return /* @__PURE__ */ jsxRuntime.jsxs(ModalPortalBase, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1699,8 +1706,9 @@ var ModalContentBase = React32__namespace.forwardRef(
         {
           ref,
           className: cn(
-            "fixed z-50 grid w-[calc(100%-2rem)] gap-3 sm:gap-4 border bg-background p-4 sm:p-6 shadow-lg rounded-md sm:rounded-lg max-h-[calc(100dvh-2rem)] sm:max-h-[90dvh] overflow-auto",
+            "fixed z-50 grid w-[calc(100%-2rem)] border bg-background shadow-lg rounded-md sm:rounded-lg max-h-[calc(100dvh-2rem)] sm:max-h-[90dvh] overflow-auto",
             "data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out border-border",
+            !noPadding && "p-4 sm:p-6 gap-3 sm:gap-4",
             positionClass,
             sizeClass,
             className
@@ -20090,6 +20098,308 @@ function processNeo4jData(integrations, targetSystemName) {
     connections
   };
 }
+var AnimatedNumber = ({ value }) => {
+  const [displayed, setDisplayed] = React32__namespace.default.useState(value);
+  const prevRef = React32__namespace.default.useRef(value);
+  React32__namespace.default.useEffect(() => {
+    const start = prevRef.current;
+    const end = value;
+    if (start === end) return;
+    const duration = 420;
+    const startTime = performance.now();
+    const tick = (now) => {
+      const elapsed = now - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const eased = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
+      setDisplayed(Math.round(start + (end - start) * eased));
+      if (progress < 1) requestAnimationFrame(tick);
+      else prevRef.current = end;
+    };
+    requestAnimationFrame(tick);
+  }, [value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: displayed });
+};
+var Callout = ({
+  sx,
+  sy,
+  mx,
+  my,
+  ex,
+  ey,
+  fill,
+  name,
+  value,
+  percent,
+  isRight
+}) => /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+  framerMotion.motion.g,
+  {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.18 },
+    className: "z-9999",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.path,
+        {
+          d: `M${sx},${sy}L${mx},${my}L${ex},${ey}`,
+          stroke: fill,
+          fill: "none",
+          strokeWidth: 1.5,
+          strokeLinecap: "round",
+          initial: { pathLength: 0, opacity: 0 },
+          animate: { pathLength: 1, opacity: 1 },
+          exit: { pathLength: 0, opacity: 0 },
+          transition: { duration: 0.32, ease: "easeInOut" }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.circle,
+        {
+          cx: ex,
+          cy: ey,
+          r: 3,
+          fill,
+          initial: { scale: 0, opacity: 0 },
+          animate: { scale: 1, opacity: 1 },
+          exit: { scale: 0, opacity: 0 }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "foreignObject",
+        {
+          x: isRight ? ex + 10 : ex - 90,
+          y: ey - 24,
+          width: 90,
+          height: 48,
+          style: { overflow: "visible" },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            framerMotion.motion.div,
+            {
+              initial: {
+                opacity: 0,
+                x: isRight ? -14 : 14,
+                scale: 0.88,
+                filter: "blur(4px)"
+              },
+              animate: { opacity: 1, x: 0, scale: 1, filter: "blur(0px)" },
+              exit: {
+                opacity: 0,
+                x: isRight ? -8 : 8,
+                scale: 0.92,
+                filter: "blur(3px)"
+              },
+              transition: {
+                type: "spring",
+                stiffness: 460,
+                damping: 26,
+                mass: 0.8
+              },
+              style: { pointerEvents: "none" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  framerMotion.motion.div,
+                  {
+                    style: {
+                      fontSize: 15,
+                      fontWeight: 800,
+                      color: "#333",
+                      lineHeight: 1
+                    },
+                    initial: { y: 6, opacity: 0 },
+                    animate: { y: 0, opacity: 1 },
+                    exit: { y: -4, opacity: 0 },
+                    transition: {
+                      delay: 0.06,
+                      type: "spring",
+                      stiffness: 400,
+                      damping: 22
+                    },
+                    children: [
+                      "PV ",
+                      /* @__PURE__ */ jsxRuntime.jsx(AnimatedNumber, { value })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  framerMotion.motion.div,
+                  {
+                    style: { fontSize: 11, color: "#999", marginTop: 5 },
+                    initial: { y: 6, opacity: 0 },
+                    animate: { y: 0, opacity: 1 },
+                    exit: { y: -4, opacity: 0 },
+                    transition: {
+                      delay: 0.12,
+                      type: "spring",
+                      stiffness: 400,
+                      damping: 22
+                    },
+                    children: [
+                      "Rate ",
+                      (percent * 100).toFixed(2),
+                      "%"
+                    ]
+                  }
+                )
+              ]
+            },
+            name
+          )
+        }
+      )
+    ]
+  },
+  name
+) });
+var renderActiveShape = (props) => {
+  const RADIAN = Math.PI / 180;
+  const {
+    cx,
+    cy,
+    midAngle,
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle,
+    fill,
+    payload,
+    percent,
+    value
+  } = props;
+  const sin = Math.sin(-RADIAN * (midAngle ?? 0));
+  const cos = Math.cos(-RADIAN * (midAngle ?? 0));
+  const sx = (cx ?? 0) + ((outerRadius ?? 0) + 10) * cos;
+  const sy = (cy ?? 0) + ((outerRadius ?? 0) + 10) * sin;
+  const mx = (cx ?? 0) + ((outerRadius ?? 0) + 30) * cos;
+  const my = (cy ?? 0) + ((outerRadius ?? 0) + 30) * sin;
+  const ex = mx + (cos >= 0 ? 1 : -1) * 22;
+  const ey = my;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: cy, dy: 8, textAnchor: "middle", fill, children: payload?.name }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Sector,
+      {
+        cx,
+        cy,
+        innerRadius,
+        outerRadius,
+        startAngle,
+        endAngle,
+        fill
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Sector,
+      {
+        cx,
+        cy,
+        startAngle,
+        endAngle,
+        innerRadius: (outerRadius ?? 0) + 6,
+        outerRadius: (outerRadius ?? 0) + 10,
+        fill
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Callout,
+      {
+        sx,
+        sy,
+        mx,
+        my,
+        ex,
+        ey,
+        fill: fill ?? "#8884d8",
+        name: payload?.name,
+        value,
+        percent: percent ?? 0,
+        isRight: cos >= 0
+      }
+    )
+  ] });
+};
+var PieChartComponent = ({
+  data,
+  width = 400,
+  height = 300,
+  innerRadius = 60,
+  outerRadius = 80,
+  showLegend = true,
+  showTooltip = true,
+  title,
+  titlePosition = "left",
+  className
+}) => {
+  const [activeIndex, setActiveIndex] = React32.useState(0);
+  const finalColors = Object.fromEntries(
+    data.map((d) => [d.name, d.color || "#8884d8"])
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "w-full overflow-hidden min-w-0 rounded-lg border-border bg-card",
+        className
+      ),
+      tabIndex: -1,
+      children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx(
+          ChartHeader,
+          {
+            title,
+            titlePosition,
+            HORIZONTAL_PADDING_CLASS: "px-6",
+            data,
+            allKeys: data.map((d) => d.name),
+            processedData: data,
+            finalColors,
+            mapperConfig: Object.fromEntries(
+              data.map((d) => [
+                d.name,
+                { label: d.name, color: d.color || "#8884d8" }
+              ])
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          recharts.PieChart,
+          {
+            width: typeof width === "number" ? width : 400,
+            height,
+            margin: { top: 20, right: 80, bottom: 20, left: 80 },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.Pie,
+                {
+                  activeIndex,
+                  activeShape: renderActiveShape,
+                  data,
+                  dataKey: "value",
+                  nameKey: "name",
+                  cx: "50%",
+                  cy: "50%",
+                  innerRadius,
+                  outerRadius,
+                  fill: "#8884d8",
+                  onMouseEnter: (_, index) => setActiveIndex(index),
+                  onMouseLeave: () => setActiveIndex(void 0),
+                  onClick: (e) => {
+                    if (e && e.target && typeof e.target.blur === "function") e.target.blur();
+                  },
+                  children: data.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: entry.color || "#8884d8" }, `cell-${index}`))
+                }
+              ),
+              showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+              showTooltip && /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: () => null })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+var PieChart_default = PieChartComponent;
 function NumericInput({
   value,
   onChange,
@@ -21084,12 +21394,23 @@ function CarouselBase({
     setDownloadSuccess(false);
     const currentItem = items[index];
     try {
-      const response = await fetch(currentItem.url);
+      const response = await fetch(currentItem.url, { mode: "cors" });
+      if (!response.ok) throw new Error("Erro ao baixar imagem");
       const blob = await response.blob();
       const url = window.URL.createObjectURL(blob);
       const link = document.createElement("a");
       link.href = url;
-      link.download = currentItem.title || "image";
+      let ext = "";
+      try {
+        const urlObj = new URL(currentItem.url, window.location.href);
+        const path = urlObj.pathname;
+        ext = path.substring(path.lastIndexOf("."));
+        if (!ext || ext.length > 6) ext = "";
+      } catch {
+      }
+      let filename = currentItem.title || "image";
+      if (ext && !filename.endsWith(ext)) filename += ext;
+      link.download = filename;
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);
@@ -21098,6 +21419,9 @@ function CarouselBase({
       setDownloadSuccess(true);
       setTimeout(() => setDownloadSuccess(false), 2e3);
     } catch (error) {
+      sonner.toast.error(
+        "Erro ao baixar imagem. Verifique a URL ou permiss\xF5es do servidor."
+      );
       console.error("Error downloading image:", error);
       setIsDownloading(false);
     }
@@ -21139,8 +21463,13 @@ function CarouselBase({
               {
                 src: item.url,
                 alt: item.title,
-                className: cn("w-full h-full select-none"),
-                imageClassName,
+                className: cn(
+                  "w-full h-full select-none object-contain"
+                ),
+                imageClassName: cn(
+                  "object-contain w-full h-full",
+                  imageClassName
+                ),
                 borderRadius: 8,
                 maxZoom: 3
               }
@@ -21997,7 +22326,9 @@ function CommandItemRow({
   item,
   isActive,
   isSelected,
+  multiSelect,
   onSelect,
+  onToggleSelection,
   onHover,
   searchQuery
 }) {
@@ -22005,12 +22336,18 @@ function CommandItemRow({
     framerMotion.motion.button,
     {
       layout: true,
-      onClick: onSelect,
+      onClick: (e) => {
+        if (multiSelect && onToggleSelection && (e.ctrlKey || e.metaKey || e.shiftKey)) {
+          onToggleSelection(e);
+        } else {
+          onSelect(e);
+        }
+      },
       onMouseEnter: onHover,
       className: `
-        w-full flex items-center gap-1 px-2  py-1 rounded-md text-left cursor-pointer
+        w-full flex items-center gap-1 px-2 py-1 rounded-md text-left cursor-pointer
         transition-colors duration-75 group relative
-        ${isActive ? "text-accent-foreground hover:bg-accent" : "hover:bg-accent hover:text-accent-foreground"}
+        ${isActive ? "text-accent-foreground bg-accent" : "hover:bg-accent hover:text-accent-foreground"}
       `,
       children: [
         item.icon && /* @__PURE__ */ jsxRuntime.jsx(
@@ -22022,7 +22359,7 @@ function CommandItemRow({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 min-w-0 px-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3  flex-wrap", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
@@ -22360,7 +22697,7 @@ var VirtualResultList = React32.memo(
         ref: listRef,
         className: "overflow-y-auto overscroll-contain px-2 py-1 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted-foreground/30 [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/50 transition-colors",
         style: { maxHeight: `min(${LIST_MAX_HEIGHT}px, 60vh)` },
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: totalSize, position: "relative" }, children: virtualItems.map((vItem) => {
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: totalSize, position: "relative", width: "100%" }, children: virtualItems.map((vItem) => {
           const row = rows[vItem.index];
           return /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -22369,9 +22706,10 @@ var VirtualResultList = React32.memo(
               ref: virtualizer.measureElement,
               style: {
                 position: "absolute",
-                top: vItem.start,
+                top: 0,
                 left: 0,
-                right: 0
+                width: "100%",
+                transform: `translateY(${vItem.start}px)`
               },
               children: row.kind === "label" ? /* @__PURE__ */ jsxRuntime.jsx(GroupLabel, { group: row.group }) : /* @__PURE__ */ jsxRuntime.jsx("div", { "data-active": row.globalIdx === activeIndex, children: /* @__PURE__ */ jsxRuntime.jsx(
                 CommandItemRow,
@@ -22417,7 +22755,7 @@ var FooterBar = React32.memo(
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono", children: "Ctrl+Enter" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[10px] px-1 bg-muted rounded border", children: "Ctrl+Enter" }),
         "Finalizar sele\xE7\xE3o"
       ] })
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -22477,9 +22815,9 @@ function CommandPalette(props) {
     showList
   } = useCommandPalette({
     ...props,
-    open: isMobile ? true : props.open
+    open: props.open
   });
-  useKeyboardShortcut(shortcut.key, () => onOpenChange(!open), {
+  useKeyboardShortcut(shortcut.key, () => onOpenChange?.(!open), {
     ctrl: shortcut.ctrl,
     meta: shortcut.meta,
     shift: shortcut.shift,
@@ -22488,7 +22826,7 @@ function CommandPalette(props) {
   React32.useEffect(() => {
     if (!open) return;
     const handleEscape = (e) => {
-      if (e.key === "Escape") onOpenChange(false);
+      if (e.key === "Escape") onOpenChange?.(false);
     };
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
@@ -22515,11 +22853,11 @@ function CommandPalette(props) {
     (val) => {
       setQuery(val);
       setActiveIndex(0);
-      if (!open && val.trim() !== "") onOpenChange(true);
+      if (!open && val.trim() !== "") onOpenChange?.(true);
     },
     [setQuery, setActiveIndex, open, onOpenChange]
   );
-  const handleClose = React32.useCallback(() => onOpenChange(false), [onOpenChange]);
+  const handleClose = React32.useCallback(() => onOpenChange?.(false), [onOpenChange]);
   const handleClearQuery = React32.useCallback(() => setQuery(""), [setQuery]);
   const searchPlaceholder = multiSearch ? "Buscar\u2026 (separe termos por v\xEDrgula)" : placeholder;
   const sharedListProps = {
@@ -22537,100 +22875,118 @@ function CommandPalette(props) {
     searchQuery: query
   };
   if (isMobile) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed top-0 left-0 right-0 z-[100] px-3 py-2 bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(
-        DebouncedInput,
+    return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        framerMotion.motion.div,
         {
-          ref: inputRef,
-          value: query,
-          debounce: debounceDelay,
-          onChange: handleQueryChangeMobile,
-          placeholder: searchPlaceholder
+          initial: { opacity: 0, y: -20 },
+          animate: { opacity: 1, y: 0 },
+          exit: { opacity: 0, y: -20 },
+          className: "fixed top-0 left-0 right-0 z-[100] px-4 py-3 bg-background border-b border-border shadow-sm flex items-center gap-3",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { className: "w-5 h-5 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DebouncedInput,
+              {
+                ref: inputRef,
+                value: query,
+                debounce: debounceDelay,
+                onChange: handleQueryChangeMobile,
+                placeholder: searchPlaceholder,
+                className: "flex-1 bg-transparent border-none shadow-none focus-visible:ring-0 p-0 text-base"
+              }
+            ),
+            query && /* @__PURE__ */ jsxRuntime.jsx(ButtonBase, { variant: "ghost", size: "icon", onClick: handleClearQuery, className: "h-8 w-8", children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { className: "w-4 h-4" }) })
+          ]
         }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showList && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          framerMotion.motion.div,
-          {
-            initial: { opacity: 0 },
-            animate: { opacity: 1 },
-            exit: { opacity: 0 },
-            transition: ANIMATION.overlay,
-            className: "fixed inset-0 z-[98] bg-background/60 backdrop-blur-[2px]",
-            onClick: handleClose
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          framerMotion.motion.div,
-          {
-            initial: { opacity: 0, y: -6 },
-            animate: { opacity: 1, y: 0 },
-            exit: { opacity: 0, y: -6 },
-            transition: ANIMATION.mobilePanel,
-            className: "fixed left-3 right-3 z-[99] bg-popover border border-border rounded-lg shadow-2xl shadow-black/20 dark:shadow-black/50 overflow-hidden top-14",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SearchBadges, { terms: searchTerms }),
-              /* @__PURE__ */ jsxRuntime.jsx(VirtualResultList, { ...sharedListProps })
-            ]
-          }
-        )
-      ] }) })
-    ] });
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: ANIMATION.overlay,
+          className: "fixed inset-0 z-[98] bg-background/80 backdrop-blur-md",
+          onClick: handleClose
+        }
+      ),
+      showList && /* @__PURE__ */ jsxRuntime.jsxs(
+        framerMotion.motion.div,
+        {
+          initial: { opacity: 0, y: 10 },
+          animate: { opacity: 1, y: 0 },
+          exit: { opacity: 0, y: 10 },
+          transition: ANIMATION.mobilePanel,
+          className: "fixed inset-x-0 bottom-0 top-[60px] z-[99] bg-background overflow-hidden flex flex-col",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SearchBadges, { terms: searchTerms }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(VirtualResultList, { ...sharedListProps }) })
+          ]
+        }
+      )
+    ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    framerMotion.motion.div,
-    {
-      initial: { opacity: 0, scale: 0.96, y: -8 },
-      animate: { opacity: 1, scale: 1, y: 0 },
-      exit: { opacity: 0, scale: 0.96, y: -8 },
-      transition: ANIMATION.panel,
-      className: "fixed z-[100] top-4  -translate-x-1/2 w-full max-w-xl rounded-xl border border-border overflow-hidden shadow-2xl shadow-black/20 dark:shadow-black/60 bg-popover/95 backdrop-blur-xl",
-      style: { maxHeight: "min(600px, 80vh)" },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-4 py-2 border-b border-border", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            react.MagnifyingGlassIcon,
-            {
-              className: "w-4 h-4 text-muted-foreground flex-shrink-0",
-              weight: "bold"
-            }
-          ),
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "fixed inset-0 z-[99] bg-black/40 backdrop-blur-sm",
+        onClick: handleClose
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.motion.div,
+      {
+        initial: { opacity: 0, scale: 0.96, y: -8 },
+        animate: { opacity: 1, scale: 1, y: 0 },
+        exit: { opacity: 0, scale: 0.96, y: -8 },
+        transition: ANIMATION.panel,
+        className: "fixed z-[100] top-4  -translate-x-1/2 w-full max-w-xl rounded-xl border border-border overflow-hidden shadow-2xl shadow-black/20 dark:shadow-black/60 bg-popover/95 backdrop-blur-xl",
+        style: { maxHeight: "min(600px, 80vh)" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-4 py-2 border-b border-border", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { className: "w-4 h-4 text-muted-foreground flex-shrink-0", weight: "bold" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DebouncedInput,
+              {
+                ref: inputRef,
+                value: query,
+                debounce: debounceDelay,
+                onChange: handleQueryChange,
+                placeholder: searchPlaceholder,
+                rightIcon: query ? /* @__PURE__ */ jsxRuntime.jsx(
+                  ButtonBase,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    onClick: handleClearQuery,
+                    className: "text-muted-foreground hover:text-red-500 hover:bg-transparent transition-colors",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { className: "w-4 h-4" })
+                  }
+                ) : void 0,
+                className: "flex-1 bg-transparent border-none focus-visible:ring-0 outline-none shadow-none px-0 h-7 text-sm caret-primary"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(SearchBadges, { terms: searchTerms }),
+          showList && /* @__PURE__ */ jsxRuntime.jsx(VirtualResultList, { ...sharedListProps }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            DebouncedInput,
+            FooterBar,
             {
-              ref: inputRef,
-              value: query,
-              debounce: debounceDelay,
-              onChange: handleQueryChange,
-              placeholder: searchPlaceholder,
-              rightIcon: query ? /* @__PURE__ */ jsxRuntime.jsx(
-                ButtonBase,
-                {
-                  variant: "ghost",
-                  size: "icon",
-                  onClick: handleClearQuery,
-                  className: "text-muted-foreground hover:text-red-500 hover:bg-transparent transition-colors",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { className: "w-4 h-4" })
-                }
-              ) : void 0,
-              className: "flex-1 bg-transparent border-none focus-visible:ring-0 outline-none shadow-none px-0 h-7 text-sm caret-primary"
+              footer,
+              totalItems,
+              selectedCount: selectedItemIds.size,
+              executeBulkAction
             }
           )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(SearchBadges, { terms: searchTerms }),
-        showList && /* @__PURE__ */ jsxRuntime.jsx(VirtualResultList, { ...sharedListProps }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          FooterBar,
-          {
-            footer,
-            totalItems,
-            selectedCount: selectedItemIds.size,
-            executeBulkAction
-          }
-        )
-      ]
-    }
-  ) }) });
+        ]
+      }
+    )
+  ] }) });
 }
 
 exports.AddButton = AddButton;
@@ -22847,6 +23203,7 @@ exports.NoData = NoData_default;
 exports.NotificationButton = NotificationButton;
 exports.NumericInput = NumericInput;
 exports.PeriodsDropdown = PeriodsDropdown_default;
+exports.PieChartComponent = PieChart_default;
 exports.PopoverAnchorBase = PopoverAnchorBase;
 exports.PopoverBase = PopoverBase;
 exports.PopoverContentBase = PopoverContentBase;