@dreamtree-org/twreact-ui 1.0.63 → 1.0.64

package/dist/index.esm.js

@@ -220,7 +220,7 @@ const Check = createLucideIcon$1("Check", [
  */
 
 
-const ChevronDown = createLucideIcon$1("ChevronDown", [
+const ChevronDown$1 = createLucideIcon$1("ChevronDown", [
   ["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]
 ]);
 
@@ -374,6 +374,20 @@ const Info = createLucideIcon$1("Info", [
  */
 
 
+const List = createLucideIcon$1("List", [
+  ["line", { x1: "8", x2: "21", y1: "6", y2: "6", key: "7ey8pc" }],
+  ["line", { x1: "8", x2: "21", y1: "12", y2: "12", key: "rjfblc" }],
+  ["line", { x1: "8", x2: "21", y1: "18", y2: "18", key: "c3b1m8" }],
+  ["line", { x1: "3", x2: "3.01", y1: "6", y2: "6", key: "1g7gq3" }],
+  ["line", { x1: "3", x2: "3.01", y1: "12", y2: "12", key: "1pjlvk" }],
+  ["line", { x1: "3", x2: "3.01", y1: "18", y2: "18", key: "28t2mc" }]
+]);
+
+/**
+ * lucide-react v0.0.1 - ISC
+ */
+
+
 const Loader2 = createLucideIcon$1("Loader2", [
   ["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]
 ]);
@@ -456,6 +470,24 @@ const Plus = createLucideIcon$1("Plus", [
  */
 
 
+const RefreshCcw = createLucideIcon$1("RefreshCcw", [
+  [
+    "path",
+    { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "14sxne" }
+  ],
+  ["path", { d: "M3 3v5h5", key: "1xhq8a" }],
+  [
+    "path",
+    { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16", key: "1hlbsb" }
+  ],
+  ["path", { d: "M16 16h5v5", key: "ccwih5" }]
+]);
+
+/**
+ * lucide-react v0.0.1 - ISC
+ */
+
+
 const Search = createLucideIcon$1("Search", [
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
   ["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]
@@ -3664,7 +3696,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
             return _objectSpread$a(_objectSpread$a({}, prev), {}, _defineProperty$4({}, group.label, !prev[group.label]));
           });
         }
-      }, /*#__PURE__*/React__default.createElement(ChevronDown, {
+      }, /*#__PURE__*/React__default.createElement(ChevronDown$1, {
         className: cn$1("h-4 w-4 text-gray-400 transition-transform", {
           "rotate-180": collapsedGroups[group.label]
         })
@@ -3773,7 +3805,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
     "aria-label": "Clear selection"
   }, /*#__PURE__*/React__default.createElement(X, {
     className: "h-4 w-4"
-  })), /*#__PURE__*/React__default.createElement(ChevronDown, {
+  })), /*#__PURE__*/React__default.createElement(ChevronDown$1, {
     className: cn$1("h-4 w-4 text-gray-400 transition-transform", {
       "rotate-180": isOpen
     })
@@ -3831,7 +3863,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
   }, error));
 });
 
-var _excluded$k = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange"];
+var _excluded$k = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "stripedColors", "responsiveBreakpoint"];
 function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Table = function Table(_ref) {
@@ -3875,87 +3907,123 @@ var Table = function Table(_ref) {
     _ref$showLimitSelecto = _ref.showLimitSelector,
     showLimitSelector = _ref$showLimitSelecto === void 0 ? true : _ref$showLimitSelecto,
     onLimitChange = _ref.onLimitChange,
+    _ref$showReloadButton = _ref.showReloadButton,
+    showReloadButton = _ref$showReloadButton === void 0 ? true : _ref$showReloadButton,
+    renderReloadButton = _ref.renderReloadButton,
+    onReload = _ref.onReload,
+    _ref$stripedRows = _ref.stripedRows,
+    stripedRows = _ref$stripedRows === void 0 ? true : _ref$stripedRows,
+    _ref$stripedColors = _ref.stripedColors,
+    stripedColors = _ref$stripedColors === void 0 ? ["#ffffff", "#f7fafc"] : _ref$stripedColors,
+    _ref$responsiveBreakp = _ref.responsiveBreakpoint,
+    responsiveBreakpoint = _ref$responsiveBreakp === void 0 ? 768 : _ref$responsiveBreakp,
     props = _objectWithoutProperties$1(_ref, _excluded$k);
-  // keep original table data / loading
-  var _useState = useState(Array.isArray(data) ? data : []),
+  // State for responsive view
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    tableData = _useState2[0],
-    setTableData = _useState2[1];
-  var _useState3 = useState(false),
+    isMobileView = _useState2[0],
+    setIsMobileView = _useState2[1];
+
+  // Keep original table data / loading
+  var _useState3 = useState(Array.isArray(data) ? data : []),
     _useState4 = _slicedToArray(_useState3, 2),
-    loading = _useState4[0],
-    _setLoading = _useState4[1];
+    tableData = _useState4[0],
+    setTableData = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
 
-  // column visibility state (local copy of `columns` so we can toggle isVisible)
-  var _useState5 = useState(function () {
+  // Column visibility state
+  var _useState7 = useState(function () {
       return Array.isArray(columns) ? columns.map(function (c) {
         return _objectSpread$9({}, c);
       }) : [];
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    columnsState = _useState6[0],
-    setColumnsState = _useState6[1];
+    _useState8 = _slicedToArray(_useState7, 2),
+    columnsState = _useState8[0],
+    setColumnsState = _useState8[1];
   useEffect(function () {
-    // sync when prop changes
+    // Sync when prop changes
     setColumnsState(Array.isArray(columns) ? columns.map(function (c) {
       return _objectSpread$9({}, c);
     }) : []);
   }, [columns]);
 
-  // popover state for column toggler
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    showColumnMenu = _useState8[0],
-    setShowColumnMenu = _useState8[1];
+  // Popover state for column toggler
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    showColumnMenu = _useState0[0],
+    setShowColumnMenu = _useState0[1];
   var columnMenuRef = useRef(null);
   var columnToggleBtnRef = useRef(null);
-  var _useState9 = useState(pageSize),
-    _useState0 = _slicedToArray(_useState9, 2),
-    limit = _useState0[0],
-    setLimit = _useState0[1];
+  var _useState1 = useState(pageSize),
+    _useState10 = _slicedToArray(_useState1, 2),
+    limit = _useState10[0],
+    setLimit = _useState10[1];
 
-  // other states
-  var _useState1 = useState({
+  // Other states
+  var _useState11 = useState({
       key: null,
       direction: "asc"
     }),
-    _useState10 = _slicedToArray(_useState1, 2),
-    sortConfig = _useState10[0],
-    setSortConfig = _useState10[1];
-  var _useState11 = useState(new Set()),
     _useState12 = _slicedToArray(_useState11, 2),
-    selectedRows = _useState12[0],
-    setSelectedRows = _useState12[1];
+    sortConfig = _useState12[0],
+    setSortConfig = _useState12[1];
   var _useState13 = useState(new Set()),
     _useState14 = _slicedToArray(_useState13, 2),
-    expandedRows = _useState14[0],
-    setExpandedRows = _useState14[1];
-  var _useState15 = useState(1),
+    selectedRows = _useState14[0],
+    setSelectedRows = _useState14[1];
+  var _useState15 = useState(new Set()),
     _useState16 = _slicedToArray(_useState15, 2),
-    currentPage = _useState16[0],
-    setCurrentPage = _useState16[1];
-  var _useState17 = useState({}),
+    expandedRows = _useState16[0],
+    setExpandedRows = _useState16[1];
+  var _useState17 = useState(1),
     _useState18 = _slicedToArray(_useState17, 2),
-    filters = _useState18[0],
-    setFilters = _useState18[1];
-  var _useState19 = useState(filters.global || ""),
+    currentPage = _useState18[0],
+    setCurrentPage = _useState18[1];
+  var _useState19 = useState({}),
     _useState20 = _slicedToArray(_useState19, 2),
-    searchInput = _useState20[0],
-    setSearchInput = _useState20[1];
-
-  //popover per-row
-  var _useState21 = useState(null),
+    filters = _useState20[0],
+    setFilters = _useState20[1];
+  var _useState21 = useState(filters.global || ""),
     _useState22 = _slicedToArray(_useState21, 2),
-    actionAnchor = _useState22[0],
-    setActionAnchor = _useState22[1];
+    searchInput = _useState22[0],
+    setSearchInput = _useState22[1];
+  var _useState23 = useState(false),
+    _useState24 = _slicedToArray(_useState23, 2),
+    showMobileFilters = _useState24[0],
+    setShowMobileFilters = _useState24[1];
+
+  // Popover per-row
+  var _useState25 = useState(null),
+    _useState26 = _slicedToArray(_useState25, 2),
+    actionAnchor = _useState26[0],
+    setActionAnchor = _useState26[1];
   var actionMenuRef = useRef(null);
 
-  // per-row action menu open key
-  var _useState23 = useState(null),
-    _useState24 = _slicedToArray(_useState23, 2),
-    openActionKey = _useState24[0],
-    setOpenActionKey = _useState24[1];
+  // Per-row action menu open key
+  var _useState27 = useState(null),
+    _useState28 = _slicedToArray(_useState27, 2),
+    openActionKey = _useState28[0],
+    setOpenActionKey = _useState28[1];
   var openRef = useRef(null);
+
+  // Check if mobile view
+  useEffect(function () {
+    var checkMobile = function checkMobile() {
+      setIsMobileView(window.innerWidth < responsiveBreakpoint);
+    };
+
+    // Initial check
+    checkMobile();
+
+    // Add event listener
+    window.addEventListener("resize", checkMobile);
+    return function () {
+      window.removeEventListener("resize", checkMobile);
+    };
+  }, [responsiveBreakpoint]);
   var isValidList = function isValidList(d) {
     return Array.isArray(d);
   };
@@ -3963,7 +4031,7 @@ var Table = function Table(_ref) {
     if (isValidList(newData)) setTableData(newData);else setTableData([]);
   };
 
-  // close column menu when clicking outside
+  // Close column menu when clicking outside
   useEffect(function () {
     var onDocClick = function onDocClick(e) {
       if (showColumnMenu && columnMenuRef.current && !columnMenuRef.current.contains(e.target) && columnToggleBtnRef.current && !columnToggleBtnRef.current.contains(e.target)) {
@@ -3976,7 +4044,7 @@ var Table = function Table(_ref) {
     };
   }, [showColumnMenu]);
 
-  // close per-row actionmenu when clicking outside (existing)
+  // Close per-row actionmenu when clicking outside
   useEffect(function () {
     var handler = function handler(e) {
       if (openActionKey && openRef.current && !openRef.current.contains(e.target)) {
@@ -3989,7 +4057,7 @@ var Table = function Table(_ref) {
     };
   }, [openActionKey]);
 
-  // visible columns derived from columnsState
+  // Visible columns derived from columnsState
   var visibleColumns = useMemo(function () {
     return columnsState.filter(function (col) {
       return col.isVisible !== false;
@@ -4006,7 +4074,7 @@ var Table = function Table(_ref) {
     setCurrentPage(1);
   };
 
-  // keep previous handlers
+  // Handle actions
   var handleOnAction = function handleOnAction(action, row) {
     var _action$onClick;
     (_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action, {
@@ -4056,7 +4124,7 @@ var Table = function Table(_ref) {
     return String(globalIndex);
   };
 
-  // sorting
+  // Sorting
   var sortedData = useMemo(function () {
     if (!sortConfig.key) return tableData;
     var key = sortConfig.key,
@@ -4078,19 +4146,17 @@ var Table = function Table(_ref) {
     });
   }, [tableData, sortConfig]);
 
-  // filtering
+  // Filtering
   var filteredData = useMemo(function () {
-    // if no filtering enabled, return sortedData
-
     if (!filterable || Object.keys(filters).length === 0) return sortedData;
     var globalQuery = String(filters.global || "").trim().toLowerCase();
     return sortedData.filter(function (row) {
-      // 1) per-column filters: all must match
+      // Per-column filters
       var perColumnOk = Object.entries(filters).every(function (_ref2) {
         var _ref3 = _slicedToArray(_ref2, 2),
           key = _ref3[0],
           value = _ref3[1];
-        if (key === "global") return true; // skip global here
+        if (key === "global") return true;
         if (!value) return true;
         var cell = row === null || row === void 0 ? void 0 : row[key];
         if (cell == null) return false;
@@ -4098,18 +4164,14 @@ var Table = function Table(_ref) {
       });
       if (!perColumnOk) return false;
 
-      // 2) global filter (if present) - search across visible columns first,
-      // fallback to searching all row values
+      // Global filter
       if (globalQuery) {
-        // try visible columns
         var matchesVisible = visibleColumns.some(function (col) {
           var v = row === null || row === void 0 ? void 0 : row[col.key];
           if (v == null) return false;
           return String(v).toLowerCase().includes(globalQuery);
         });
         if (matchesVisible) return true;
-
-        // fallback: check any value in the row object
         return Object.values(row || {}).some(function (v) {
           return v != null ? String(v).toLowerCase().includes(globalQuery) : false;
         });
@@ -4118,18 +4180,18 @@ var Table = function Table(_ref) {
     });
   }, [sortedData, filters, filterable, visibleColumns]);
 
-  // pagination indices
+  // Pagination indices
   var startIndex = pagination ? (currentPage - 1) * limit : 0;
   var endIndex = pagination ? startIndex + limit : filteredData.length;
 
-  // paginated view
+  // Paginated view
   var paginatedData = useMemo(function () {
     if (!pagination) return filteredData;
     return filteredData.slice(startIndex, endIndex);
   }, [filteredData, startIndex, endIndex, pagination]);
   var totalPages = Math.max(1, Math.ceil(filteredData.length / limit));
 
-  // sorting handler
+  // Sorting handler
   var handleSort = function handleSort(key) {
     if (!sortable) return;
     var direction = sortConfig.key === key && sortConfig.direction === "asc" ? "desc" : "asc";
@@ -4140,10 +4202,9 @@ var Table = function Table(_ref) {
     onSort === null || onSort === void 0 || onSort(key, direction);
   };
 
-  // selection handlers
+  // Selection handlers
   var handleSelectAll = function handleSelectAll() {
     var newSelection = new Set(selectedRows);
-    // select/deselect all rows on current page
     var pageRowKeys = paginatedData.map(function (r, i) {
       return getRowKey(r, startIndex + i);
     });
@@ -4201,7 +4262,7 @@ var Table = function Table(_ref) {
     return row === null || row === void 0 ? void 0 : row[column.key];
   };
 
-  // UI counts (include action column if enabled)
+  // UI counts
   var visibleCount = (showSerial ? 1 : 0) + visibleColumns.length + (selectable ? 1 : 0) + (hasDetails ? 1 : 0) + (withAction ? 1 : 0);
   var toggleActions = function toggleActions(e, actionCellKey, row) {
     e.stopPropagation();
@@ -4241,32 +4302,28 @@ var Table = function Table(_ref) {
     };
   }, [actionAnchor]);
   useEffect(function () {
-    if (onFetch) {
-      onFetch({
-        setData: setDataForExternal,
-        filters: filters,
-        setLoading: function setLoading(isLoading) {
-          return _setLoading(isLoading);
-        },
-        pagination: {
-          currentPage: currentPage,
-          limit: limit,
-          totalPages: totalPages,
-          nextRecords: paginatedData
-        }
-      });
-    }
-  }, [filters, onFetch, currentPage, limit, paginatedData]);
+    if (!onFetch) return;
+    onFetch({
+      setData: setDataForExternal,
+      filters: filters,
+      setLoading: setLoading,
+      pagination: {
+        currentPage: currentPage,
+        limit: limit,
+        totalPages: totalPages,
+        nextRecords: paginatedData
+      }
+    });
+  }, [filters, currentPage, limit, onFetch]);
   useEffect(function () {
     if (!onFetch && isValidList(data)) setTableData(data);
   }, [data, onFetch]);
 
-  // GLOBAL SEARCH
+  // Global search
   useEffect(function () {
     setSearchInput(filters.global || "");
   }, [filters.global]);
   var applyGlobalSearch = function applyGlobalSearch() {
-    // apply filter only when user clicks Search or presses Enter
     handleFilter("global", searchInput);
   };
   var onGlobalKeyDown = function onGlobalKeyDown(e) {
@@ -4285,38 +4342,274 @@ var Table = function Table(_ref) {
     onLimitChange === null || onLimitChange === void 0 || onLimitChange(parsed);
   };
 
-  // RENDER
+  // Render mobile card
+  var renderMobileCard = function renderMobileCard(row, rowIndexInPage) {
+    var globalIndex = startIndex + rowIndexInPage;
+    var key = getRowKey(row, globalIndex);
+    var actionCellKey = "actions-".concat(key);
+    var extraRowClass = typeof rowClass === "function" ? rowClass({
+      row: row,
+      rowIndex: globalIndex
+    }) : "";
+    var safeExtraRowClass = typeof extraRowClass === "string" ? extraRowClass.trim() : "";
+    var stripeBg = stripedRows && !selectedRows.has(key) ? stripedColors[globalIndex % stripedColors.length] : undefined;
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: key,
+      style: stripeBg ? {
+        backgroundColor: stripeBg
+      } : undefined,
+      className: cn$1("border rounded-lg mb-3 shadow-sm overflow-hidden transition-all duration-200", {
+        "cursor-pointer": !!onRowClick,
+        "bg-primary-50 border-primary-200": selectedRows.has(key),
+        "hover:shadow-md": !selectedRows.has(key)
+      }, safeExtraRowClass),
+      onClick: function onClick() {
+        return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
+      }
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex items-center justify-between p-4 border-b bg-gray-50"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex items-center gap-3"
+    }, hasDetails && /*#__PURE__*/React__default.createElement("button", {
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        toggleExpandRow(row, rowIndexInPage);
+      },
+      "aria-expanded": expandedRows.has(key),
+      className: "p-1 rounded hover:bg-gray-200"
+    }, expandedRows.has(key) ? "▾" : "▸"), selectable && /*#__PURE__*/React__default.createElement("input", {
+      type: "checkbox",
+      className: "rounded border-gray-300 h-4 w-4",
+      checked: selectedRows.has(key),
+      onChange: function onChange(e) {
+        e.stopPropagation();
+        handleSelectRow(row, rowIndexInPage);
+      },
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }), showSerial && /*#__PURE__*/React__default.createElement("span", {
+      className: "text-sm font-medium text-gray-600"
+    }, "#", globalIndex + 1)), withAction && /*#__PURE__*/React__default.createElement("div", {
+      className: "relative"
+    }, /*#__PURE__*/React__default.createElement("button", {
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        toggleActions(e, actionCellKey, row);
+      },
+      "aria-expanded": openActionKey === actionCellKey,
+      className: "p-1.5 rounded hover:bg-gray-200",
+      title: "Actions"
+    }, /*#__PURE__*/React__default.createElement(MoreVertical, {
+      className: "h-4 w-4"
+    })), actionAnchor && actionAnchor.key === actionCellKey && /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement(ActionMenuPortal, {
+      anchorElem: actionAnchor.elem,
+      anchorRow: actionAnchor.row,
+      actions: actionsToUse,
+      onClose: function onClose() {
+        setOpenActionKey(null);
+        setActionAnchor(null);
+      },
+      onAction: function onAction(action) {
+        handleOnAction(action, row);
+        setOpenActionKey(null);
+        setActionAnchor(null);
+      },
+      menuRef: actionMenuRef
+    }), document.body))), /*#__PURE__*/React__default.createElement("div", {
+      className: "p-4"
+    }, visibleColumns.map(function (column, colIndex) {
+      var extraCellClass = typeof cellClass === "function" ? cellClass({
+        row: row,
+        rowIndex: globalIndex,
+        column: column,
+        columnIndex: colIndex
+      }) : "";
+      var safeExtraCellClass = typeof extraCellClass === "string" ? extraCellClass.trim() : "";
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: column.key,
+        className: cn$1("flex justify-between items-center flex-row py-2 border-b last:border-b-0", safeExtraCellClass)
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "text-xs font-medium text-gray-500 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2"
+      }, column.label), /*#__PURE__*/React__default.createElement("div", {
+        className: "text-sm text-gray-900 sm:w-2/3 sm:pl-2 break-words"
+      }, renderCell(column, row, globalIndex)));
+    })), hasDetails && expandedRows.has(key) && DetailsComponent && /*#__PURE__*/React__default.createElement("div", {
+      className: "border-t bg-gray-50 p-4"
+    }, /*#__PURE__*/React__default.createElement(DetailsComponent, {
+      row: row,
+      index: globalIndex
+    })));
+  };
+
+  // Render mobile filters
+  var renderMobileFilters = function renderMobileFilters() {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "mb-4 p-3 bg-gray-50 rounded-lg"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex items-center justify-between mb-3"
+    }, /*#__PURE__*/React__default.createElement("h3", {
+      className: "text-sm font-medium text-gray-700"
+    }, "Filters"), /*#__PURE__*/React__default.createElement("button", {
+      onClick: function onClick() {
+        return setShowMobileFilters(!showMobileFilters);
+      },
+      className: "text-xs text-gray-500 hover:text-gray-700"
+    }, showMobileFilters ? "Hide" : "Show")), showMobileFilters && /*#__PURE__*/React__default.createElement("div", {
+      className: "space-y-3"
+    }, globalSearch && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+      className: "relative"
+    }, /*#__PURE__*/React__default.createElement("input", {
+      type: "text",
+      placeholder: "Search...",
+      className: "w-full rounded-md border border-gray-300 px-4 py-2 text-sm",
+      value: searchInput,
+      onChange: function onChange(e) {
+        return setSearchInput(e.target.value);
+      },
+      onKeyDown: onGlobalKeyDown
+    }), /*#__PURE__*/React__default.createElement(Search, {
+      className: "absolute right-3 top-2.5 h-4 w-4 text-gray-400"
+    }))), filterable && visibleColumns.map(function (column) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: column.key
+      }, /*#__PURE__*/React__default.createElement("label", {
+        className: "block text-xs font-medium text-gray-600 mb-1"
+      }, column.label), /*#__PURE__*/React__default.createElement("input", {
+        type: "text",
+        placeholder: "Filter ".concat(column.label),
+        className: "w-full rounded-md border border-gray-300 px-3 py-2 text-sm",
+        value: filters[column.key] || "",
+        onChange: function onChange(e) {
+          return handleFilter(column.key, e.target.value);
+        }
+      }));
+    })));
+  };
+
+  // Render
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full"
-  }, globalSearch && /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-4 flex items-center gap-2 w-1/2 "
+    className: "w-full border rounded-lg md:rounded-md bg-white"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col md:flex-row justify-between items-start md:items-center gap-3 p-4 border-b"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col sm:flex-row items-start sm:items-center gap-3 w-full md:w-auto"
+  }, showReloadButton && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderReloadButton ? typeof renderReloadButton === "function" ? renderReloadButton() : renderReloadButton : /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: "px-4 py-2 bg-primary-100 flex items-center gap-2 rounded-lg md:rounded text-primary-700 hover:bg-primary-200 transition-colors",
+    onClick: onReload
+  }, /*#__PURE__*/React__default.createElement(RefreshCcw, {
+    className: "size-4"
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "hidden sm:inline"
+  }, "Reload"))), showLimitSelector && /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: "pagination-limit",
+    className: "text-sm text-gray-600 whitespace-nowrap"
+  }, "Show"), /*#__PURE__*/React__default.createElement(Select, {
+    options: Array.isArray(limitOptions) && limitOptions.length > 0 ? limitOptions.map(function (opt) {
+      return {
+        label: String(opt),
+        value: opt
+      };
+    }) : [25, 50, 100].map(function (opt) {
+      return {
+        label: String(opt),
+        value: opt
+      };
+    }),
+    value: limit,
+    allowClear: false,
+    placeholder: "",
+    onChange: function onChange(e) {
+      return handleLimitChange(e);
+    },
+    className: "w-20 md:w-30"
+  }), /*#__PURE__*/React__default.createElement("p", {
+    className: "text-sm text-gray-600 whitespace-nowrap"
+  }, "entries"))), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col sm:flex-row items-start sm:items-center gap-3 w-full md:w-auto"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-sm text-gray-700 whitespace-nowrap"
+  }, filteredData.length === 0 ? 0 : startIndex + 1, " -", " ", Math.min(endIndex, filteredData.length), " of ", filteredData.length, " ", "results"), pagination && /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-1"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-1"
+  }, /*#__PURE__*/React__default.createElement("button", {
+    className: "rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50 hover:bg-gray-50",
+    disabled: currentPage === 1,
+    onClick: function onClick() {
+      return setCurrentPage(function (p) {
+        return Math.max(1, p - 1);
+      });
+    },
+    "aria-label": "Previous page"
+  }, /*#__PURE__*/React__default.createElement(ChevronLeft, {
+    className: "size-4 md:size-5 text-gray-800"
+  })), /*#__PURE__*/React__default.createElement("button", {
+    className: "rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50 hover:bg-gray-50",
+    disabled: currentPage === totalPages,
+    onClick: function onClick() {
+      return setCurrentPage(function (p) {
+        return Math.min(totalPages, p + 1);
+      });
+    },
+    "aria-label": "Next page"
+  }, /*#__PURE__*/React__default.createElement(ChevronRight, {
+    className: "size-4 md:size-5 text-gray-800"
+  })))))), globalSearch && /*#__PURE__*/React__default.createElement("div", {
+    className: "p-4 border-b"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col sm:flex-row items-start sm:items-center gap-2"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "relative w-full"
   }, /*#__PURE__*/React__default.createElement("input", {
     type: "text",
-    placeholder: "Global search...",
-    className: "rounded-md border border-gray-300 px-4 py-3 w-full text-sm flex-1 outline-none",
+    placeholder: "Search...",
+    className: "w-full rounded-lg md:rounded-md border border-gray-300 px-4 py-3 md:py-2 text-sm flex-1 outline-none pr-12",
     value: searchInput,
     onChange: function onChange(e) {
       return setSearchInput(e.target.value);
-    } // just update local state
-    ,
-    onKeyDown: onGlobalKeyDown // apply on Enter
+    },
+    onKeyDown: onGlobalKeyDown
   }), /*#__PURE__*/React__default.createElement("button", {
-    onClick: applyGlobalSearch // apply when clicked
-    ,
-    className: "rounded-md border bg-secondary-100 border-gray-300 px-4 py-2 text-sm hover:bg-gray-100 absolute right-0 left-0 w-fit ml-auto h-full",
+    onClick: applyGlobalSearch,
+    className: "absolute right-2 top-1/2 transform -translate-y-1/2 p-2 rounded-lg hover:bg-gray-100",
     title: "Search"
   }, /*#__PURE__*/React__default.createElement(Search, {
-    className: "text-gray-400"
+    className: "h-4 w-4 text-gray-400"
   }))), /*#__PURE__*/React__default.createElement("button", {
     onClick: function onClick() {
       setSearchInput("");
       handleFilter("global", "");
     },
-    className: "rounded-md border border-gray-300 h-full px-3 py-3 text-sm hover:bg-gray-100",
-    title: "Clear"
-  }, "Clear")), /*#__PURE__*/React__default.createElement("div", {
+    className: "whitespace-nowrap rounded-lg md:rounded-md border border-gray-300 px-4 py-3 md:py-2 text-sm hover:bg-gray-100 w-full sm:w-auto"
+  }, "Clear"))), filterable && isMobileView && renderMobileFilters(), showColumnMenu && /*#__PURE__*/React__default.createElement("div", {
+    ref: columnMenuRef,
+    className: "absolute right-4 mt-2 w-56 z-50 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 p-3 lg:block sm:block hidden",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "text-sm font-medium text-center mb-2"
+  }, "Show / hide columns"), /*#__PURE__*/React__default.createElement("div", {
+    className: "max-h-56 overflow-auto"
+  }, columnsState.map(function (col) {
+    return /*#__PURE__*/React__default.createElement("label", {
+      key: col.key,
+      className: "flex cursor-pointer items-center gap-2 px-2 py-1.5 hover:bg-gray-50 rounded"
+    }, /*#__PURE__*/React__default.createElement("input", {
+      type: "checkbox",
+      checked: col.isVisible !== false,
+      onChange: function onChange() {
+        return toggleColumnVisibility(col.key);
+      },
+      className: "rounded"
+    }), /*#__PURE__*/React__default.createElement("span", {
+      className: "text-sm font-normal"
+    }, col.label));
+  }))), !isMobileView && /*#__PURE__*/React__default.createElement("div", {
     className: "overflow-x-auto"
   }, /*#__PURE__*/React__default.createElement("table", _extends({
     className: cn$1("min-w-full divide-y divide-gray-200", className)
@@ -4352,7 +4645,7 @@ var Table = function Table(_ref) {
       className: cn$1("h-3 w-3", {
         "text-primary-600": sortConfig.key === column.key && sortConfig.direction === "asc"
       })
-    }), /*#__PURE__*/React__default.createElement(ChevronDown, {
+    }), /*#__PURE__*/React__default.createElement(ChevronDown$1, {
       className: cn$1("h-3 w-3 -mt-1", {
         "text-primary-600": sortConfig.key === column.key && sortConfig.direction === "desc"
       })
@@ -4373,53 +4666,54 @@ var Table = function Table(_ref) {
     className: "p-1 rounded hover:bg-gray-100"
   }, /*#__PURE__*/React__default.createElement(MoreVertical, {
     className: "h-4 w-4"
-  })), showColumnMenu && /*#__PURE__*/React__default.createElement("div", {
-    ref: columnMenuRef,
-    className: "absolute right-0 mt-2 w-56 z-50 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 p-2",
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
-  }, /*#__PURE__*/React__default.createElement("p", {
-    className: "text-sm font-normal text-center"
-  }, "Show / hide columns"), /*#__PURE__*/React__default.createElement("div", {
-    className: "max-h-56 overflow-auto"
-  }, columnsState.map(function (col) {
-    return /*#__PURE__*/React__default.createElement("label", {
-      key: col.key,
-      className: "flex cursor-pointer items-center gap-2 px-2 py-1 hover:bg-gray-50 rounded"
-    }, /*#__PURE__*/React__default.createElement("input", {
-      type: "checkbox",
-      checked: col.isVisible !== false,
-      onChange: function onChange() {
-        return toggleColumnVisibility(col.key);
-      }
-    }), /*#__PURE__*/React__default.createElement("span", {
-      className: "text-sm font-normal"
-    }, col.label));
-  }))))), withAction && /*#__PURE__*/React__default.createElement("th", {
+  })))), withAction && /*#__PURE__*/React__default.createElement("th", {
     className: "w-12 px-4 py-3"
-  })), /*#__PURE__*/React__default.createElement("tr", null, filterable && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("th", null), visibleColumns.map(function (column) {
+  })), filterable && /*#__PURE__*/React__default.createElement("tr", null, hasDetails && /*#__PURE__*/React__default.createElement("th", {
+    className: "pb-4"
+  }), showSerial && /*#__PURE__*/React__default.createElement("th", {
+    className: "pb-4"
+  }), selectable && /*#__PURE__*/React__default.createElement("th", {
+    className: "pb-4"
+  }), visibleColumns.map(function (column) {
     return /*#__PURE__*/React__default.createElement("th", {
-      className: "text-left pl-6 pb-4"
-    }, /*#__PURE__*/React__default.createElement("input", {
       key: column.key,
+      className: "px-6 pb-4"
+    }, /*#__PURE__*/React__default.createElement("input", {
       type: "text",
-      placeholder: "Filter ".concat(column.label, "..."),
-      className: "rounded-md border border-gray-300 px-3 py-1 text-sm font-normal",
+      placeholder: "Filter ".concat(column.label),
+      className: "w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm",
       value: filters[column.key] || "",
       onChange: function onChange(e) {
         return handleFilter(column.key, e.target.value);
       }
     }));
-  })))), /*#__PURE__*/React__default.createElement("tbody", {
+  }), /*#__PURE__*/React__default.createElement("th", {
+    className: "pb-4"
+  }), withAction && /*#__PURE__*/React__default.createElement("th", {
+    className: "pb-4"
+  }))), /*#__PURE__*/React__default.createElement("tbody", {
     className: "divide-y divide-gray-200 bg-white"
   }, loading ? /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     colSpan: visibleCount,
-    className: "px-6 py-4 text-sm"
-  }, "Loading...")) : paginatedData.length === 0 ? /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+    className: "px-6 py-8 text-center"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col items-center gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "text-sm text-gray-500"
+  }, "Loading...")))) : paginatedData.length === 0 ? /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     colSpan: visibleCount,
-    className: "px-6 py-4 text-sm"
-  }, "No results found.")) : paginatedData.map(function (row, rowIndexInPage) {
+    className: "px-6 py-8 text-center"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col items-center gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-gray-400"
+  }, /*#__PURE__*/React__default.createElement(List, {
+    className: "h-8 w-8"
+  })), /*#__PURE__*/React__default.createElement("span", {
+    className: "text-sm text-gray-500"
+  }, "No results found.")))) : paginatedData.map(function (row, rowIndexInPage) {
     var globalIndex = startIndex + rowIndexInPage;
     var key = getRowKey(row, globalIndex);
     var actionCellKey = "actions-".concat(key);
@@ -4428,9 +4722,13 @@ var Table = function Table(_ref) {
       rowIndex: globalIndex
     }) : "";
     var safeExtraRowClass = typeof extraRowClass === "string" ? extraRowClass.trim() : "";
+    var stripeBg = stripedRows && !selectedRows.has(key) ? stripedColors[globalIndex % stripedColors.length] : undefined;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: key
     }, /*#__PURE__*/React__default.createElement("tr", {
+      style: stripeBg ? {
+        backgroundColor: stripeBg
+      } : undefined,
       className: cn$1("hover:bg-gray-50", {
         "cursor-pointer": !!onRowClick,
         "bg-primary-50": selectedRows.has(key)
@@ -4471,9 +4769,7 @@ var Table = function Table(_ref) {
       var safeExtraCellClass = typeof extraCellClass === "string" ? extraCellClass.trim() : "";
       return /*#__PURE__*/React__default.createElement("td", {
         key: column.key,
-        className: cn$1("px-6 py-4 whitespace-nowrap text-sm text-gray-900",
-        // append the cellClass string only if it's a string
-        safeExtraCellClass)
+        className: cn$1("px-6 py-4 whitespace-nowrap text-sm text-gray-900", safeExtraCellClass)
       }, renderCell(column, row, globalIndex));
     }), withAction && /*#__PURE__*/React__default.createElement("td", {
       className: "px-4 py-4 text-sm text-right",
@@ -4493,6 +4789,7 @@ var Table = function Table(_ref) {
       className: "h-4 w-4"
     }))), actionAnchor && actionAnchor.key === actionCellKey && /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement(ActionMenuPortal, {
       anchorElem: actionAnchor.elem,
+      anchorRow: actionAnchor.row,
       actions: actionsToUse,
       onClose: function onClose() {
         setOpenActionKey(null);
@@ -4511,62 +4808,71 @@ var Table = function Table(_ref) {
       row: row,
       index: globalIndex
     })))));
