baaz-custom-components 5.0.25 → 5.0.26

package/dist/index.css

@@ -22,6 +22,7 @@
       "Courier New",
       monospace;
     --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-yellow-400: oklch(85.2% 0.199 91.936);
     --color-green-800: oklch(44.8% 0.119 151.328);
     --color-blue-700: oklch(48.8% 0.243 264.376);
     --color-black: #000;
@@ -802,9 +803,21 @@
   .rounded-xs {
     border-radius: var(--radius-xs);
   }
+  .rounded-tl-md {
+    border-top-left-radius: calc(var(--radius) - 2px);
+  }
   .rounded-tl-sm {
     border-top-left-radius: calc(var(--radius) - 4px);
   }
+  .rounded-tr-md {
+    border-top-right-radius: calc(var(--radius) - 2px);
+  }
+  .rounded-br-md {
+    border-bottom-right-radius: calc(var(--radius) - 2px);
+  }
+  .rounded-bl-md {
+    border-bottom-left-radius: calc(var(--radius) - 2px);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -901,6 +914,12 @@
   .bg-input {
     background-color: var(--input);
   }
+  .bg-input\/50 {
+    background-color: var(--input);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--input) 50%, transparent);
+    }
+  }
   .bg-muted {
     background-color: var(--muted);
   }
@@ -934,6 +953,9 @@
       background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
     }
   }
+  .bg-yellow-400 {
+    background-color: var(--color-yellow-400);
+  }
   .fill-current {
     fill: currentcolor;
   }
@@ -961,6 +983,9 @@
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
+  .px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -1801,6 +1826,16 @@
       }
     }
   }
