@sustaina/shared-ui 1.7.2 → 1.8.0

package/dist/index.mjs

@@ -1,11 +1,12 @@
-import * as React4 from 'react';
-import React4__default, { createContext, isValidElement, useState, useEffect, useId, useContext, useRef, useCallback, useMemo, createElement } from 'react';
+import * as React5 from 'react';
+import React5__default, { createContext, isValidElement, useState, useEffect, useId, useContext, useRef, useCallback, useMemo, createElement } from 'react';
 import { Controller, useFormContext, useForm, useFieldArray, FormProvider, useWatch, get, set, appendErrors, useFormState } from 'react-hook-form';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import clsx3, { clsx } from 'clsx';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import clsx2, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { reSplitAlphaNumeric, useReactTable, getCoreRowModel, getGroupedRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel, flexRender } from '@tanstack/react-table';
-import { CircleHelp, Triangle, X, Plus, Search, Bug, XIcon, GripVertical, Info, CircleMinus, CalendarIcon, Minus, ChevronDownIcon, CheckIcon, ChevronLeft, ChevronRight, Tag, ChevronUpIcon } from 'lucide-react';
+import { CircleHelp, ChevronUp, ChevronDown, X, Plus, Search, Bug, XIcon, GripVertical, Info, CircleMinus, CalendarIcon, Minus, ChevronDownIcon, CheckIcon, Triangle, ChevronLeft, ChevronRight, Tag, ChevronUpIcon } from 'lucide-react';
+import { cva } from 'class-variance-authority';
 import { create } from 'zustand';
 import { Slot } from '@radix-ui/react-slot';
 import * as LabelPrimitive2 from '@radix-ui/react-label';
@@ -16,7 +17,6 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { useSensors, useSensor, PointerSensor, DndContext, closestCenter } from '@dnd-kit/core';
 import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers';