-  })))), pagination && /*#__PURE__*/React__default.createElement("div", {
-    className: "mt-4 flex items-center justify-between"
+  })))), isMobileView && /*#__PURE__*/React__default.createElement("div", {
+    className: "p-4"
+  }, loading ? /*#__PURE__*/React__default.createElement("div", {
+    className: "py-8 text-center"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col items-center gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "text-sm text-gray-500"
+  }, "Loading..."))) : paginatedData.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "py-8 text-center"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col items-center gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-gray-400"
+  }, /*#__PURE__*/React__default.createElement(List, {
+    className: "h-8 w-8"
+  })), /*#__PURE__*/React__default.createElement("span", {
+    className: "text-sm text-gray-500"
+  }, "No results found."))) : paginatedData.map(function (row, rowIndexInPage) {
+    return renderMobileCard(row, rowIndexInPage);
+  })), pagination && /*#__PURE__*/React__default.createElement("div", {
+    className: "p-4 border-t"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col sm:flex-row items-center justify-between gap-3"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-sm text-gray-700"
-  }, "Showing ", filteredData.length === 0 ? 0 : startIndex + 1, " to", " ", Math.min(endIndex, filteredData.length), " of ", filteredData.length, " ", "results"), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center gap-1"
-  }, showLimitSelector && /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default.createElement("label", {
-    htmlFor: "pagination-limit",
     className: "text-sm text-gray-600"
-  }, "Show"), /*#__PURE__*/React__default.createElement(Select, {
-    options: Array.isArray(limitOptions) && limitOptions.length > 0 ? limitOptions.map(function (opt) {
-      return {
-        label: String(opt),
-        value: opt
-      };
-    }) : [25, 50, 100].map(function (opt) {
-      return {
-        label: String(opt),
-        value: opt
-      };
-    }),
-    value: limit,
-    allowClear: false,
-    onChange: function onChange(e) {
-      return handleLimitChange(e);
-    },
-    className: "w-20"
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-1"
+  }, "Page ", currentPage, " of ", totalPages), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-2"
   }, /*#__PURE__*/React__default.createElement("button", {
-    className: "rounded-md border border-gray-300 px-3 py-1 text-sm disabled:opacity-50",
+    className: "rounded-lg md:rounded-md border border-gray-300 px-4 py-2 text-sm disabled:opacity-50 hover:bg-gray-50",
     disabled: currentPage === 1,
     onClick: function onClick() {
       return setCurrentPage(function (p) {
         return Math.max(1, p - 1);
       });
     }
-  }, "Previous"), Array.from({
-    length: totalPages
+  }, "Previous"), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-1"
+  }, Array.from({
+    length: Math.min(5, totalPages)
   }, function (_, i) {
-    return i + 1;
-  }).map(function (page) {
+    var pageNum;
+    if (totalPages <= 5) {
+      pageNum = i + 1;
+    } else if (currentPage <= 3) {
+      pageNum = i + 1;
+    } else if (currentPage >= totalPages - 2) {
+      pageNum = totalPages - 4 + i;
+    } else {
+      pageNum = currentPage - 2 + i;
+    }
     return /*#__PURE__*/React__default.createElement("button", {
-      key: page,
-      className: cn$1("rounded-md px-3 py-1 text-sm", {
-        "bg-primary-600 text-white": page === currentPage,
-        "border border-gray-300": page !== currentPage
+      key: pageNum,
+      className: cn$1("h-8 w-8 rounded-lg md:rounded-md text-sm", {
+        "bg-primary-600 text-white": pageNum === currentPage,
+        "border border-gray-300 hover:bg-gray-50": pageNum !== currentPage
       }),
       onClick: function onClick() {
-        return setCurrentPage(page);
+        return setCurrentPage(pageNum);
       }
-    }, page);
-  }), /*#__PURE__*/React__default.createElement("button", {
-    className: "rounded-md border border-gray-300 px-3 py-1 text-sm disabled:opacity-50",
+    }, pageNum);
+  })), /*#__PURE__*/React__default.createElement("button", {
+    className: "rounded-lg md:rounded-md border border-gray-300 px-4 py-2 text-sm disabled:opacity-50 hover:bg-gray-50",
     disabled: currentPage === totalPages,
     onClick: function onClick() {
       return setCurrentPage(function (p) {
@@ -4576,7 +4882,7 @@ var Table = function Table(_ref) {
   }, "Next")))));
 };
 