+  .hover\:text-primary\/80 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--primary) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:text-sidebar-accent-foreground {
     &:hover {
       @media (hover: hover) {

package/dist/index.d.mts

@@ -104,15 +104,27 @@ type GridProps = {
     onExportExcel?: () => void;
     onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
     filterList: Filters[];
-    onFilterChange: (filter: ActiveFilter) => void;
+    onFilterChange?: (payload: MultiFilterPayload) => void;
     onApiReady?: (api: IApi) => void;
+    initialFilters?: any[];
+};
+type FilterCondition = ActiveFilter & {
+    id: string;
+    logic?: "AND" | "OR" | "WHERE";
+};
+type MultiFilterPayload = {
+    conditions: FilterCondition[];
+    formatted: any[];
+    action: "apply" | "clear";
+};
+type FilterValue = string | {
+    start?: string;
+    end?: string;
 };
 type ActiveFilter = {
-    column?: string | null;
-    operator?: string | null;
-    value?: string | null;
-    startDate?: string | null;
-    endDate?: string | null;
+    column?: string;
+    operator?: string;
+    value?: FilterValue;
 };
 
 declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<IApi | null>>;

package/dist/index.d.ts

@@ -104,15 +104,27 @@ type GridProps = {
     onExportExcel?: () => void;
     onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
     filterList: Filters[];
-    onFilterChange: (filter: ActiveFilter) => void;
+    onFilterChange?: (payload: MultiFilterPayload) => void;
     onApiReady?: (api: IApi) => void;
+    initialFilters?: any[];
+};
+type FilterCondition = ActiveFilter & {
+    id: string;
+    logic?: "AND" | "OR" | "WHERE";
+};
+type MultiFilterPayload = {
+    conditions: FilterCondition[];
+    formatted: any[];
+    action: "apply" | "clear";
+};
+type FilterValue = string | {
+    start?: string;
+    end?: string;
 };
 type ActiveFilter = {
-    column?: string | null;
-    operator?: string | null;
-    value?: string | null;
-    startDate?: string | null;
-    endDate?: string | null;
+    column?: string;
+    operator?: string;
+    value?: FilterValue;
 };
 
 declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<IApi | null>>;

package/dist/index.js

@@ -1993,7 +1993,8 @@ var GridHeader = ({
   searchValue,
   searchkey = "",
   filterList,
-  onFilterChange
+  onFilterChange,
+  initialFilters = []
 }) => {
   const [downloadMenu, setDownloadMenu] = (0, import_react5.useState)(false);
   const [filterMenu, setFilterMenu] = (0, import_react5.useState)(false);
@@ -2002,17 +2003,29 @@ var GridHeader = ({
   const downloadRef = (0, import_react5.useRef)(null);
   const filterRef = (0, import_react5.useRef)(null);
   const filterDropdownRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    if (initialFilters && initialFilters.length > 0) {
+      const initialConditions = initialFilters.map(
+        (filter, index) => ({
+          id: crypto.randomUUID(),
+          column: filter.column,
+          operator: filter.operator,
+          value: filter.value,
+          logic: index === 0 ? "WHERE" : filter.logic || "AND"
+        })
+      );
+      setConditions(initialConditions);
+    }
+  }, []);
   (0, import_react5.useEffect)(() => {
     if (!filterMenu || !filterDropdownRef.current) return;
     const dropdown = filterDropdownRef.current;
     const rect = dropdown.getBoundingClientRect();
-    const overflowRight = rect.right > window.innerWidth;
-    const overflowBottom = rect.bottom > window.innerHeight;
-    if (overflowRight) {
+    if (rect.right > window.innerWidth) {
       dropdown.style.left = "auto";
       dropdown.style.right = "0";
     }
-    if (overflowBottom) {
+    if (rect.bottom > window.innerHeight) {
       dropdown.style.top = "auto";
       dropdown.style.bottom = "100%";
       dropdown.style.marginBottom = "8px";
@@ -2030,17 +2043,44 @@ var GridHeader = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  (0, import_react5.useEffect)(() => {
-    onFilterChange == null ? void 0 : onFilterChange({
-      conditions
-    });
+  const isValidFilter = (condition) => {
+    if (!condition.column || !condition.operator) return false;
+    if (condition.operator === "date-range") {
+      const rangeValue = condition.value;
+      return !!((rangeValue == null ? void 0 : rangeValue.start) && (rangeValue == null ? void 0 : rangeValue.end));
+    }
+    return condition.value !== void 0 && condition.value !== "";
+  };
+  const allFiltersValid = (0, import_react5.useMemo)(() => {
+    if (conditions.length === 0) return false;
+    return conditions.every(isValidFilter);
   }, [conditions]);
+  const activeFilterCount = (initialFilters == null ? void 0 : initialFilters.length) || 0;
+  const formatFiltersForApi = (conditions2) => {
+    return conditions2.filter(isValidFilter).map(({ column, operator, value, logic }, index) => ({
+      column,
+      operator,
+      value,
+      logic: index === 0 ? "WHERE" : logic != null ? logic : "AND"
+    }));
+  };
+  const hasChangesFromInitial = (0, import_react5.useMemo)(() => {
+    if (conditions.length === 0 && activeFilterCount === 0) return false;
+    if (conditions.length !== activeFilterCount) return true;
+    const formatted = formatFiltersForApi(conditions);
+    const initialFormatted = initialFilters || [];
+    if (formatted.length !== initialFormatted.length) return true;
+    return JSON.stringify(formatted) !== JSON.stringify(initialFormatted);
+  }, [conditions, initialFilters, activeFilterCount]);
+  const canApply = (0, import_react5.useMemo)(() => {
+    return allFiltersValid && hasChangesFromInitial;
+  }, [allFiltersValid, hasChangesFromInitial]);
   const addCondition = () => {
     setConditions((prev) => [
       ...prev,
       {
         id: crypto.randomUUID(),
-        logic: prev.length === 0 ? void 0 : "AND"
+        logic: prev.length === 0 ? "WHERE" : "AND"
       }
     ]);
   };
@@ -2050,22 +2090,48 @@ var GridHeader = ({
     );
   };
   const deleteCondition = (id) => {
-    setConditions((prev) => prev.filter((c) => c.id !== id));
+    const updatedConditions = conditions.filter((c) => c.id !== id);
+    setConditions(updatedConditions);
+    if (updatedConditions.length === 0) {
+      setFilterMenu(false);
+      onFilterChange == null ? void 0 : onFilterChange({
+        conditions: [],
+        formatted: [],
+        action: "clear"
+      });
+    }
+  };
+  const applyFilters = () => {
+    if (!canApply) return;
+    const formatted = formatFiltersForApi(conditions);
+    onFilterChange == null ? void 0 : onFilterChange({
+      conditions: conditions.filter(isValidFilter),
+      formatted,
+      action: "apply"
+    });
+    setFilterMenu(false);
   };
   const clearFilters = () => {
     setConditions([]);
+    setFilterMenu(false);
+    onFilterChange == null ? void 0 : onFilterChange({
+      conditions: [],
+      formatted: [],
+      action: "clear"
+    });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between bg-card py-2 px-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between bg-card py-2 px-4 rounded-tl-md rounded-tr-md", children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-3", children: [
       filterList.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", ref: filterRef, children: [
         /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "button",
           {
             onClick: () => setFilterMenu((p) => !p),
-            className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-input text-sm",
+            className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-input text-sm cursor-pointer",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.ListFilter, { size: 16 }),
-              "Filters"
+              "Filters",
+              activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ml-1 px-1.5 py-0.5 text-xs bg-primary text-primary-foreground rounded-full font-medium", children: activeFilterCount })
             ]
           }
         ),
@@ -2081,16 +2147,20 @@ var GridHeader = ({
                   "button",
                   {
                     onClick: clearFilters,
-                    className: "p-2 rounded-md hover:bg-destructive/30",
+                    className: "p-2 rounded-md hover:bg-destructive/30 cursor-pointer",
+                    title: "Clear all filters",
                     children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.X, { size: 16 })
                   }
                 )
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "space-y-3", children: conditions.map((condition, index) => {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
                 const selectedColumn = filterList.find(
                   (f) => f.columnName.value === condition.column
                 );
+                const selectedOperator = selectedColumn == null ? void 0 : selectedColumn.operators.find(
+                  (op) => op.value === condition.operator
+                );
                 return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                   "div",
                   {
@@ -2105,8 +2175,8 @@ var GridHeader = ({
                           }),
                           className: "w-full px-2 py-2 rounded-md bg-input text-sm",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "AND", children: "and" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "OR", children: "or" })
+                            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "AND", children: "AND" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "OR", children: "OR" })
                           ]
                         }
                       ) }),
@@ -2121,7 +2191,7 @@ var GridHeader = ({
                           }),
                           className: "flex-1 min-w-0 px-3 py-2 rounded-md bg-input text-sm",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", children: "Column" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", disabled: true, children: "Column" }),
                             filterList.map((f) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                               "option",
                               {
@@ -2142,29 +2212,91 @@ var GridHeader = ({
                             operator: e.target.value,
                             value: void 0
                           }),
-                          className: "flex-1 min-w-0 px-3 py-2 rounded-md bg-input text-sm",
+                          className: "flex-1 min-w-0 px-3 py-2 rounded-md bg-input text-sm disabled:opacity-50 disabled:cursor-not-allowed",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", children: "Operator" }),
-                            selectedColumn == null ? void 0 : selectedColumn.operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: op.label, children: op.label }, op.label))
+                            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", disabled: true, children: "Operator" }),
+                            selectedColumn == null ? void 0 : selectedColumn.operators.map((op) => {
+                              var _a2;
+                              return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: (_a2 = op.value) != null ? _a2 : "", children: op.label }, op.value);
+                            })
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                        "input",
-                        {
-                          value: (_d = condition.value) != null ? _d : "",
-                          onChange: (e) => updateCondition(condition.id, {
-                            value: e.target.value
-                          }),
-                          placeholder: "Enter value",
-                          className: "flex-1 min-w-0 px-3 py-2 rounded-md bg-input text-sm"
-                        }
-                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                        (selectedOperator == null ? void 0 : selectedOperator.value) === "input" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                          "input",
+                          {
+                            value: (_d = condition.value) != null ? _d : "",
+                            onChange: (e) => updateCondition(condition.id, {
+                              value: e.target.value
+                            }),
+                            placeholder: "Enter value",
+                            className: "w-full px-3 py-2 rounded-md bg-input text-sm"
+                          }
+                        ),
+                        (selectedOperator == null ? void 0 : selectedOperator.value) === "select" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                          "select",
+                          {
+                            value: (_e = condition.value) != null ? _e : "",
+                            onChange: (e) => updateCondition(condition.id, {
+                              value: e.target.value
+                            }),
+                            className: "w-full px-3 py-2 rounded-md bg-input text-sm",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", disabled: true, children: "Select value" }),
+                              (_f = selectedOperator.options) == null ? void 0 : _f.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+                            ]
+                          }
+                        ),
+                        (selectedOperator == null ? void 0 : selectedOperator.value) === "date" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                          "input",
+                          {
+                            type: "date",
+                            value: (_g = condition.value) != null ? _g : "",
+                            onChange: (e) => updateCondition(condition.id, {
+                              value: e.target.value
+                            }),
+                            className: "w-full px-3 py-2 rounded-md bg-input text-sm"
+                          }
+                        ),
+                        (selectedOperator == null ? void 0 : selectedOperator.value) === "date-range" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex gap-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                            "input",
+                            {
+                              type: "date",
+                              value: (_i = (_h = condition.value) == null ? void 0 : _h.start) != null ? _i : "",
+                              onChange: (e) => updateCondition(condition.id, {
+                                value: __spreadProps(__spreadValues({}, condition.value), {
+                                  start: e.target.value
+                                })
+                              }),
+                              placeholder: "Start date",
+                              className: "w-full px-3 py-2 rounded-md bg-input text-sm"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                            "input",
+                            {
+                              type: "date",
+                              value: (_k = (_j = condition.value) == null ? void 0 : _j.end) != null ? _k : "",
+                              onChange: (e) => updateCondition(condition.id, {
+                                value: __spreadProps(__spreadValues({}, condition.value), {
+                                  end: e.target.value
+                                })
+                              }),
+                              placeholder: "End date",
+                              className: "w-full px-3 py-2 rounded-md bg-input text-sm"
+                            }
+                          )
+                        ] }),
+                        !selectedOperator && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full px-3 py-2 rounded-md bg-input/50 text-sm text-muted-foreground", children: "Select operator" })
+                      ] }),
                       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-[40px] flex justify-center shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                         "button",
                         {
                           onClick: () => deleteCondition(condition.id),
-                          className: "p-2 rounded-md hover:bg-destructive/30",
+                          className: "p-2 rounded-md hover:bg-destructive/30 cursor-pointer",
+                          title: "Delete condition",
                           children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Trash2, { size: 16 })
                         }
                       ) })
