baaz-custom-components 5.1.2 → 5.2.0

package/dist/index.mjs

@@ -1911,10 +1911,11 @@ var breadcrumb_default = CustomBreadcrumb;
 // src/components/custom/grid/index.tsx
 import {
   useCallback as useCallback2,
-  useRef as useRef3,
+  useRef as useRef5,
   useImperativeHandle,
   forwardRef,
-  useEffect as useEffect7
+  useEffect as useEffect9,
+  useMemo as useMemo4
 } from "react";
 import { Grid as SvarGrid, WillowDark } from "@svar-ui/react-grid";
 
@@ -1950,13 +1951,7 @@ function exportExcel(rows, name) {
 
 // src/components/custom/grid/gridHeader/index.tsx
 import { useEffect as useEffect6, useRef as useRef2, useState as useState7 } from "react";
-import {
-  FileText,
-  FileSpreadsheet,
-  Search,
-  Ellipsis,
-  X as X3
-} from "lucide-react";
+import { FileText, FileSpreadsheet, Search, Ellipsis, X as X4 } from "lucide-react";
 
 // src/components/custom/grid/gridHeader/components/filters.tsx
 import { useEffect as useEffect5, useMemo as useMemo3, useRef, useState as useState6 } from "react";
@@ -2013,13 +2008,13 @@ var Filters = ({
       }
     ]);
   };