-/* ---------------- ActionMenuPortal (unchanged) ---------------- */
+/* ---------------- ActionMenuPortal (updated for mobile) ---------------- */
 function ActionMenuPortal(_ref4) {
   var anchorElem = _ref4.anchorElem,
     anchorRow = _ref4.anchorRow,
@@ -4585,10 +4891,10 @@ function ActionMenuPortal(_ref4) {
     _ref4.onClose;
     var onAction = _ref4.onAction,
     menuRef = _ref4.menuRef;
-  var _useState25 = useState(0),
-    _useState26 = _slicedToArray(_useState25, 2),
-    setTick = _useState26[1]; // force update for repositioning
-  var _useState27 = useState({
+  var _useState29 = useState(0),
+    _useState30 = _slicedToArray(_useState29, 2),
+    setTick = _useState30[1];
+  var _useState31 = useState({
       left: 0,
       top: 0,
       transformOrigin: "top right",
@@ -4596,9 +4902,9 @@ function ActionMenuPortal(_ref4) {
       width: 180,
       opacity: 0
     }),
-    _useState28 = _slicedToArray(_useState27, 2),
-    style = _useState28[0],
-    setStyle = _useState28[1];
+    _useState32 = _slicedToArray(_useState31, 2),
+    style = _useState32[0],
+    setStyle = _useState32[1];
   var menuWidth = 180;
   var maxMenuHeight = 320;
   var computePosition = function computePosition() {
@@ -4645,7 +4951,6 @@ function ActionMenuPortal(_ref4) {
       window.removeEventListener("resize", onScrollOrResize);
       window.removeEventListener("scroll", onScrollOrResize, true);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [anchorElem]);
   return /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement("div", {
     ref: menuRef,
@@ -4656,7 +4961,7 @@ function ActionMenuPortal(_ref4) {
       maxHeight: style.maxHeight,
       transformOrigin: style.transformOrigin
     },
-    className: "absolute z-50 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 overflow-y-auto transition-opacity duration-150 ease-out",
+    className: "absolute z-50 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-y-auto transition-opacity duration-150 ease-out",
     onClick: function onClick(e) {
       return e.stopPropagation();
     }
@@ -15241,7 +15546,7 @@ var Sidebar = function Sidebar(_ref2) {
       className: "flex-1 truncate"
     }, item.label), hasChildren && /*#__PURE__*/React__default.createElement("span", {
       className: "ml-2 flex-shrink-0"
-    }, isExpanded ? /*#__PURE__*/React__default.createElement(ChevronLeft, {
+    }, isExpanded ? /*#__PURE__*/React__default.createElement(ChevronDown, {
       className: "h-4 w-4"
     }) : /*#__PURE__*/React__default.createElement(ChevronRight, {
       className: "h-4 w-4"