@@ -2173,17 +2305,38 @@ var GridHeader = ({
                   condition.id
                 );
               }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-                "button",
-                {
-                  onClick: addCondition,
-                  className: "flex items-center gap-2 text-sm text-primary",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Plus, { size: 14 }),
-                    "Add condition"
-                  ]
-                }
-              )
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between pt-2 border-t", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                  "button",
+                  {
+                    onClick: addCondition,
+                    className: "flex items-center gap-2 text-sm text-primary hover:text-primary/80 cursor-pointer",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Plus, { size: 14 }),
+                      "Add condition"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                  "button",
+                  {
+                    onClick: applyFilters,
+                    disabled: !canApply,
+                    className: "flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed hover:bg-primary/90 transition-colors cursor-pointer",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Check, { size: 16 }),
+                      "Apply",
+                      hasChangesFromInitial && canApply && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        "span",
+                        {
+                          className: "ml-1 w-2 h-2 bg-yellow-400 rounded-full",
+                          title: "Unapplied changes"
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
             ]
           }
         )
@@ -2193,11 +2346,11 @@ var GridHeader = ({
           "button",
           {
             onClick: () => setDownloadMenu((p) => !p),
-            className: "p-2 rounded-md hover:bg-input",
+            className: "p-2 rounded-md hover:bg-input cursor-pointer",
             children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Ellipsis, { size: 16 })
           }
         ),