-  const updateCondition = (id, next) => {
+  const updateCondition = (id3, next) => {
     setConditions(
-      (prev) => prev.map((c) => c.id === id ? __spreadValues(__spreadValues({}, c), next) : c)
+      (prev) => prev.map((c) => c.id === id3 ? __spreadValues(__spreadValues({}, c), next) : c)
     );
   };
-  const deleteCondition = (id) => {
-    const updatedConditions = conditions.filter((c) => c.id !== id);
+  const deleteCondition = (id3) => {
+    const updatedConditions = conditions.filter((c) => c.id !== id3);
     setConditions(updatedConditions);
     if (updatedConditions.length === 0) {
       setFilterMenu(false);
@@ -2322,9 +2317,52 @@ var Filters = ({
 };
 var filters_default = Filters;
 
-// src/components/custom/grid/gridHeader/index.tsx
+// src/components/custom/grid/gridHeader/components/selectionBar.tsx
+import { X as X3 } from "lucide-react";
 import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
-var GridHeader = ({
+function SelectionBar({
+  selectedCount,
+  selectedData,
+  actions,
+  onAction,
+  onClear
+}) {
+  return /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2 animate-in fade-in slide-in-from-left-2 duration-150", children: [
+    /* @__PURE__ */ jsx24(
+      "button",
+      {
+        onClick: onClear,
+        title: "Clear selection",
+        className: "p-1.5 rounded-md hover:bg-input text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
+        children: /* @__PURE__ */ jsx24(X3, { size: 15 })
+      }
+    ),
+    /* @__PURE__ */ jsxs18("span", { className: "text-xs font-medium text-foreground whitespace-nowrap", children: [
+      selectedCount,
+      " ",
+      selectedCount === 1 ? "row" : "rows",
+      " selected"
+    ] }),
+    /* @__PURE__ */ jsx24("div", { className: "h-4 w-px bg-border mx-1" }),
+    actions.map((action) => /* @__PURE__ */ jsxs18(
+      "button",
+      {
+        onClick: () => onAction(action.id, selectedData),
+        title: action.label,
+        className: "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium border border-border bg-primary/90 hover:bg-primary ease-in-out transition-colors cursor-pointer whitespace-nowrap",
+        children: [
+          action.icon && /* @__PURE__ */ jsx24("span", { className: "shrink-0 text-muted-foreground", children: action.icon }),
+          action.label
+        ]
+      },
+      action.id
+    ))
+  ] });
+}
+
+// src/components/custom/grid/gridHeader/index.tsx
+import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+function GridHeader({
   onPdf,
   onExcel,
   onSearch = () => {
@@ -2336,11 +2374,17 @@ var GridHeader = ({
   filterList,
   onFilterChange,
   initialFilters = [],
-  children
-}) => {
+  children,
+  selectedCount = 0,
+  selectedData = [],
+  selectionActions = [],
+  onSelectionAction,
+  onClearSelection
+}) {
   const [downloadMenu, setDownloadMenu] = useState7(false);
   const [searchOpen, setSearchOpen] = useState7(false);
   const downloadRef = useRef2(null);
+  const isSelecting = selectedCount > 0;
   useEffect6(() => {
     const handleClickOutside = (e) => {
       if (downloadRef.current && !downloadRef.current.contains(e.target)) {
@@ -2350,9 +2394,18 @@ var GridHeader = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col md:flex-row md:items-center justify-between bg-card py-2 px-2 md:px-4 rounded-tl-md rounded-tr-md border-l border-r border-t", children: [
-    /* @__PURE__ */ jsxs18("div", { className: "flex justify-between items-center gap-3", children: [
-      /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col md:flex-row md:items-center justify-between bg-card py-2 px-2 md:px-4 rounded-tl-md rounded-tr-md border-l border-r border-t min-h-[48px]", children: [
+    /* @__PURE__ */ jsx25("div", { className: "flex items-center gap-3", children: isSelecting ? /* @__PURE__ */ jsx25(
+      SelectionBar,
+      {
+        selectedCount,
+        selectedData,
+        actions: selectionActions,
+        onAction: (actionId, data) => onSelectionAction == null ? void 0 : onSelectionAction(actionId, data),
+        onClear: () => onClearSelection == null ? void 0 : onClearSelection()
+      }
+    ) : /* @__PURE__ */ jsxs19(Fragment3, { children: [
+      /* @__PURE__ */ jsx25(
         filters_default,
         {
           onFilterChange,
@@ -2360,17 +2413,17 @@ var GridHeader = ({
           filterList
         }
       ),
-      download && /* @__PURE__ */ jsxs18("div", { className: "relative", ref: downloadRef, children: [
-        /* @__PURE__ */ jsx24(
+      download && /* @__PURE__ */ jsxs19("div", { className: "relative", ref: downloadRef, children: [
+        /* @__PURE__ */ jsx25(
           "button",
           {
             onClick: () => setDownloadMenu((p) => !p),
             className: "p-2 rounded-md hover:bg-input cursor-pointer",
-            children: /* @__PURE__ */ jsx24(Ellipsis, { size: 16 })
+            children: /* @__PURE__ */ jsx25(Ellipsis, { size: 16 })
           }
         ),
-        downloadMenu && /* @__PURE__ */ jsxs18("div", { className: "absolute top-full right-0 mt-2 w-32 rounded-md border !bg-background shadow-lg z-50 overflow-hidden", children: [
-          /* @__PURE__ */ jsxs18(
+        downloadMenu && /* @__PURE__ */ jsxs19("div", { className: "absolute top-full right-0 mt-2 w-32 rounded-md border !bg-background shadow-lg z-50 overflow-hidden", children: [
+          /* @__PURE__ */ jsxs19(
             "button",
             {
               onClick: () => {
@@ -2379,12 +2432,12 @@ var GridHeader = ({
               },
               className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted cursor-pointer",
               children: [
-                /* @__PURE__ */ jsx24(FileText, { size: 14 }),
-                "PDF"
+                /* @__PURE__ */ jsx25(FileText, { size: 14 }),
+                " PDF"
               ]
             }
           ),
-          /* @__PURE__ */ jsxs18(
+          /* @__PURE__ */ jsxs19(
             "button",
             {
               onClick: () => {
@@ -2393,29 +2446,29 @@ var GridHeader = ({
               },
               className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted cursor-pointer",
               children: [
-                /* @__PURE__ */ jsx24(FileSpreadsheet, { size: 14 }),
-                "Excel"
+                /* @__PURE__ */ jsx25(FileSpreadsheet, { size: 14 }),
+                " Excel"
               ]
             }
           )
         ] })
       ] })
-    ] }),
+    ] }) }),
     children,
-    search && /* @__PURE__ */ jsx24("div", { className: "relative h-[40px] flex items-center", children: /* @__PURE__ */ jsx24(
+    search && /* @__PURE__ */ jsx25("div", { className: "relative h-[40px] flex items-center", children: /* @__PURE__ */ jsx25(
       "div",
       {
         className: `absolute md:right-0 flex items-center transition-all duration-200 ${searchOpen ? "w-[250px]" : "w-[40px]"} h-[40px]`,
-        children: !searchOpen ? /* @__PURE__ */ jsx24(
+        children: !searchOpen ? /* @__PURE__ */ jsx25(
           "button",
           {
             onClick: () => setSearchOpen(true),
             className: "w-[40px] h-[40px] flex items-center justify-center rounded-md hover:bg-input cursor-pointer",
-            children: /* @__PURE__ */ jsx24(Search, { size: 18 })
+            children: /* @__PURE__ */ jsx25(Search, { size: 18 })
           }
-        ) : /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2 w-full h-full px-3 rounded-md border border-input bg-background", children: [
-          /* @__PURE__ */ jsx24(Search, { size: 16 }),
-          /* @__PURE__ */ jsx24(
+        ) : /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2 w-full h-full px-3 rounded-md border border-input bg-background", children: [
+          /* @__PURE__ */ jsx25(Search, { size: 16 }),
+          /* @__PURE__ */ jsx25(
             "input",
             {
               autoFocus: true,
@@ -2425,23 +2478,186 @@ var GridHeader = ({
               value: searchValue
             }
           ),
-          /* @__PURE__ */ jsx24(
-            "button",
-            {
-              onClick: () => setSearchOpen(false),
-              className: "cursor-pointer",
-              children: /* @__PURE__ */ jsx24(X3, { size: 16 })
-            }
-          )
+          /* @__PURE__ */ jsx25("button", { onClick: () => setSearchOpen(false), className: "cursor-pointer", children: /* @__PURE__ */ jsx25(X4, { size: 16 }) })
         ] })
       }
     ) })
   ] });
-};
+}
 var gridHeader_default = GridHeader;
 
+// src/components/custom/grid/checkboxCell/checkBoxCell.tsx
+import React3 from "react";
+
+// node_modules/@svar-ui/lib-react/dist/index.js
+import { useState as useState8, useRef as useRef3, useEffect as useEffect7 } from "react";
+
+// node_modules/@svar-ui/lib-dom/dist/index.js
+function getEnv() {
+  return {
+    detect: () => true,
+    addEvent: function(node, event, handler) {
+      node.addEventListener(event, handler);
+      return () => node.removeEventListener(event, handler);
+    },
+    addGlobalEvent: function(event, handler) {
+      document.addEventListener(event, handler);
+      return () => document.removeEventListener(event, handler);
+    },
+    getTopNode: function() {
+      return window.document.body;
+    }
+  };
+}
+var env = getEnv();
+var id2 = (/* @__PURE__ */ new Date()).valueOf();
+
+// node_modules/@svar-ui/lib-react/dist/index.js
+function useWritable(writable2, initialValue, name) {
+  const [state, setState] = useState8(() => initialValue);
+  if (!writable2) console.warn(`Writable ${name} is not defined`);
+  useEffect7(() => {
+    if (!writable2) return;
+    const unsubscribe = writable2.subscribe((newValue) => {
+      setState(() => newValue);
+    });
+    return unsubscribe;
+  }, [writable2]);
+  return state;
+}
+function useStore(store, name) {
+  const s = store.getState();
+  const r = store.getReactiveState();
+  return useWritable(r[name], s[name], name);
+}
+
+// src/components/custom/grid/checkboxCell/checkBoxCell.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var CheckboxCell = ({ row, api, column }) => {
+  const selectedRows = useStore(api, "selectedRows");
+  const isSelected = selectedRows.includes(row.id);
+  const handleChange = (e) => {
+    var _a, _b;
+    e.stopPropagation();
+    const isChecked = e.target.checked;
+    api.exec("select-row", { id: row.id, mode: isChecked, toggle: true });
+    (_b = (_a = column == null ? void 0 : column.config) == null ? void 0 : _a.onSelectionChange) == null ? void 0 : _b.call(_a, row.id, row, isChecked);
+  };
+  return /* @__PURE__ */ jsx26(
+    "div",
+    {
+      className: "flex items-center justify-center w-full h-full",
+      "data-action": "ignore-click",
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsx26(
+        "input",
+        {
+          type: "checkbox",
+          checked: isSelected,
+          onChange: handleChange,
+          className: "w-4 h-4 rounded border border-border bg-background accent-primary cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary"
+        }
+      )
+    }
+  );
+};
+var checkBoxCell_default = React3.memo(CheckboxCell);
+
+// src/components/custom/grid/checkboxCell/headerCheckBox.tsx
+import React4, { useEffect as useEffect8, useRef as useRef4, useReducer } from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var HeaderCheckbox = ({ api, column }) => {
+  var _a;
+  const checkboxRef = useRef4(null);
+  const computeState = () => {
+    var _a2, _b, _c;
+    const pageData = (_b = (_a2 = column == null ? void 0 : column.config) == null ? void 0 : _a2.getPageData()) != null ? _b : [];
+    const selectedRows = (_c = api.getState().selectedRows) != null ? _c : [];
+    const selectedOnPage = pageData.filter(
+      (r) => selectedRows.includes(r.id)
+    ).length;
+    return {
+      allSelected: pageData.length > 0 && selectedOnPage === pageData.length,
+      someSelected: selectedOnPage > 0 && selectedOnPage < pageData.length
+    };
+  };
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+  useEffect8(() => {
+    const unsub = api.on("select-row", () => {
+      forceUpdate();
+    });
+    return () => {
+      if (typeof unsub === "function") unsub();
+    };
+  }, [api]);
+  useEffect8(() => {
+    var _a2;
+    (_a2 = column == null ? void 0 : column.config) == null ? void 0 : _a2.clearToken;
+    forceUpdate();
+  }, [(_a = column == null ? void 0 : column.config) == null ? void 0 : _a.clearToken]);
+  const state = computeState();
+  useEffect8(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate = state.someSelected;
+    }
+  }, [state.someSelected]);
+  const handleChange = (e) => {
+    var _a2, _b, _c, _d;
+    e.stopPropagation();
+    const isChecked = e.target.checked;
+    const pageData = (_b = (_a2 = column == null ? void 0 : column.config) == null ? void 0 : _a2.getPageData()) != null ? _b : [];
+    pageData.forEach((row) => {
+      api.exec("select-row", { id: row.id, mode: isChecked, toggle: true });
+    });
+    (_d = (_c = column == null ? void 0 : column.config) == null ? void 0 : _c.onSelectAllPage) == null ? void 0 : _d.call(_c, pageData, isChecked);
+  };
+  return /* @__PURE__ */ jsx27(
+    "div",
+    {
+      className: "flex items-center justify-center w-full h-full",
+      "data-action": "ignore-click",
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsx27(
+        "input",
+        {
+          ref: checkboxRef,
+          type: "checkbox",
+          checked: state.allSelected,
+          onChange: handleChange,
+          className: "w-4 h-4 rounded border border-border bg-background accent-primary cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary"
+        }
+      )
+    }
+  );
+};
+var headerCheckBox_default = React4.memo(HeaderCheckbox);
+
+// src/components/custom/grid/utils/buildCheckboxColumn.tsx
+function buildCheckboxColumn({
+  getPageData,
+  onSelectionChange,
+  onSelectAllPage,
+  clearToken
+}) {
+  const configRef = {
+    getPageData,
+    onSelectionChange,
+    onSelectAllPage,
+    clearToken
+  };
+  return {
+    id: "__selection__",
+    width: 58,
+    sortable: false,
+    resize: false,
+    config: configRef,
+    header: { cell: headerCheckBox_default },
+    cell: checkBoxCell_default
+  };
+}
+
 // src/components/custom/grid/index.tsx
-import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
 var Grid = forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -2457,7 +2673,17 @@ var Grid = forwardRef(
       fonts,
       onFilterChange,
       initialFilters,
-      children
+      children,
+      onFocusCell = () => false,
+      selectionEnabled = false,
+      selectedIds = [],
+      onRowSelectionChange,
+      onSelectAllPage,
+      selectedCount,
+      selectedData,
+      selectionActions,
+      onSelectionAction,
+      onClearSelection
     } = _b, rest = __objRest(_b, [
       "data",
       "columns",
@@ -2471,33 +2697,91 @@ var Grid = forwardRef(
       "fonts",
       "onFilterChange",
       "initialFilters",
-      "children"
+      "children",
+      "onFocusCell",
+      "selectionEnabled",
+      "selectedIds",
+      "onRowSelectionChange",
+      "onSelectAllPage",
+      "selectedCount",
+      "selectedData",
+      "selectionActions",
+      "onSelectionAction",
+      "onClearSelection"
     ]);
-    const apiRef = useRef3(null);
-    const containerRef = useRef3(null);
+    var _a2;
+    const apiRef = useRef5(null);
+    const containerRef = useRef5(null);
+    const dataRef = useRef5(data);
+    useEffect9(() => {
+      dataRef.current = data;
+    }, [data]);
+    const onRowSelectionChangeRef = useRef5(onRowSelectionChange);
+    useEffect9(() => {
+      onRowSelectionChangeRef.current = onRowSelectionChange;
+    }, [onRowSelectionChange]);
+    const onSelectAllPageRef = useRef5(onSelectAllPage);
+    useEffect9(() => {
+      onSelectAllPageRef.current = onSelectAllPage;
+    }, [onSelectAllPage]);
     useImperativeHandle(ref, () => apiRef.current, []);
+    const clearTokenRef = useRef5(0);
+    const prevSelectedCountRef = useRef5(selectedCount != null ? selectedCount : 0);
+    if (((_a2 = prevSelectedCountRef.current) != null ? _a2 : 0) > 0 && (selectedCount != null ? selectedCount : 0) === 0) {
+      clearTokenRef.current += 1;
+    }
+    prevSelectedCountRef.current = selectedCount != null ? selectedCount : 0;
+    const resolvedColumns = useMemo4(() => {
+      if (!selectionEnabled) return columns;
+      const checkboxCol = buildCheckboxColumn({
+        getPageData: () => {
+          var _a3;
+          return (_a3 = dataRef.current) != null ? _a3 : [];
+        },
+        onSelectionChange: (id3, rowData, checked) => {
+          var _a3;
+          (_a3 = onRowSelectionChangeRef.current) == null ? void 0 : _a3.call(onRowSelectionChangeRef, id3, rowData, checked);
+        },
+        onSelectAllPage: (pageData, checked) => {
+          var _a3;
+          (_a3 = onSelectAllPageRef.current) == null ? void 0 : _a3.call(onSelectAllPageRef, pageData, checked);
+        },
+        clearToken: clearTokenRef.current
+      });
+      return [checkboxCol, ...columns];
+    }, [selectionEnabled, columns, clearTokenRef.current]);
     const resizeColumns = useCallback2(() => {
-      var _a2;
       const api = apiRef.current;
       const container = containerRef.current;
-      if (!api) return;
-      const gridWidth = (_a2 = container == null ? void 0 : container.clientWidth) != null ? _a2 : 0;
+      if (!api || !container) return;
+      const gridWidth = container.clientWidth;
+      const isFixedColumn = (col) => col.id === "__selection__";
+      const resizableColumns = resolvedColumns.filter(
+        (col) => !isFixedColumn(col)
+      );
+      const fixedColumns = resolvedColumns.filter(
+        (col) => isFixedColumn(col)
+      );
+      const totalFixedWidth = fixedColumns.reduce((sum, col) => {
+        var _a3, _b2;
+        const column = api.getColumn(col.id);
+        const width = (_b2 = (_a3 = column == null ? void 0 : column.width) != null ? _a3 : col.width) != null ? _b2 : 0;
+        return sum + (isNaN(width) ? 0 : width);
+      }, 0);
+      const availableWidth = Math.max(gridWidth - totalFixedWidth, 0);
       if (data && data.length > 0) {
-        columns.forEach((col) => {
-          api.exec("resize-column", {
-            id: col.id,
-            auto: "data"
-          });
+        resizableColumns.forEach((col) => {
+          api.exec("resize-column", { id: col.id, auto: "data" });
         });
-        const totalColumnWidth = columns.reduce((sum, col) => {
+        const totalAutoWidth = resizableColumns.reduce((sum, col) => {
           var _a3;
           const column = api.getColumn(col.id);
           const width = (_a3 = column == null ? void 0 : column.width) != null ? _a3 : 0;
           return sum + (isNaN(width) ? 0 : width);
         }, 0);
-        if (totalColumnWidth < gridWidth) {
-          const extra = (gridWidth - totalColumnWidth) / columns.length;
-          columns.forEach((col) => {
+        if (totalAutoWidth < availableWidth && resizableColumns.length > 0) {
+          const extra = (availableWidth - totalAutoWidth) / resizableColumns.length;
+          resizableColumns.forEach((col) => {
             var _a3;
             const column = api.getColumn(col.id);
             const currentWidth = (_a3 = column == null ? void 0 : column.width) != null ? _a3 : 0;
@@ -2510,20 +2794,18 @@ var Grid = forwardRef(
           });
         }
       } else {
-        const columnWidth = gridWidth / columns.length;
-        columns.forEach((col) => {
+        const equalWidth = resizableColumns.length > 0 ? availableWidth / resizableColumns.length : 0;
+        resizableColumns.forEach((col) => {
           api.exec("resize-column", {
             id: col.id,
-            width: columnWidth
+            width: equalWidth
           });
         });
       }
-    }, [columns, data]);
-    useEffect7(() => {
+    }, [resolvedColumns, data]);
+    useEffect9(() => {
       if (!containerRef.current) return;
-      const observer = new ResizeObserver(() => {
-        resizeColumns();
-      });
+      const observer = new ResizeObserver(() => resizeColumns());
       observer.observe(containerRef.current);
       return () => observer.disconnect();
     }, [resizeColumns]);
@@ -2531,35 +2813,27 @@ var Grid = forwardRef(
       (api) => {
         apiRef.current = api;
         resizeColumns();
+        api.intercept("focus-cell", onFocusCell);
       },
-      [resizeColumns]
+      [resizeColumns, onFocusCell]
     );
     const getSelectedData = () => {
-      var _a2, _b2;
-      const selected = (_b2 = (_a2 = apiRef.current) == null ? void 0 : _a2.getState().selectedRows) != null ? _b2 : [];
-      let selectedData = data.filter((row) => {
-        return selected.includes(row.id);
-      });
-      return selectedData;
+      var _a3, _b2;
+      const selected = (_b2 = (_a3 = apiRef.current) == null ? void 0 : _a3.getState().selectedRows) != null ? _b2 : [];
+      return data.filter((row) => selected.includes(row.id));
     };
     const handleExportPdf = useCallback2(() => {
       const selected = getSelectedData();
-      if (selected.length) {
-        exportPdf(selected, fileName);
-      } else {
-        onExportPdf == null ? void 0 : onExportPdf();
-      }
-    }, [getSelectedData, exportPdf, onExportPdf, fileName]);
+      if (selected.length) exportPdf(selected, fileName);
+      else onExportPdf == null ? void 0 : onExportPdf();
+    }, [data, fileName, onExportPdf]);
     const handleExportExcel = useCallback2(() => {
       const selected = getSelectedData();
-      if (selected.length) {
-        exportExcel(selected, fileName);
-      } else {
-        onExportExcel == null ? void 0 : onExportExcel();
-      }
-    }, [getSelectedData, exportExcel, onExportExcel, fileName]);
-    return /* @__PURE__ */ jsxs19("div", { className: "w-full h-full flex flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsx25(
+      if (selected.length) exportExcel(selected, fileName);
+      else onExportExcel == null ? void 0 : onExportExcel();
+    }, [data, fileName, onExportExcel]);
+    return /* @__PURE__ */ jsxs20("div", { className: "w-full h-full flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsx28(
         gridHeader_default,
         {
           onPdf: handleExportPdf,
@@ -2572,10 +2846,31 @@ var Grid = forwardRef(
           filterList: rest.filterList,
           onFilterChange,
           initialFilters,
+          selectedCount,
+          selectedData,
+          selectionActions,
+          onSelectionAction,
+          onClearSelection,
           children
         }
       ),
-      /* @__PURE__ */ jsx25("div", { className: "flex-1 w-full border border-border overflow-hidden", ref: containerRef, children: /* @__PURE__ */ jsx25(WillowDark, { fonts, children: /* @__PURE__ */ jsx25("div", { className: "w-full h-full relative", children: rest.loading ? /* @__PURE__ */ jsx25("div", { className: "absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center z-10", children: /* @__PURE__ */ jsx25("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }) }) : /* @__PURE__ */ jsx25(SvarGrid, __spreadProps(__spreadValues({}, rest), { data, columns, init })) }) }) })
+      /* @__PURE__ */ jsx28(
+        "div",
+        {
+          className: "flex-1 w-full border border-border overflow-hidden",
+          ref: containerRef,
+          children: /* @__PURE__ */ jsx28(WillowDark, { fonts, children: /* @__PURE__ */ jsx28("div", { className: "w-full h-full relative", children: rest.loading ? /* @__PURE__ */ jsx28("div", { className: "absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center z-10", children: /* @__PURE__ */ jsx28("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }) }) : /* @__PURE__ */ jsx28(
+            SvarGrid,
+            __spreadProps(__spreadValues({}, rest), {
+              data,
+              columns: resolvedColumns,
+              init,
+              selectedRows: selectionEnabled ? selectedIds : void 0,
+              select: selectionEnabled ? false : rest.select
+            })
+          ) }) })
+        }
+      )
     ] });
   }
 );
@@ -2583,9 +2878,10 @@ var grid_default = Grid;
 
 // src/components/custom/grid/sortableHeaderCell.tsx
 import { MoveDown, MoveUp, ArrowUpDown } from "lucide-react";
-import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
-function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }) {
-  if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ jsx26("span", { children: cell == null ? void 0 : cell.text });
+import React5 from "react";
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+var SortableHeaderCell = ({ cell, sortKey, sortOrder, onSortChange }) => {
+  if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ jsx29("span", { children: cell == null ? void 0 : cell.text });
   const active = sortKey === cell.id;
   const handleClick = () => {
     if (!onSortChange || !cell.id) return;
@@ -2599,20 +2895,27 @@ function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }) {
     }
     onSortChange("", null);
   };
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       onClick: handleClick,
       className: "cursor-pointer flex items-center gap-2 justify-between select-none",
       children: [
-        /* @__PURE__ */ jsx26("span", { children: cell.text }),
-        !active && /* @__PURE__ */ jsx26(ArrowUpDown, { className: "w-4 h-4 opacity-50" }),
-        active && (sortOrder === "asc" ? /* @__PURE__ */ jsx26(MoveDown, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx26(MoveUp, { className: "w-4 h-4" }))
+        /* @__PURE__ */ jsx29("span", { children: cell.text }),
+        !active && /* @__PURE__ */ jsx29(ArrowUpDown, { className: "w-4 h-4 opacity-50" }),
+        active && (sortOrder === "asc" ? /* @__PURE__ */ jsx29(MoveDown, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx29(MoveUp, { className: "w-4 h-4" }))
       ]
     }
   );
-}
-var sortableHeaderCell_default = SortableHeaderCell;
+};
+var sortableHeaderCell_default = React5.memo(SortableHeaderCell, (prev, next) => {
+  var _a, _b, _c, _d;
+  if (((_a = prev.cell) == null ? void 0 : _a.id) !== ((_b = next.cell) == null ? void 0 : _b.id)) return false;
+  if (((_c = prev.cell) == null ? void 0 : _c.text) !== ((_d = next.cell) == null ? void 0 : _d.text)) return false;
+  if (prev.sortKey !== next.sortKey) return false;
+  if (prev.sortOrder !== next.sortOrder) return false;
+  return true;
+});
 
 // src/utils/pagination.ts
 function getPaginationRange(currentPage, totalPages, siblingCount = 2) {
@@ -2646,7 +2949,7 @@ function getPaginationRange(currentPage, totalPages, siblingCount = 2) {
 
 // src/components/custom/pagination/index.tsx
 import { ChevronLeft, ChevronRight as ChevronRight3 } from "lucide-react";
-import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
 function Pagination({
   totalCount,
   count = null,
@@ -2666,47 +2969,47 @@ function Pagination({
   const handlePageSizeChange = (size) => {
     onPageSizeChange == null ? void 0 : onPageSizeChange(size);
   };
-  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col-reverse gap-2 md:flex-row items-center justify-between bg-card px-3 py-2 rounded-br-md rounded-bl-md border-l border-r border-b", children: [
-    /* @__PURE__ */ jsxs21("div", { className: "flex justify-between w-full md:w-auto items-center gap-3 text-xs text-muted-foreground tracking-wider font-medium", children: [
-      /* @__PURE__ */ jsxs21("span", { children: [
+  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col-reverse gap-2 md:flex-row items-center justify-between bg-card px-3 py-2 rounded-br-md rounded-bl-md border-l border-r border-b", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "flex justify-between w-full md:w-auto items-center gap-3 text-xs text-muted-foreground tracking-wider font-medium", children: [
+      /* @__PURE__ */ jsxs22("span", { children: [
         "Showing ",
-        /* @__PURE__ */ jsx27("span", { className: "text-foreground", children: count }),
+        /* @__PURE__ */ jsx30("span", { className: "text-foreground", children: count }),
         " of",
         " ",
-        /* @__PURE__ */ jsx27("span", { className: "text-foreground", children: totalCount })
+        /* @__PURE__ */ jsx30("span", { className: "text-foreground", children: totalCount })
       ] }),
-      showSizeChanger && /* @__PURE__ */ jsx27(
+      showSizeChanger && /* @__PURE__ */ jsx30(
         "select",
         {
           value: pageSize,
           onChange: (e) => handlePageSizeChange(Number(e.target.value)),
           className: "rounded-md border border-input bg-background px-3 py-2 text-xs text-foreground focus:outline-none",
-          children: sizeChangerOptions.map((size) => /* @__PURE__ */ jsxs21("option", { value: size, children: [
+          children: sizeChangerOptions.map((size) => /* @__PURE__ */ jsxs22("option", { value: size, children: [
             size,
             " / page"
           ] }, size))
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs21("div", { className: "flex w-full md:w-auto justify-between items-center gap-1", children: [
-      /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsxs22("div", { className: "flex w-full md:w-auto justify-between items-center gap-1", children: [
+      /* @__PURE__ */ jsx30(
         "button",
         {
           disabled: currentPage === 1,
           onClick: () => handlePageChange(currentPage - 1),
           className: "border border-border w-8 h-8 rounded-md flex items-center justify-center disabled:opacity-40 hover:bg-card-foreground transition",
-          children: /* @__PURE__ */ jsx27(ChevronLeft, { className: "w-5 h-5 select-none" })
+          children: /* @__PURE__ */ jsx30(ChevronLeft, { className: "w-5 h-5 select-none" })
         }
       ),
       pages.map(
-        (page, idx) => page === "dots" ? /* @__PURE__ */ jsx27(
+        (page, idx) => page === "dots" ? /* @__PURE__ */ jsx30(
           "span",
           {
             className: "px-2 text-muted-foreground text-xs tracking-wider font-medium",
             children: "\u2026"
           },
           `dots-${idx}`
-        ) : /* @__PURE__ */ jsx27(
+        ) : /* @__PURE__ */ jsx30(
           "button",
           {
             onClick: () => handlePageChange(page),
@@ -2716,13 +3019,13 @@ function Pagination({
           page
         )
       ),
-      /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx30(
         "button",
         {
           disabled: currentPage === totalPages,
           onClick: () => handlePageChange(currentPage + 1),
           className: "border border-border w-8 h-8 rounded-md flex items-center justify-center disabled:opacity-40 hover:bg-card-foreground transition",
-          children: /* @__PURE__ */ jsx27(ChevronRight3, { className: "w-5 h-5 select-none" })
+          children: /* @__PURE__ */ jsx30(ChevronRight3, { className: "w-5 h-5 select-none" })
         }
       )
     ] })
@@ -2731,9 +3034,9 @@ function Pagination({
 var pagination_default = Pagination;
 
 // src/components/custom/toolbar/index.tsx
-import { ChevronRight as ChevronRight4, X as X4 } from "lucide-react";
-import { useState as useState8, useRef as useRef4, useEffect as useEffect8 } from "react";
-import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { ChevronRight as ChevronRight4, X as X5 } from "lucide-react";
+import { useState as useState9, useRef as useRef6, useEffect as useEffect10 } from "react";
+import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
 var SlideToolbar = ({
   items,
   children,
@@ -2745,9 +3048,9 @@ var SlideToolbar = ({
   className = ""
 }) => {
   const resolvedItems = items != null ? items : children ? void 0 : [];
-  const [open, setOpen] = useState8(false);
-  const panelRef = useRef4(null);
-  useEffect8(() => {
+  const [open, setOpen] = useState9(false);
+  const panelRef = useRef6(null);
+  useEffect10(() => {
     if (!open || !closeOnBackdrop) return;
     const handlePointerDown = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
@@ -2760,8 +3063,8 @@ var SlideToolbar = ({
   const handleItem = (item) => {
     onAction == null ? void 0 : onAction(item.id);
   };
-  return /* @__PURE__ */ jsxs22(Fragment3, { children: [
-    /* @__PURE__ */ jsx28("style", { children: `
+  return /* @__PURE__ */ jsxs23(Fragment4, { children: [
+    /* @__PURE__ */ jsx31("style", { children: `
         @keyframes bounceX {
           0%, 100% { transform: translateX(0px); }
           40%       { transform: translateX(4px); }
@@ -2771,7 +3074,7 @@ var SlideToolbar = ({
           animation: bounceX 1.4s ease-in-out infinite;
         }
       ` }),
-    /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx31(
       "div",
       {
         role: "button",
@@ -2785,7 +3088,7 @@ var SlideToolbar = ({
           "hover:brightness-110 transition-all duration-200",
           open ? "opacity-0 pointer-events-none !w-0 border-r-0" : "opacity-100 pointer-events-auto"
         ].join(" "),
-        children: /* @__PURE__ */ jsx28(
+        children: /* @__PURE__ */ jsx31(
           ChevronRight4,
           {
             className: "text-primary-foreground chevron-bounce",
@@ -2794,7 +3097,7 @@ var SlideToolbar = ({
         )
       }
     ),
-    /* @__PURE__ */ jsxs22(
+    /* @__PURE__ */ jsxs23(
       "div",
       {
         ref: panelRef,
@@ -2811,36 +3114,36 @@ var SlideToolbar = ({
         ].join(" "),
         style: { width: `${panelWidth}px` },
         children: [
-          /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border shrink-0", children: [
-            /* @__PURE__ */ jsx28("span", { className: "text-sm font-semibold text-foreground tracking-wide", children: title }),
-            /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border shrink-0", children: [
+            /* @__PURE__ */ jsx31("span", { className: "text-sm font-semibold text-foreground tracking-wide", children: title }),
+            /* @__PURE__ */ jsx31(
               "button",
               {
                 onClick: () => setOpen(false),
                 "aria-label": "Close toolbar",
                 className: "flex items-center justify-center w-6 h-6 rounded-md\n                       text-foreground/50 hover:text-foreground hover:bg-surface-alt\n                       transition-all duration-150 cursor-pointer",
-                children: /* @__PURE__ */ jsx28(X4, { size: 13 })
+                children: /* @__PURE__ */ jsx31(X5, { size: 13 })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx28("div", { className: "flex-1 overflow-y-auto overflow-x-hidden py-2 scrollbar-none", children: resolvedItems ? /* @__PURE__ */ jsxs22(Fragment3, { children: [
-            /* @__PURE__ */ jsx28("p", { className: "px-4 pt-1 pb-2 text-[10px] font-semibold tracking-[0.16em] uppercase text-foreground/35", children: "Actions" }),
-            /* @__PURE__ */ jsx28("nav", { className: "flex flex-col px-2", children: resolvedItems.map((item) => /* @__PURE__ */ jsxs22(
+          /* @__PURE__ */ jsx31("div", { className: "flex-1 overflow-y-auto overflow-x-hidden py-2 scrollbar-none", children: resolvedItems ? /* @__PURE__ */ jsxs23(Fragment4, { children: [
+            /* @__PURE__ */ jsx31("p", { className: "px-4 pt-1 pb-2 text-[10px] font-semibold tracking-[0.16em] uppercase text-foreground/35", children: "Actions" }),
+            /* @__PURE__ */ jsx31("nav", { className: "flex flex-col px-2", children: resolvedItems.map((item) => /* @__PURE__ */ jsxs23(
               "button",
               {
                 onClick: () => handleItem(item),
                 className: "group flex items-center gap-3 px-3 py-2.5 rounded-lg w-full\n                               text-left text-[13px] font-medium cursor-pointer\n                               text-foreground/60 hover:text-foreground hover:bg-surface-alt\n                               transition-all duration-150 border-l-2 border-transparent\n                               hover:border-primary",
                 children: [
-                  /* @__PURE__ */ jsx28("span", { className: "flex shrink-0 text-foreground/40 group-hover:text-primary transition-colors duration-150", children: item.icon }),
-                  /* @__PURE__ */ jsx28("span", { className: "flex-1 leading-none", children: item.label })
+                  /* @__PURE__ */ jsx31("span", { className: "flex shrink-0 text-foreground/40 group-hover:text-primary transition-colors duration-150", children: item.icon }),
+                  /* @__PURE__ */ jsx31("span", { className: "flex-1 leading-none", children: item.label })
                 ]
               },
               item.id
             )) })
           ] }) : children }),
-          footerLabel && /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 px-4 py-3 border-t border-border shrink-0", children: [
-            /* @__PURE__ */ jsx28("span", { className: "w-1.5 h-1.5 rounded-full bg-foreground/20 shrink-0" }),
-            /* @__PURE__ */ jsx28("span", { className: "text-[10px] tracking-[0.12em] uppercase text-foreground/30 font-medium", children: footerLabel })
+          footerLabel && /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 px-4 py-3 border-t border-border shrink-0", children: [
+            /* @__PURE__ */ jsx31("span", { className: "w-1.5 h-1.5 rounded-full bg-foreground/20 shrink-0" }),
+            /* @__PURE__ */ jsx31("span", { className: "text-[10px] tracking-[0.12em] uppercase text-foreground/30 font-medium", children: footerLabel })
           ] })
         ]
       }