-import { cva } from 'class-variance-authority';
 import { z } from 'zod';
 import { createPortal } from 'react-dom';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -131,14 +131,105 @@ function isDefined(value) {
 function isEmptyObject(value) {
   return !!value && Object.keys(value).length === 0 && value.constructor === Object;
 }
-function debounce(fn, delay = 150) {
-  let timeout = null;
-  return (...args) => {
-    if (timeout) clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      fn(...args);
-    }, delay);
-  };
+function debounce(func, wait = 150, options) {
+  let lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
+  if (typeof func !== "function") {
+    throw new TypeError("Expected a function");
+  }
+  wait = Number(wait) || 0;
+  if (options && typeof options === "object") {
+    leading = !!options.leading;
+    maxing = "maxWait" in options;
+    maxWait = maxing ? Math.max(Number(options.maxWait) || 0, wait) : void 0;
+    trailing = "trailing" in options ? !!options.trailing : trailing;
+  }
+  function invokeFunc(time) {
+    const args = lastArgs;
+    const thisArg = lastThis;
+    lastArgs = lastThis = void 0;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+  function leadingEdge(time) {
+    lastInvokeTime = time;
+    timerId = setTimeout(timerExpired, wait);
+    return leading ? invokeFunc(time) : result;
+  }
+  function remainingWait(time) {
+    const timeSinceLastCall = time - (lastCallTime ?? 0);
+    const timeSinceLastInvoke = time - lastInvokeTime;
+    const remaining = wait - timeSinceLastCall;
+    return maxing ? Math.min(remaining, (maxWait ?? 0) - timeSinceLastInvoke) : remaining;
+  }
+  function shouldInvoke(time) {
+    const timeSinceLastCall = time - (lastCallTime ?? 0);
+    const timeSinceLastInvoke = time - lastInvokeTime;
+    return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= (maxWait ?? 0);
+  }
+  function timerExpired() {
+    const time = Date.now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+  function trailingEdge(time) {
+    timerId = void 0;
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = void 0;
+    return result;
+  }
+  function cancel() {
+    if (timerId !== void 0) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = void 0;
+  }
+  function flush() {
+    return timerId === void 0 ? result : trailingEdge(Date.now());
+  }
+  function debounced(...args) {
+    const time = Date.now();
+    const isInvoking = shouldInvoke(time);
+    lastArgs = args;
+    lastThis = this;
+    lastCallTime = time;
+    if (isInvoking) {
+      if (timerId === void 0) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === void 0) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+function throttle(func, wait, options) {
+  let leading = true, trailing = true;
+  if (typeof func !== "function") {
+    throw new TypeError("Expected a function");
+  }
+  if (options) {
+    leading = "leading" in options ? !!options.leading : leading;
+    trailing = "trailing" in options ? !!options.trailing : trailing;
+  }
+  return debounce(func, wait, {
+    leading,
+    maxWait: wait,
+    trailing
+  });
 }
 
 // src/utils/filters.ts
@@ -188,9 +279,8 @@ function compareAlphanumeric(aStr, bStr) {
   }
   return a.length - b.length;
 }
-function cn2(...inputs) {
-  return twMerge(clsx(inputs));
-}
+
+// src/components/data-table/utils.tsx
 function booleanToSelectValue(value, options) {
   if (value === true) return "true";
   if (value === false) return "false";
@@ -201,18 +291,6 @@ function selectValueToBoolean(value) {
   if (value === "false") return false;
   return void 0;
 }
-function renderContentSlot(slot, defaultWrapperProps) {
-  const { content, wrapperProps = {} } = slot;
-  const mergedProps = {
-    ...defaultWrapperProps,
-    ...wrapperProps,
-    className: cn2(defaultWrapperProps?.className, wrapperProps?.className)
-  };
-  if (!content) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx("div", { ...mergedProps, children: content });
-}
 var useHover = () => {
   const [hovering, setHovering] = useState(false);
   const prevRef = useRef(null);
@@ -364,7 +442,14 @@ var useTruncated = ({
   return isTruncated;
 };
 var useTruncated_default = useTruncated;
-var HeaderCell = ({ rootClassName, labelClassName, context, label, sorterProps }) => {
+var HeaderCell = ({
+  rootClassName,
+  labelClassName,
+  context,
+  label,
+  sorterProps,
+  align = "left"
+}) => {
   const { ref, hovering } = useHover_default();
   const showSorter = sorterProps?.show ?? context.column.getCanSort();
   return /* @__PURE__ */ jsxs(
@@ -372,46 +457,56 @@ var HeaderCell = ({ rootClassName, labelClassName, context, label, sorterProps }
     {
       ref,
       className: cn(
-        "flex items-center gap-2",
+        "flex items-center justify-between gap-2",
         {
           "cursor-pointer": context?.column?.getCanSort()
         },
         rootClassName
       ),
-      ...stripNullishObject({
-        onClick: (event) => {
-          event.preventDefault();
-          if (context?.column?.getCanSort()) {
-            context?.column?.toggleSorting();
-          }
+      onClick: (event) => {
+        event.preventDefault();
+        if (context?.column?.getCanSort()) {
+          context?.column?.toggleSorting();
         }
-      }),
+      },
       children: [
-        /* @__PURE__ */ jsx("span", { className: cn("inline-block font-bold", labelClassName), children: label }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("flex-1 flex items-center", {
+              "justify-start": align === "left",
+              "justify-center": align === "center",
+              "justify-end": align === "right"
+            }),
+            children: /* @__PURE__ */ jsx("span", { className: cn("inline-block font-bold", labelClassName), children: label })
+          }
+        ),
         showSorter && /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex flex-col",
+            className: "flex flex-col -space-y-2",
             title: context.column.getCanSort() ? context.column.getNextSortingOrder() === "asc" ? "Sort ascending" : context.column.getNextSortingOrder() === "desc" ? "Sort descending" : "Clear sort" : void 0,
             children: [
               /* @__PURE__ */ jsx(
-                Triangle,
+                ChevronUp,
                 {
-                  className: cn("fill-gray-300 stroke-0", {
-                    "fill-[#41875c]": context?.column?.getIsSorted() === "asc",
-                    "fill-[#41875c]/45": context?.column?.getNextSortingOrder() === "asc" && hovering
+                  className: cn("stroke-[#BBBBBB]", {
+                    "stroke-[#41875c]": context?.column?.getIsSorted() === "asc",
+                    "stroke-[#41875c]/45": context?.column?.getNextSortingOrder() === "asc" && hovering
                   }),
-                  size: 12
+                  size: 16,
+                  strokeWidth: 3
                 }
               ),
               /* @__PURE__ */ jsx(
-                Triangle,
+                ChevronDown,
                 {
-                  className: cn("rotate-180 fill-gray-300 stroke-0", {
-                    "fill-[#41875c]": context?.column?.getIsSorted() === "desc",
-                    "fill-[#41875c]/45": context?.column?.getNextSortingOrder() === "desc" && hovering
+                  className: cn("stroke-[#BBBBBB]", {
+                    "stroke-[#41875c]": context?.column?.getIsSorted() === "desc",
+                    "stroke-[#41875c]/45": context?.column?.getNextSortingOrder() === "desc" && hovering
                   }),
-                  size: 12
+                  size: 16,
+                  strokeWidth: 3
                 }
               )
             ]
@@ -472,7 +567,7 @@ function TableHead({ className, ...props }) {
     {
       "data-slot": "table-head",
       className: cn(
-        "text-foreground h-9 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] hover:bg-gray-200 bg-[#f7f4f4] truncate",
+        "text-foreground h-9 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] hover:bg-gray-200 bg-[#F0F0F0] truncate",
         className
       ),
       ...props
@@ -501,7 +596,7 @@ var ColumnResizer = ({ header, className, style }) => {
     "div",
     {
       className: cn(
-        "absolute top-0 right-0 h-full w-1 select-none touch-none cursor-col-resize hover:bg-[#41875c]/45 active:bg-[#41875c]",
+        "z-[2] absolute top-0 right-0 h-full w-1 select-none touch-none cursor-col-resize hover:bg-[#41875c]/45 active:bg-[#41875c]",
         className
       ),
       onDoubleClick: () => header.column.resetSize(),
@@ -512,6 +607,37 @@ var ColumnResizer = ({ header, className, style }) => {
   );
 };
 var ColumnResizer_default = ColumnResizer;
+var ColumnSeparator = ({ show, className, ...props }) => {
+  if (!show) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "table-head-separator",
+      className: cn("absolute right-0 top-1/2 h-4 w-px -translate-y-1/2 bg-gray-300", className),
+      ...props
+    }
+  );
+};
+var ColumnSeparator_default = React5__default.memo(ColumnSeparator);
+var StatusContentSlot = ({
+  content,
+  icon,
+  wrapperProps = {},
+  defaultWrapperProps,
+  defaultIcon
+}) => {
+  if (!content && !icon && !defaultIcon) return null;
+  const mergedProps = {
+    ...defaultWrapperProps,
+    ...wrapperProps,
+    className: cn(defaultWrapperProps?.className, wrapperProps?.className)
+  };
+  return /* @__PURE__ */ jsxs("div", { ...mergedProps, children: [
+    icon ?? defaultIcon,
+    content
+  ] });
+};
+var StatusContentSlot_default = StatusContentSlot;
 var stateOptions = [
   "columnFilters",
   "globalFilter",
@@ -677,12 +803,107 @@ var DataTableDevTool = ({ table }) => {
   ] });
 };
 var DataTableDevTool_default = DataTableDevTool;
+var SuiEmptyDataIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 184 152", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxs("g", { fill: "none", fillRule: "evenodd", children: [
+  /* @__PURE__ */ jsxs("g", { transform: "translate(24 31.67)", children: [
+    /* @__PURE__ */ jsx("ellipse", { fillOpacity: ".8", cx: "67.797", cy: "106.89", rx: "67.797", ry: "12.668", fill: "#B0DFAA" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z",
+        fill: "#CEE5D6"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z",
+        fill: "#DDEEE3",
+        transform: "translate(13.56)"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z",
+        fill: "#F9F9F9"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z",
+        fill: "#DDEEE3"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z",
+      fill: "#DDEEE3"
+    }
+  ),
+  /* @__PURE__ */ jsxs("g", { transform: "translate(149.65 15.383)", fill: "#FFF", children: [
+    /* @__PURE__ */ jsx("ellipse", { cx: "20.654", cy: "3.167", rx: "2.849", ry: "2.815" }),
+    /* @__PURE__ */ jsx("path", { d: "M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" })
+  ] })
+] }) });
+var empty_data_default = SuiEmptyDataIcon;
+var spinnerVariants = cva("relative inline-block aspect-square transform-gpu", {
+  variants: {
+    variant: {
+      primary: "[&>div]:bg-[#77ab8a]",
+      secondary: "[&>div]:bg-[#ab9555]",
+      destructive: "[&>div]:bg-destructive",
+      muted: "[&>div]:bg-muted-foreground"
+    },
+    size: {
+      sm: "size-7",
+      default: "size-8",
+      lg: "size-9",
+      xl: "size-10",
+      "2xl": "size-12"
+    }
+  },
+  defaultVariants: { variant: "primary", size: "default" }
+});
+var Spinner = ({ className, variant, size = "default" }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    role: "status",
+    "aria-label": "Loading",
+    className: cn(
+      typeof size === "string" ? spinnerVariants({ variant, size }) : spinnerVariants({ variant }),
+      className
+    ),
+    style: typeof size === "number" ? { width: size, height: size } : void 0,
+    children: [
+      Array.from({ length: 12 }).map((_, i2) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "animate-sus-spinner absolute left-[46.5%] top-[4.4%] h-[24%] w-[7%] origin-[center_190%] rounded-full opacity-[0.1] will-change-transform",
+          style: {
+            transform: `rotate(${i2 * 30}deg)`,
+            animationDelay: `${(i2 * 0.083).toFixed(3)}s`
+          },
+          "aria-hidden": "true"
+        },
+        i2
+      )),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
+    ]
+  }
+);
 
 // src/components/data-table/helpers.ts
-function getColumnPinningStyles(column) {
+function getColumnPinningInfo(column) {
   const isPinned = column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
+  return { isPinned, isLastLeftPinnedColumn, isFirstRightPinnedColumn };
+}
+function getColumnPinningStyles(column) {
+  const { isPinned, isFirstRightPinnedColumn, isLastLeftPinnedColumn } = getColumnPinningInfo(column);
   const classes = cn(
     isPinned ? "sticky" : "relative",
     isPinned ? "z-[1]" : "z-0",
@@ -842,7 +1063,7 @@ var DataTable = ({
       }
       const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
       const scrollableHeight = scrollHeight - clientHeight;
-      const distanceToBottom = scrollHeight - clientHeight - scrollTop;
+      const distanceToBottom = scrollableHeight - scrollTop;
       const ratioToBottom = scrollableHeight > 0 ? scrollTop / scrollableHeight : 1;
       const info = {
         scrollTop,
@@ -883,11 +1104,29 @@ var DataTable = ({
       ),
       onScroll: (e2) => fetchMoreOnScrollReached(e2.currentTarget),
       children: [
-        isInitialLoading ? /* @__PURE__ */ jsx(Fragment, { children: renderContentSlot(statusContent?.initialLoading || { content: "Loading..." }, {
-          className: "flex flex-col h-full items-center justify-center text-sm py-4"
-        }) }) : isTableEmpty ? /* @__PURE__ */ jsx(Fragment, { children: renderContentSlot(statusContent?.emptyData || { content: "There's nothing here yet." }, {
-          className: "flex flex-col h-full items-center justify-center text-sm py-4"
-        }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        isInitialLoading ? /* @__PURE__ */ jsx(
+          StatusContentSlot_default,
+          {
+            content: statusContent?.initialLoading?.content ?? "Loading...",
+            icon: statusContent?.initialLoading?.icon,
+            wrapperProps: statusContent?.initialLoading?.wrapperProps,
+            defaultWrapperProps: {
+              className: "flex flex-col h-full items-center justify-center text-sm py-4 gap-2"
+            },
+            defaultIcon: /* @__PURE__ */ jsx(Spinner, { size: 48 })
+          }
+        ) : isTableEmpty ? /* @__PURE__ */ jsx(
+          StatusContentSlot_default,
+          {
+            content: statusContent?.emptyData?.content ?? "There's nothing here yet.",
+            icon: statusContent?.emptyData?.icon,
+            wrapperProps: statusContent?.emptyData?.wrapperProps,
+            defaultWrapperProps: {
+              className: "flex flex-col h-full items-center justify-center text-sm py-4 gap-2"
+            },
+            defaultIcon: /* @__PURE__ */ jsx(empty_data_default, { className: "text-[128px]" })
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs(Table, { ...components?.tableProps, children: [
             /* @__PURE__ */ jsxs(
               TableHeader,
@@ -900,6 +1139,11 @@ var DataTable = ({
                       const { classes, style } = getColumnPinningStyles(header.column);
                       const useColumnSizing = header.column.columnDef?.meta?.useColumnSizing ?? columnResizing?.enabled ?? false;
                       const tableHeadCellProps = typeof components?.tableHeadCellProps === "function" ? components?.tableHeadCellProps({ header, table }) : components?.tableHeadCellProps;
+                      const nextHeader = headerGroup.headers?.[header.index + 1] || header;
+                      const { isLastLeftPinnedColumn } = getColumnPinningInfo(header.column);
+                      const { isFirstRightPinnedColumn } = getColumnPinningInfo(nextHeader.column);
+                      const headerGroupLength = header.headerGroup.headers.length;
+                      const showSeparator = header.index !== headerGroupLength - 1 && !isLastLeftPinnedColumn && !isFirstRightPinnedColumn;
                       return /* @__PURE__ */ jsxs(
                         TableHead,
                         {
@@ -921,6 +1165,13 @@ var DataTable = ({
                           },
                           children: [
                             header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
+                            /* @__PURE__ */ jsx(
+                              ColumnSeparator_default,
+                              {
+                                show: components?.columnSeparatorProps?.headerCell?.show ?? showSeparator,
+                                ...components?.columnSeparatorProps?.headerCell
+                              }
+                            ),
                             /* @__PURE__ */ jsx(ColumnResizer_default, { header, ...components?.columnResizerProps })
                           ]
                         },
@@ -944,7 +1195,6 @@ var DataTable = ({
                           column.columnDef?.meta?.filterCellProps?.className
                         ),
                         style: {
-                          // TODO: should we separate styles for filter or use same columns styles
                           ...style,
                           width: useColumnSizing ? column.getSize() : void 0,
                           minWidth: useColumnSizing ? column.columnDef.minSize : void 0,
@@ -1013,20 +1263,39 @@ var DataTable = ({
               );
             }) })
           ] }),
-          isTableEmptyAfterFiltering && /* @__PURE__ */ jsx(Fragment, { children: renderContentSlot(
-            statusContent?.emptyFilteredData || {
-              content: "No records found. Please try a different search."
-            },
+          isTableEmptyAfterFiltering && /* @__PURE__ */ jsx(
+            StatusContentSlot_default,
             {
-              className: "flex flex-col h-[calc(100%-76px)] items-center justify-center text-sm py-4"
+              content: statusContent?.emptyFilteredData?.content ?? "No records found. Please try a different search.",
+              icon: statusContent?.emptyFilteredData?.icon,
+              wrapperProps: statusContent?.emptyFilteredData?.wrapperProps,
+              defaultWrapperProps: {
+                className: "flex flex-col h-[calc(100%-76px)] items-center justify-center text-sm py-4 gap-2"
+              },
+              defaultIcon: /* @__PURE__ */ jsx(empty_data_default, { className: "text-[128px]" })
             }
-          ) }),
-          scrollFetch?.enabled && !isFiltering && !isInitialLoading && scrollFetch?.isFetchingMore && /* @__PURE__ */ jsx(Fragment, { children: renderContentSlot(statusContent?.fetchingMore || { content: "Loading more..." }, {
-            className: "flex items-center justify-center text-sm py-4"
-          }) }),
-          scrollFetch?.enabled && !isFiltering && !isInitialLoading && !scrollFetch?.hasMore && !scrollFetch?.isFetchingMore && /* @__PURE__ */ jsx(Fragment, { children: renderContentSlot(statusContent?.noMoreData || { content: null }, {
-            className: "flex items-center justify-center text-sm py-4"
-          }) })
+          ),
+          scrollFetch?.enabled && !isFiltering && !isInitialLoading && scrollFetch?.isFetchingMore && /* @__PURE__ */ jsx(
+            StatusContentSlot_default,
+            {
+              content: statusContent?.fetchingMore?.content ?? "Loading more...",
+              wrapperProps: statusContent?.fetchingMore?.wrapperProps,
+              defaultWrapperProps: {
+                className: "flex flex-col items-center justify-center text-sm py-4 gap-2"
+              }
+            }
+          ),
+          scrollFetch?.enabled && !isFiltering && !isInitialLoading && !scrollFetch?.hasMore && !scrollFetch?.isFetchingMore && /* @__PURE__ */ jsx(
+            StatusContentSlot_default,
+            {
+              content: statusContent?.noMoreData?.content,
+              icon: statusContent?.noMoreData?.icon,
+              wrapperProps: statusContent?.noMoreData?.wrapperProps,
+              defaultWrapperProps: {
+                className: "flex flex-col items-center justify-center text-sm py-4 gap-2"
+              }
+            }
+          )
         ] }),
         debug && /* @__PURE__ */ jsx(DataTableDevTool_default, { table })
       ]
@@ -1134,15 +1403,15 @@ var t2 = function(o3, t3, s2) {
   };
 };
 var Form = FormProvider;
-var FormFieldContext2 = React4.createContext({});
+var FormFieldContext2 = React5.createContext({});
 var FormField2 = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx(FormFieldContext2.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField2 = () => {
-  const fieldContext = React4.useContext(FormFieldContext2);
-  const itemContext = React4.useContext(FormItemContext2);
+  const fieldContext = React5.useContext(FormFieldContext2);
+  const itemContext = React5.useContext(FormItemContext2);
   const { getFieldState } = useFormContext();
   const formState = useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1159,9 +1428,9 @@ var useFormField2 = () => {
     ...fieldState
   };
 };
-var FormItemContext2 = React4.createContext({});
+var FormItemContext2 = React5.createContext({});
 function FormItem2({ className, ...props }) {
-  const id = React4.useId();
+  const id = React5.useId();
   return /* @__PURE__ */ jsx(FormItemContext2.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
 }
 function FormControl({ ...props }) {
@@ -1464,7 +1733,7 @@ function SortableRow({
     id: value,
     disabled: name == "columns.0.id"
   });
-  const style = React4.useMemo(
+  const style = React5.useMemo(
     () => ({
       transform: CSS.Transform.toString(transform),
       transition
@@ -1688,12 +1957,12 @@ var GridSettingsModal = ({
         children: /* @__PURE__ */ jsx(X, { className: "w-6 h-6 text-white" })
       }
     ) }),
-    /* @__PURE__ */ jsxs(DialogHeader, { className: cn("bg-[#82B495] text-white h-25 rounded-t-lg", headerClassname), children: [
-      /* @__PURE__ */ jsx(DialogTitle, { className: "text-2xl p-4", children: "Grid Settings" }),
+    /* @__PURE__ */ jsxs(DialogHeader, { className: cn("bg-[#41875C] text-white h-20 rounded-t-lg", headerClassname), children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "text-xl p-2 px-4", children: "Grid Settings" }),
       /* @__PURE__ */ jsx(
         DialogDescription,
         {
-          className: cn("bg-[#8B8B8B] text-white px-4 py-2.5", descriptionClassname),
+          className: cn("bg-[#A7ADB8] text-white px-4 py-2.5", descriptionClassname),
           children: "Add or remove columns. To change the column order, drag and drop a field."
         }
       )
@@ -1897,7 +2166,7 @@ var InfoIcon = (props) => {
     }
   );
 };
-var InfoIcon_default = React4__default.memo(InfoIcon);
+var InfoIcon_default = React5__default.memo(InfoIcon);
 function TooltipProvider2({
   delayDuration = 0,
   ...props
@@ -2074,13 +2343,13 @@ var Navbar = ({
     }
   );
 };
-var navbar_default = React4__default.memo(Navbar);
+var navbar_default = React5__default.memo(Navbar);
 var ExpandCollapse = ({ title, children, portalId }) => {
   const [isOpen, setIsOpen] = useState(false);
   const Panel = /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx3(
+      className: clsx2(
         "overflow-hidden transition-all duration-500 ease-in-out bg-white border-b shadow-md w-full",
         isOpen ? "max-h-[700px] opacity-100" : "max-h-0 opacity-0"
       ),
@@ -2113,7 +2382,6 @@ var ExpandCollapse_default = ExpandCollapse;
 
 // src/components/advanceSearch/operatorMap.ts
 var OPERATOR_MAP = {
-  uuid: ["equals", "notEquals", "gt", "gte", "lt", "lte"],
   text: [
     "contains",
     "equals",
@@ -2129,7 +2397,18 @@ var OPERATOR_MAP = {
   datetime: ["on", "after", "before", "between"],
   checkbox: ["is", "isNot"],
   dropdown: ["is", "isNot"],
-  lookup: ["containsAny", "containsOnly", "containsAll", "notContains"]
+  lookup: ["containsAny", "containsOnly", "containsAll", "notContains"],
+  uuid: ["equals", "notEquals", "gt", "gte", "lt", "lte"],
+  json: [
+    "contains",
+    "equals",
+    "beginsWith",
+    "endsWith",
+    "notEquals",
+    "notBeginsWith",
+    "notEndsWith",
+    "notContains"
+  ]
 };
 
 // src/components/advanceSearch/hooks/useAdvanceSearch.ts
@@ -2153,7 +2432,8 @@ function makeNewRow(field) {
       operator: "between",
       value: "",
       value2: "",
-      multiTableSearch: field.multiTableSearch
+      multiTableSearch: field.multiTableSearch,
+      jsonPath: field.jsonPath
     };
   }
   return {
@@ -2162,7 +2442,8 @@ function makeNewRow(field) {
     fieldType: field.type,
     operator: op,
     value: "",
-    multiTableSearch: field.multiTableSearch
+    multiTableSearch: field.multiTableSearch,
+    jsonPath: field.jsonPath
   };
 }
 function useAdvanceSearch({ fields, limitRows }) {
@@ -2234,6 +2515,7 @@ function useAdvanceSearch({ fields, limitRows }) {
               fieldName: r2.fieldName,
               fieldType: r2.fieldType,
               multiTableSearch: r2.multiTableSearch,
+              jsonPath: r2.jsonPath,
               operator,
               value: "",
               value2: ""
@@ -2244,6 +2526,7 @@ function useAdvanceSearch({ fields, limitRows }) {
             fieldName: r2.fieldName,
             fieldType: r2.fieldType,
             multiTableSearch: r2.multiTableSearch,
+            jsonPath: r2.jsonPath,
             operator,
             value: ""
           };
@@ -2271,16 +2554,6 @@ function useAdvanceSearch({ fields, limitRows }) {
     })),
     [fields]
   );
-  const buildFilter = useCallback(
-    (prismaFilter, options) => {
-      return options?.multiTableSearch ? {
-        some: {
-          value: { ...prismaFilter, ...options?.insensitive ? { mode: "insensitive" } : void 0 }
-        }
-      } : prismaFilter;
-    },
-    []
-  );
   return {
     rows,
     addRow,
@@ -2291,8 +2564,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     changeOperator,
     changeValue,
     operatorsForField,
-    fieldOptions,
-    buildFilter
+    fieldOptions
   };
 }
 
@@ -2320,6 +2592,9 @@ var OPERATOR_LABEL = {
   containsOnly: "Contains only",
   containsAll: "Contains all of"
 };
+function cn2(...inputs) {
+  return twMerge(clsx(inputs));
+}
 function Select2({ ...props }) {
   return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
@@ -2601,13 +2876,13 @@ function DatePicker({
   className,
   ...props
 }) {
-  const today = React4.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const [displayed, setDisplayed] = React4.useState(
+  const today = React5.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const [displayed, setDisplayed] = React5.useState(
     selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date()
   );
   minDate = clampToDay(minDate);
   maxDate = clampToDay(maxDate);
-  const disabledSet = React4.useMemo(() => {
+  const disabledSet = React5.useMemo(() => {
     const s2 = /* @__PURE__ */ new Set();
     disabledDates?.forEach((d) => s2.add(startOfDay(d).toISOString()));
     return s2;
@@ -2616,7 +2891,7 @@ function DatePicker({
   const displayMonth = displayed.getMonth();
   const monthLabel = callbacks?.monthLabel?.(displayYear, displayMonth) ?? new Intl.DateTimeFormat(void 0, { month: "short" }).format(displayed);
   const yearLabel = callbacks?.yearLabel?.(displayYear) ?? String(displayYear);
-  const weekdays = React4.useMemo(() => {
+  const weekdays = React5.useMemo(() => {
     const labels = [];
     for (let i2 = 0; i2 < 7; i2++) {
       const idx = i2;
@@ -2625,7 +2900,7 @@ function DatePicker({
     }
     return labels;
   }, [callbacks]);
-  const grid = React4.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
+  const grid = React5.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
   const isDateDisabled = (date) => {
     const d = startOfDay(date);
     if (minDate && d < minDate) return true;
@@ -4399,10 +4674,10 @@ function splitDateString(dateString) {
   return dateStrings;
 }
 function parseYear(dateString, additionalDigits) {
-  const regex = new RegExp(
+  const regex2 = new RegExp(
     "^(?:(\\d{4}|[+-]\\d{" + (4 + additionalDigits) + "})|(\\d{2}|[+-]\\d{" + (2 + additionalDigits) + "})$)"
   );
-  const captures = dateString.match(regex);
+  const captures = dateString.match(regex2);
   if (!captures) return { year: NaN, restDateString: "" };
   const year = captures[1] ? parseInt(captures[1]) : null;
   const century = captures[2] ? parseInt(captures[2]) : null;
@@ -4508,15 +4783,15 @@ function Label4({ className, ...props }) {
   );
 }
 var Form2 = FormProvider;
-var FormFieldContext3 = React4.createContext({});
+var FormFieldContext3 = React5.createContext({});
 var FormField3 = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx(FormFieldContext3.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField3 = () => {
-  const fieldContext = React4.useContext(FormFieldContext3);
-  const itemContext = React4.useContext(FormItemContext3);
+  const fieldContext = React5.useContext(FormFieldContext3);
+  const itemContext = React5.useContext(FormItemContext3);
   const { getFieldState } = useFormContext();
   const formState = useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -4533,9 +4808,9 @@ var useFormField3 = () => {
     ...fieldState
   };
 };
-var FormItemContext3 = React4.createContext({});
+var FormItemContext3 = React5.createContext({});
 function FormItem3({ className, ...props }) {
-  const id = React4.useId();
+  const id = React5.useId();
   return /* @__PURE__ */ jsx(FormItemContext3.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { "data-slot": "form-item", className: cn2("grid gap-2", className), ...props }) });
 }
 function FormControl2({ ...props }) {
@@ -4567,7 +4842,7 @@ var AdvanceSearchRow = ({
   const { control } = form;
   const fieldSchema = fields.find((f) => f.name === row.fieldName);
   const fieldType = fieldSchema?.type ?? "text";
-  React4__default.useEffect(() => {
+  React5__default.useEffect(() => {
     if (operators && operators.length > 0 && !operators.includes(row.operator)) {
       onChangeOperator(operators[0]);
     }
@@ -4578,8 +4853,8 @@ var AdvanceSearchRow = ({
   const isLookup = fieldType === "lookup";
   const isNumber = fieldType === "number";
   const isDate2 = fieldType === "date" || fieldType === "datetime";
-  const [openDateValue1, setOpenDateValue1] = React4__default.useState(false);
-  const [openDateValue2, setOpenDateValue2] = React4__default.useState(false);
+  const [openDateValue1, setOpenDateValue1] = React5__default.useState(false);
+  const [openDateValue2, setOpenDateValue2] = React5__default.useState(false);
   const toDateFromISO = (v) => {
     if (!v) return void 0;
     try {
@@ -4810,6 +5085,372 @@ var AdvanceSearchRow = ({
     ) })
   ] });
 };
+
+// src/components/advanceSearch/builder/checkbox.ts
+var CheckboxBuilder = class {
+  build(row) {
+    switch (row.operator) {
+      case "is":
+        return { [row.fieldName]: row.value };
+      case "isNot":
+        return { [row.fieldName]: { not: row.value } };
+      default:
+        return {};
+    }
+  }
+};
+
+// src/components/advanceSearch/builder/helper.ts
+var helper = (prismaFilter, options) => {
+  return options?.multiTableSearch ? {
+    some: {
+      value: { ...prismaFilter, ...options?.insensitive ? { mode: "insensitive" } : void 0 }
+    }
+  } : prismaFilter;
+};
+
+// src/components/advanceSearch/builder/datetime.ts
+var DatetimeBuilder = class {
+  build(row) {
+    try {
+      const start = new Date(row.value);
+      start.setHours(0, 0, 0, 0);
+      const end = new Date(row.value);
+      end.setHours(23, 59, 59, 59);
+      switch (row.operator) {
+        case "on": {
+          return {
+            [row.fieldName]: helper(
+              { gte: start.toISOString(), lt: end.toISOString() },
+              { multiTableSearch: row.multiTableSearch }
+            )
+          };
+        }
+        case "after":
+          return {
+            [row.fieldName]: helper(
+              { gte: start.toISOString() },
+              { multiTableSearch: row.multiTableSearch }
+            )
+          };
+        case "before":
+          return {
+            [row.fieldName]: helper(
+              { lt: start.toISOString() },
+              { multiTableSearch: row.multiTableSearch }
+            )
+          };
+        case "between": {
+          const start2 = new Date(row.value);
+          start2.setHours(0, 0, 0, 0);
+          const end2 = new Date(row.value2);
+          end2.setHours(23, 59, 59, 59);
+          return {
+            [row.fieldName]: helper(
+              { gte: start2.toISOString(), lt: end2.toISOString() },
+              { multiTableSearch: row.multiTableSearch }
+            )
+          };
+        }
+        default:
+          return {};
+      }
+    } catch {
+      return {};
+    }
+  }
+};
+
+// src/components/advanceSearch/builder/dropdown.ts
+var DropdownBuilder = class {
+  build(row) {
+    switch (row.operator) {
+      case "is":
+        return { [row.fieldName]: row.value };
+      case "isNot":
+        return { [row.fieldName]: { not: row.value } };
+      default:
+        return {};
+    }
+  }
+};
+
+// src/components/advanceSearch/builder/json.ts
+var JSONBuilder = class {
+  build(row) {
+    switch (row.operator) {
+      case "contains":
+        return { [row.fieldName]: { path: row.jsonPath, string_contains: row.value } };
+      case "equals":
+        return { [row.fieldName]: { path: row.jsonPath, equals: row.value } };
+      case "beginsWith":
+        return { [row.fieldName]: { path: row.jsonPath, string_starts_with: row.value } };
+      case "endsWith":
+        return { [row.fieldName]: { path: row.jsonPath, string_ends_with: row.value } };
+      case "notContains":
+        return { [row.fieldName]: { path: row.jsonPath, not: { string_contains: row.value } } };
+      case "notEquals":
+        return { [row.fieldName]: { path: row.jsonPath, not: { equals: row.value } } };
+      case "notBeginsWith":
+        return { [row.fieldName]: { path: row.jsonPath, not: { string_starts_with: row.value } } };
+      case "notEndsWith":
+        return { [row.fieldName]: { path: row.jsonPath, not: { string_ends_with: row.value } } };
+      default:
+        return {};
+    }
+  }
+};
+
+// src/components/advanceSearch/builder/lookup.ts
+var LookupBuilder = class {
+  build(row) {
+    switch (row.operator) {
+      case "containsAny":
+        return {
+          [row.fieldName]: helper(
+            { hasSome: String(row.value).split(",") },
+            { multiTableSearch: row.multiTableSearch }
+          )
+        };
+      case "containsAll":
+        return {
+          [row.fieldName]: helper(
+            { hasEvery: String(row.value).split(",") },
+            { multiTableSearch: row.multiTableSearch }
+          )
+        };
+      case "containsOnly":
+        return {
+          [row.fieldName]: helper(
+            { equals: String(row.value).split(",") },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      case "notContains":
+        return {
+          [row.fieldName]: helper(
+            { not: { contains: row.value } },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      default:
+        return {};
+    }
+  }
+};
+
+// src/components/advanceSearch/builder/number.ts
+var NumberBuilder = class {
+  build(row) {
+    const value = Number(row.value);
+    switch (row.operator) {
+      case "gt":
+        return {
+          [row.fieldName]: helper({ gt: value }, { multiTableSearch: row.multiTableSearch })
+        };
+      case "gte":
+        return {
+          [row.fieldName]: helper({ gte: value }, { multiTableSearch: row.multiTableSearch })
+        };
+      case "lt":
+        return {
+          [row.fieldName]: helper({ lt: value }, { multiTableSearch: row.multiTableSearch })
+        };
+      case "lte":
+        return {
+          [row.fieldName]: helper({ lte: value }, { multiTableSearch: row.multiTableSearch })
+        };
+      case "equals":
+        return {
+          [row.fieldName]: helper(
+            { equals: value },
+            {
+              multiTableSearch: row.multiTableSearch
+            }
+          )
+        };
+      case "notEquals":
+        return {
+          [row.fieldName]: helper(
+            { not: value },
+            {
+              multiTableSearch: row.multiTableSearch
+            }
+          )
+        };
+      default:
+        return {};
+    }
+  }
+};
+
+// src/components/advanceSearch/builder/text.ts
+var TextBuilder = class {
+  build(row) {
+    switch (row.operator) {
+      case "contains":
+        return {
+          [row.fieldName]: helper(
+            { contains: row.value },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      case "equals":
+        return {
+          [row.fieldName]: helper(
+            { equals: row.value },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      case "beginsWith":
+        return {
+          [row.fieldName]: helper(
+            { startsWith: row.value },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      case "endsWith":
+        return {
+          [row.fieldName]: helper(
+            { endsWith: row.value },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      case "notEquals":
+        return {
+          [row.fieldName]: helper(
+            { not: row.value },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      case "notBeginsWith":
+        return {
+          [row.fieldName]: helper(
+            { not: { startsWith: row.value } },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      case "notEndsWith":
+        return {
+          [row.fieldName]: helper(
+            { not: { endsWith: row.value } },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      case "notContains":
+        return {
+          [row.fieldName]: helper(
+            { not: { contains: row.value } },
+            {
+              multiTableSearch: row.multiTableSearch,
+              insensitive: true
+            }
+          )
+        };
+      default:
+        return {};
+    }
+  }
+};
+
+// src/components/advanceSearch/builder/uuid.ts
+var regex = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+var UUIDBuilder = class {
+  build(row) {
+    if (!regex.test(row.value)) {
+      return { [row.fieldName]: {} };
+    }
+    switch (row.operator) {
+      case "gt":
+        return {
+          [row.fieldName]: helper({ gt: row.value }, { multiTableSearch: row.multiTableSearch })
+        };
+      case "gte":
+        return {
+          [row.fieldName]: helper({ gte: row.value }, { multiTableSearch: row.multiTableSearch })
+        };
+      case "lt":
+        return {
+          [row.fieldName]: helper({ lt: row.value }, { multiTableSearch: row.multiTableSearch })
+        };
+      case "lte":
+        return {
+          [row.fieldName]: helper({ lte: row.value }, { multiTableSearch: row.multiTableSearch })
+        };
+      case "equals":
+        return {
+          [row.fieldName]: helper(
+            { equals: row.value },
+            {
+              multiTableSearch: row.multiTableSearch
+            }
+          )
+        };
+      case "notEquals":
+        return {
+          [row.fieldName]: helper(
+            { not: row.value },
+            {
+              multiTableSearch: row.multiTableSearch
+            }
+          )
+        };
+      default:
+        return {};
+    }
+  }
+};
+
+// src/components/advanceSearch/builder/index.ts
+function getBuilder(fieldType) {
+  switch (fieldType) {
+    case "text":
+      return new TextBuilder();
+    case "number":
+      return new NumberBuilder();
+    case "date":
+      return new DatetimeBuilder();
+    case "datetime":
+      return new DatetimeBuilder();
+    case "checkbox":
+      return new CheckboxBuilder();
+    case "dropdown":
+      return new DropdownBuilder();
+    case "lookup":
+      return new LookupBuilder();
+    case "uuid":
+      return new UUIDBuilder();
+    case "json":
+      return new JSONBuilder();
+  }
+}
 var AdvanceSearch = ({
   fields,
   portalId,
@@ -4831,8 +5472,7 @@ var AdvanceSearch = ({
     changeField,
     changeOperator,
     operatorsForField,
-    fieldOptions,
-    buildFilter
+    fieldOptions
   } = useAdvanceSearch({ fields: fieldsData, limitRows });
   const form = useForm({
     mode: "onSubmit",
@@ -4842,183 +5482,21 @@ var AdvanceSearch = ({
   const { handleSubmit, unregister, resetField, getValues, setValue } = form;
   const onSubmit = useCallback(() => {
     const currentValues = getValues();
+    const rawRows = rows.map((r2) => {
+      r2.value = currentValues[`value_${r2.id}`] ?? "";
+      r2.value2 = currentValues[`value2_${r2.id}`] ?? "";
+      return r2;
+    });
     const param = {
-      AND: rows.map((r2) => {
-        let val1 = currentValues[`value_${r2.id}`];
-        const val2 = currentValues[`value2_${r2.id}`];
-        if (r2.operator === "between") {
-          if (!val1 || !val2) return null;
-          const start = new Date(val1);
-          start.setHours(0, 0, 0, 0);
-          const end = new Date(val2);
-          end.setHours(23, 59, 59, 59);
-          return {
-            [r2.fieldName]: {
-              gte: start.toISOString(),
-              lt: end.toISOString()
-            }
-          };
-        }
-        if (!val1) return null;
-        val1 = r2.fieldType === "number" ? Number(val1) : val1;
-        switch (r2.operator) {
-          case "contains":
-            return {
-              [r2.fieldName]: buildFilter(
-                { contains: val1 },
-                {
-                  multiTableSearch: r2.multiTableSearch,
-                  insensitive: true
-                }
-              )
-            };
-          case "beginsWith":
-            return {
-              [r2.fieldName]: buildFilter(
-                { startsWith: val1 },
-                {
-                  multiTableSearch: r2.multiTableSearch,
-                  insensitive: true
-                }
-              )
-            };
-          case "endsWith":
-            return {
-              [r2.fieldName]: buildFilter(
-                { endsWith: val1 },
-                {
-                  multiTableSearch: r2.multiTableSearch,
-                  insensitive: true
-                }
-              )
-            };
-          case "equals":
-            return {
-              [r2.fieldName]: buildFilter(
-                { equals: val1 },
-                {
-                  multiTableSearch: r2.multiTableSearch,
-                  insensitive: true
-                }
-              )
-            };
-          case "notEquals":
-            return {
-              [r2.fieldName]: buildFilter(
-                { not: val1 },
-                {
-                  multiTableSearch: r2.multiTableSearch,
-                  insensitive: true
-                }
-              )
-            };
-          case "gt":
-            return {
-              [r2.fieldName]: buildFilter({ gt: val1 }, { multiTableSearch: r2.multiTableSearch })
-            };
-          case "gte":
-            return {
-              [r2.fieldName]: buildFilter({ gte: val1 }, { multiTableSearch: r2.multiTableSearch })
-            };
-          case "lt":
-            return {
-              [r2.fieldName]: buildFilter({ lt: val1 }, { multiTableSearch: r2.multiTableSearch })
-            };
-          case "lte":
-            return {
-              [r2.fieldName]: buildFilter({ lte: val1 }, { multiTableSearch: r2.multiTableSearch })
-            };
-          case "is":
-            return { [r2.fieldName]: val1 };
-          case "isNot":
-            return { [r2.fieldName]: { not: val1 } };
-          case "notContains":
-            return {
-              [r2.fieldName]: buildFilter(
-                { not: { contains: val1 } },
-                {
-                  multiTableSearch: r2.multiTableSearch,
-                  insensitive: true
-                }
-              )
-            };
-          case "notBeginsWith":
-            return {
-              [r2.fieldName]: buildFilter(
-                { not: { startsWith: val1 } },
-                {
-                  multiTableSearch: r2.multiTableSearch,
-                  insensitive: true
-                }
-              )
-            };
-          case "notEndsWith":
-            return {
-              [r2.fieldName]: buildFilter(
-                { not: { endsWith: val1 } },
-                {
-                  multiTableSearch: r2.multiTableSearch,
-                  insensitive: true
-                }
-              )
-            };
-          case "containsAny":
-            return {
-              [r2.fieldName]: buildFilter(
-                { hasSome: String(val1).split(",") },
-                { multiTableSearch: r2.multiTableSearch }
-              )
-            };
-          case "containsAll":
-            return {
-              [r2.fieldName]: buildFilter(
-                { hasEvery: String(val1).split(",") },
-                { multiTableSearch: r2.multiTableSearch }
-              )
-            };
-          case "containsOnly":
-            return {
-              [r2.fieldName]: buildFilter(
-                { equals: String(val1).split(",") },
-                {
-                  multiTableSearch: r2.multiTableSearch,
-                  insensitive: true
-                }
-              )
-            };
-          case "on": {
-            const start = new Date(val1);
-            start.setHours(0, 0, 0, 0);
-            const end = new Date(val1);
-            end.setHours(23, 59, 59, 59);
-            return {
-              [r2.fieldName]: buildFilter(
-                { gte: start.toISOString(), lt: end.toISOString() },
-                { multiTableSearch: r2.multiTableSearch }
-              )
-            };
-          }
-          case "after":
-            return {
-              [r2.fieldName]: buildFilter(
-                { gte: new Date(val1).toISOString() },
-                { multiTableSearch: r2.multiTableSearch }
-              )
-            };
-          case "before":
-            return {
-              [r2.fieldName]: buildFilter(
-                { lt: new Date(val1).toISOString() },
-                { multiTableSearch: r2.multiTableSearch }
-              )
-            };
-        }
+      AND: rawRows.map((r2) => {
+        const builder = getBuilder(r2.fieldType);
+        return builder.build(r2);
       }).filter(Boolean)
     };
     if (onSearch) {
-      onSearch(param);
+      onSearch(param, rawRows);
     }
-  }, [buildFilter, getValues, rows, onSearch]);
+  }, [getValues, rows, onSearch]);
   return /* @__PURE__ */ jsx(
     ExpandCollapse_default,
     {
@@ -5277,6 +5755,6 @@ function variantClass(variant) {
   }
 }
 
-export { AdvanceSearch_default as AdvanceSearch, Button2 as Button, DataTable_default as DataTable, DialogAlert, FormErrorMessage, FormField, FormFieldContext, FormItem, FormItemContext, FormLabel, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, navbar_default as Navbar, NumberInput, PreventPageLeave_default as PreventPageLeave, TextInput, booleanToSelectValue, buttonVariants2 as buttonVariants, cn, compareAlphanumeric, debounce, isDefined, isEmptyObject, renderContentSlot, selectValueToBoolean, stripNullishObject, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useScreenSize_default as useScreenSize, useTruncated_default as useTruncated };
+export { AdvanceSearch_default as AdvanceSearch, Button2 as Button, DataTable_default as DataTable, DialogAlert, FormErrorMessage, FormField, FormFieldContext, FormItem, FormItemContext, FormLabel, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, navbar_default as Navbar, NumberInput, PreventPageLeave_default as PreventPageLeave, TextInput, booleanToSelectValue, buttonVariants2 as buttonVariants, cn, compareAlphanumeric, debounce, isDefined, isEmptyObject, selectValueToBoolean, stripNullishObject, throttle, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useScreenSize_default as useScreenSize, useTruncated_default as useTruncated };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map