-        downloadMenu && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "absolute top-full right-0 mt-2 w-32 rounded-md border bg-background shadow-lg z-50", children: [
+        downloadMenu && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "absolute top-full right-0 mt-2 w-32 rounded-md border bg-background shadow-lg z-50 overflow-hidden", children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
             "button",
             {
@@ -2205,7 +2358,7 @@ var GridHeader = ({
                 onPdf == null ? void 0 : onPdf();
                 setDownloadMenu(false);
               },
-              className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted",
+              className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted cursor-pointer",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.FileText, { size: 14 }),
                 "PDF"
@@ -2219,7 +2372,7 @@ var GridHeader = ({
                 onExcel == null ? void 0 : onExcel();
                 setDownloadMenu(false);
               },
-              className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted",
+              className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted cursor-pointer",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.FileSpreadsheet, { size: 14 }),
                 "Excel"
@@ -2237,7 +2390,7 @@ var GridHeader = ({
           "button",
           {
             onClick: () => setSearchOpen(true),
-            className: "w-[40px] h-[40px] flex items-center justify-center rounded-md hover:bg-input",
+            className: "w-[40px] h-[40px] flex items-center justify-center rounded-md hover:bg-input cursor-pointer",
             children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Search, { size: 18 })
           }
         ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2 w-full h-full px-3 rounded-md border border-input bg-background", children: [
@@ -2252,7 +2405,14 @@ var GridHeader = ({
               value: searchValue
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setSearchOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.X, { size: 16 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "button",
+            {
+              onClick: () => setSearchOpen(false),
+              className: "cursor-pointer",
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.X, { size: 16 })
+            }
+          )
         ] })
       }
     ) })
@@ -2275,7 +2435,8 @@ var Grid = (0, import_react6.forwardRef)(
       downloadable = true,
       fileName,
       fonts,
-      onFilterChange
+      onFilterChange,
+      initialFilters
     } = _b, rest = __objRest(_b, [
       "data",
       "columns",
@@ -2287,7 +2448,8 @@ var Grid = (0, import_react6.forwardRef)(
       "downloadable",
       "fileName",
       "fonts",
-      "onFilterChange"
+      "onFilterChange",
+      "initialFilters"
     ]);
     const apiRef = (0, import_react6.useRef)(null);
     const containerRef = (0, import_react6.useRef)(null);
@@ -2373,7 +2535,8 @@ var Grid = (0, import_react6.forwardRef)(
           onSearch: rest.onSearch,
           searchValue: rest.searchValue,
           filterList: rest.filterList,
-          onFilterChange
+          onFilterChange,
+          initialFilters
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-1 w-full overflow-hidden", ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_grid.WillowDark, { fonts, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-full h-full relative", children: rest.loading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center z-10", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -2476,7 +2639,7 @@ function Pagination({
   const handlePageSizeChange = (size) => {
     onPageSizeChange == null ? void 0 : onPageSizeChange(size);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between bg-card px-3 py-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between bg-card px-3 py-2 rounded-br-md rounded-bl-md", children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-3 text-xs text-muted-foreground tracking-wider font-medium", children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { children: [
         "Showing ",