@eztrak/shared 0.4.0 → 0.4.5

package/dist/index.d.mts

@@ -1,6 +1,6 @@
-export { HandleApiErrorOptions, RtkQueryError, capitalizeText, checkIfExistsInArray, cn, convertCommaDataToArray, currencyFormatter, deserializeJson, flattenTableData, formatDate, formatDateTime, formatValidationErrorsHtml, getApiError, getErrorMessages, getFieldsByCategory, getFieldsByInputType, getFieldsByName, handleApiError, isEmpty, normalizeApiListItems, parseCurrencyValueToNumber, removeByPropertyValues, toDateInputValue, toLowerCaseText, truncateText } from './utils/index.mjs';
+export { ConfirmationAlertOptions, HandleApiErrorOptions, RtkQueryError, capitalizeText, checkIfExistsInArray, cn, confirmationAlert, convertCommaDataToArray, currencyFormatter, deserializeJson, flattenTableData, formatDate, formatDateTime, formatValidationErrorsHtml, getApiError, getErrorMessages, getFieldsByCategory, getFieldsByInputType, getFieldsByName, handleApiError, isEmpty, normalizeApiListItems, parseCurrencyValueToNumber, removeByPropertyValues, toDateInputValue, toLowerCaseText, truncateText } from './utils/index.mjs';
 export { UseGridHeightOptions, useGridHeight, usePaginationUrlSync } from './hooks/index.mjs';
-export { EztrakTab, EztrakTabs, EztrakTabsClassNames, EztrakTabsProps } from './components/index.mjs';
+export { CustomPagination, CustomPaginationClassNames, CustomPaginationProps, EztrakTab, EztrakTabs, EztrakTabsClassNames, EztrakTabsProps, LayoutStatus, PaginationData, ResetColumnsButton, ResetColumnsButtonProps, TableLayoutToolbarControls, TableLayoutToolbarControlsProps } from './components/index.mjs';
 import 'clsx';
 import 'react-router-dom';
 import 'react';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-export { HandleApiErrorOptions, RtkQueryError, capitalizeText, checkIfExistsInArray, cn, convertCommaDataToArray, currencyFormatter, deserializeJson, flattenTableData, formatDate, formatDateTime, formatValidationErrorsHtml, getApiError, getErrorMessages, getFieldsByCategory, getFieldsByInputType, getFieldsByName, handleApiError, isEmpty, normalizeApiListItems, parseCurrencyValueToNumber, removeByPropertyValues, toDateInputValue, toLowerCaseText, truncateText } from './utils/index.js';
+export { ConfirmationAlertOptions, HandleApiErrorOptions, RtkQueryError, capitalizeText, checkIfExistsInArray, cn, confirmationAlert, convertCommaDataToArray, currencyFormatter, deserializeJson, flattenTableData, formatDate, formatDateTime, formatValidationErrorsHtml, getApiError, getErrorMessages, getFieldsByCategory, getFieldsByInputType, getFieldsByName, handleApiError, isEmpty, normalizeApiListItems, parseCurrencyValueToNumber, removeByPropertyValues, toDateInputValue, toLowerCaseText, truncateText } from './utils/index.js';
 export { UseGridHeightOptions, useGridHeight, usePaginationUrlSync } from './hooks/index.js';
-export { EztrakTab, EztrakTabs, EztrakTabsClassNames, EztrakTabsProps } from './components/index.js';
+export { CustomPagination, CustomPaginationClassNames, CustomPaginationProps, EztrakTab, EztrakTabs, EztrakTabsClassNames, EztrakTabsProps, LayoutStatus, PaginationData, ResetColumnsButton, ResetColumnsButtonProps, TableLayoutToolbarControls, TableLayoutToolbarControlsProps } from './components/index.js';
 import 'clsx';
 import 'react-router-dom';
 import 'react';

package/dist/index.js

@@ -30,10 +30,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  CustomPagination: () => CustomPagination,
   EztrakTabs: () => EztrakTabs,
+  ResetColumnsButton: () => ResetColumnsButton,
+  TableLayoutToolbarControls: () => TableLayoutToolbarControls,
   capitalizeText: () => capitalizeText,
   checkIfExistsInArray: () => checkIfExistsInArray,
   cn: () => cn,
+  confirmationAlert: () => confirmationAlert,
   convertCommaDataToArray: () => convertCommaDataToArray,
   currencyFormatter: () => currencyFormatter,
   deserializeJson: () => deserializeJson,
@@ -299,6 +303,21 @@ function handleApiError(error, { showAlert = false, fallbackMessage } = {}) {
   const message = fallbackMessage || data?.message || data?.title || error.error || "An error occurred. Please try again.";
   import_react_hot_toast.default.error(message);
 }
+function confirmationAlert(onConfirm, options = {}) {
+  void import_sweetalert2.default.fire({
+    title: options.title ?? "Are you sure?",
+    text: options.text,
+    icon: options.icon ?? "warning",
+    showCancelButton: true,
+    confirmButtonText: options.confirmButtonText ?? "Yes",
+    cancelButtonText: options.cancelButtonText ?? "Cancel",
+    confirmButtonColor: "#FF7335"
+  }).then((result) => {
+    if (result.isConfirmed) {
+      onConfirm();
+    }
+  });
+}
 
 // src/hooks/usePaginationUrlSync.ts
 var import_react = require("react");
@@ -463,86 +482,93 @@ function EztrakTabs({
     classNames?.wrapper,
     className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: wrapperClass, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "eztrak-tabs-container", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "eztrak-tabs-nav", "aria-label": "Tabs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "ul",
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: wrapperClass, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("eztrak-tabs-container", classNames?.container), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "nav",
       {
-        role: "tablist",
-        className: cn("eztrak-tabs-list", classNames?.list),
-        onKeyDown: handleListKeyDown,
-        children: tabs.map((tab) => {
-          const isActive = displayActive === tab.id;
-          const tabId = `${baseId}-tab-${tab.id}`;
-          const panelId = `${baseId}-panel-${tab.id}`;
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "li",
-            {
-              role: "presentation",
-              className: cn(
-                "eztrak-tabs-item",
-                isActive && "eztrak-tabs-item-active",
-                classNames?.item,
-                isActive && classNames?.itemActive
-              ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                "button",
+        className: cn("eztrak-tabs-nav", classNames?.nav),
+        "aria-label": "Tabs",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "ul",
+          {
+            role: "tablist",
+            className: cn("eztrak-tabs-list", classNames?.list),
+            onKeyDown: handleListKeyDown,
+            children: tabs.map((tab) => {
+              const isActive = displayActive === tab.id;
+              const tabId = `${baseId}-tab-${tab.id}`;
+              const panelId = `${baseId}-panel-${tab.id}`;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "li",
                 {
-                  ref: (el) => {
-                    if (el) {
-                      tabRefs.current.set(tab.id, el);
-                    } else {
-                      tabRefs.current.delete(tab.id);
-                    }
-                  },
-                  type: "button",
-                  role: "tab",
-                  id: tabId,
-                  "aria-selected": isActive,
-                  "aria-controls": showPanels ? panelId : void 0,
-                  tabIndex: isActive ? 0 : -1,
-                  disabled: tab.disabled,
+                  role: "presentation",
                   className: cn(
-                    "eztrak-tabs-button",
-                    isActive && "eztrak-tabs-button-active",
-                    classNames?.button,
-                    isActive && classNames?.buttonActive
+                    "eztrak-tabs-item",
+                    isActive && "eztrak-tabs-item-active",
+                    classNames?.item,
+                    isActive && classNames?.itemActive
                   ),
-                  onClick: () => handleTabClick(tab.id, tab.disabled),
-                  children: [
-                    tab.icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "span",
-                      {
-                        className: cn("eztrak-tabs-icon", classNames?.icon),
-                        "aria-hidden": true,
-                        children: tab.icon
-                      }
-                    ) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "span",
-                      {
-                        className: cn("eztrak-tabs-label", classNames?.label),
-                        children: tab.label
-                      }
-                    ),
-                    isActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "span",
-                      {
-                        className: cn(
-                          "eztrak-tabs-underline",
-                          classNames?.underline
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "button",
+                    {
+                      ref: (el) => {
+                        if (el) {
+                          tabRefs.current.set(tab.id, el);
+                        } else {
+                          tabRefs.current.delete(tab.id);
+                        }
+                      },
+                      type: "button",
+                      role: "tab",
+                      id: tabId,
+                      "aria-selected": isActive,
+                      "aria-controls": showPanels ? panelId : void 0,
+                      tabIndex: isActive ? 0 : -1,
+                      disabled: tab.disabled,
+                      className: cn(
+                        "eztrak-tabs-button",
+                        isActive && "eztrak-tabs-button-active",
+                        classNames?.button,
+                        isActive && classNames?.buttonActive
+                      ),
+                      onClick: () => handleTabClick(tab.id, tab.disabled),
+                      children: [
+                        tab.icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "span",
+                          {
+                            className: cn("eztrak-tabs-icon", classNames?.icon),
+                            "aria-hidden": true,
+                            children: tab.icon
+                          }
+                        ) : null,
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "span",
+                          {
+                            className: cn("eztrak-tabs-label", classNames?.label),
+                            children: tab.label
+                          }
                         ),
-                        "aria-hidden": true
-                      }
-                    ) : null
-                  ]
-                }
-              )
-            },
-            tab.id
-          );
-        })
+                        isActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "span",
+                          {
+                            className: cn(
+                              "eztrak-tabs-underline",
+                              classNames?.underline
+                            ),
+                            "aria-hidden": true
+                          }
+                        ) : null
+                      ]
+                    }
+                  )
+                },
+                tab.id
+              );
+            })
+          }
+        )
       }
-    ) }),
+    ),
     showPanels ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("eztrak-tabs-content", classNames?.content), children: tabs.map((tab) => {
       const isActive = displayActive === tab.id;
       const panelId = `${baseId}-panel-${tab.id}`;
@@ -565,12 +591,332 @@ function EztrakTabs({
     }) }) : null
   ] }) });
 }
+
+// src/components/pagination/CustomPagination.tsx
+var import_react_router_dom = require("react-router-dom");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 30, 50, 100];
+function padCount(num) {
+  return num.toString().padStart(2, "0");
+}
+function RefreshIcon({
+  size = 14,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 3v5h-5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M8 16H3v5" })
+      ]
+    }
+  );
+}
+function ResetColumnsButton({
+  onReset,
+  disabled = false,
+  isLoading = false
+}) {
+  const handleClick = () => {
+    confirmationAlert(onReset, {
+      text: "Reset column order, widths, and visibility to defaults?",
+      icon: "warning",
+      title: "Reset column layout to default"
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled: disabled || isLoading,
+      title: "Reset column layout to default",
+      className: "inline-flex items-center gap-1.5 rounded-xl border border-primary-150 bg-white px-3 py-1.5 text-sm font-medium text-primary-150 hover:bg-gray-50 focus:outline-none disabled:hover:bg-white",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RefreshIcon, { size: 14, className: cn(isLoading ? "animate-spin" : "") }),
+        "Reset columns"
+      ]
+    }
+  );
+}
+function TableLayoutToolbarControls({
+  layoutStatus = {},
+  onResetLayout,
+  renderResetControl,
+  isLoading = false
+}) {
+  const { isLayoutLoading, isLayoutSaving, isLayoutResetting } = layoutStatus;
+  const isLayoutBusy = isLayoutLoading || isLayoutSaving || isLayoutResetting;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center gap-3", children: onResetLayout && (renderResetControl ? renderResetControl(onResetLayout) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    ResetColumnsButton,
+    {
+      onReset: onResetLayout,
+      disabled: isLayoutBusy,
+      isLoading
+    }
+  )) });
+}
+function CustomPagination({
+  paginationData,
+  paginationPageSize,
+  pageSizeOptions: pageSizeOptionsProp,
+  isLoading = false,
+  paramNames,
+  onPageChange,
+  onPageSizeChange,
+  onResetLayout,
+  renderResetControl,
+  layoutStatus,
+  classNames,
+  className
+}) {
+  const [searchParams, setSearchParams] = (0, import_react_router_dom.useSearchParams)();
+  const pageKey = paramNames?.page ?? "page";
+  const perPageKey = paramNames?.perPage ?? "perPage";
+  const pageSizeOptions = pageSizeOptionsProp ?? paginationPageSize ?? DEFAULT_PAGE_SIZE_OPTIONS;
+  const currentPage = paginationData ? Math.max(0, paginationData.currentPage - 1) : 0;
+  const handlePageChange = (pageNumber) => {
+    if (!paginationData || pageNumber < 0 || pageNumber >= paginationData.pageCount) {
+      return;
+    }
+    const safePage = Math.max(
+      1,
+      Math.min(pageNumber + 1, paginationData.pageCount)
+    );
+    const newParams = new URLSearchParams(searchParams);
+    newParams.set(pageKey, String(safePage));
+    setSearchParams(newParams, { replace: true });
+    onPageChange?.(safePage);
+  };
+  const handlePageSizeChange = (event) => {
+    const parsed = parseInt(event.target.value, 10);
+    if (!Number.isFinite(parsed) || parsed < 1) {
+      return;
+    }
+    const newParams = new URLSearchParams(searchParams);
+    newParams.set(pageKey, "1");
+    newParams.set(perPageKey, String(parsed));
+    setSearchParams(newParams, { replace: true });
+    onPageSizeChange?.(parsed);
+  };
+  const createPageButtons = () => {
+    const buttons = [];
+    const maxButtons = 5;
+    const totalPages = Math.max(1, paginationData?.pageCount ?? 1);
+    let startPage = Math.max(0, currentPage - Math.floor(maxButtons / 2));
+    let endPage = Math.min(totalPages - 1, startPage + maxButtons - 1);
+    if (endPage - startPage + 1 < maxButtons) {
+      startPage = Math.max(0, endPage - maxButtons + 1);
+    }
+    if (startPage > 0) {
+      buttons.push(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handlePageChange(0),
+            "aria-label": "Page 1",
+            className: cn(
+              "px-3 py-2 text-sm text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors",
+              classNames?.pageButton
+            ),
+            children: "1"
+          },
+          "1"
+        )
+      );
+      if (startPage > 1) {
+        buttons.push(
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "px-2 py-2 text-gray-400",
+              children: "..."
+            },
+            "ellipsis1"
+          )
+        );
+      }
+    }
+    for (let i = startPage; i <= endPage; i++) {
+      const isActive = currentPage === i;
+      buttons.push(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handlePageChange(i),
+            "aria-label": `Page ${i + 1}`,
+            "aria-current": isActive ? "page" : void 0,
+            className: cn(
+              "px-3 py-2 text-sm rounded-md transition-colors",
+              isActive ? cn("bg-gray-400 text-white", classNames?.activePageButton) : cn(
+                "text-gray-600 hover:text-gray-600 hover:bg-gray-50",
+                classNames?.pageButton
+              )
+            ),
+            children: i + 1
+          },
+          i + 1
+        )
+      );
+    }
+    if (endPage < totalPages - 1) {
+      if (endPage < totalPages - 2) {
+        buttons.push(
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "px-2 py-2 text-gray-400",
+              children: "..."
+            },
+            "ellipsis2"
+          )
+        );
+      }
+      buttons.push(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handlePageChange(totalPages - 1),
+            "aria-label": `Page ${totalPages}`,
+            className: cn(
+              "px-3 py-2 text-sm text-gray-600 hover:text-gray-600 hover:bg-gray-50 rounded-md transition-colors",
+              classNames?.pageButton
+            ),
+            children: totalPages
+          },
+          totalPages
+        )
+      );
+    }
+    return buttons;
+  };
+  if (isLoading || !paginationData) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center justify-center p-6 bg-gray-50", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-gray-500", children: isLoading ? "Loading..." : "No pagination data" }) });
+  }
+  const effectiveSizeOptions = pageSizeOptions.includes(paginationData.perPage) ? pageSizeOptions : [...pageSizeOptions, paginationData.perPage].sort((a, b) => a - b);
+  const startItem = paginationData.totalCount === 0 ? 0 : (paginationData.currentPage - 1) * paginationData.perPage + 1;
+  const endItem = Math.min(
+    startItem + paginationData.perPage - 1,
+    paginationData.totalCount
+  );
+  const { isLayoutLoading, isLayoutSaving, isLayoutResetting } = layoutStatus ?? {};
+  const isLayoutBusy = isLayoutLoading || isLayoutSaving || isLayoutResetting;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between pb-4",
+        className,
+        classNames?.root
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("flex-1", classNames?.info), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-xs font-medium text-neutral-400", children: [
+          "Showing ",
+          padCount(startItem),
+          " - ",
+          padCount(endItem),
+          " of",
+          " ",
+          paginationData.totalCount ?? 0,
+          " results"
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "nav",
+          {
+            "aria-label": "Pagination",
+            className: cn("flex items-center space-x-1", classNames?.nav),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handlePageChange(currentPage - 1),
+                  disabled: currentPage === 0,
+                  className: "p-2 text-gray-400 hover:text-gray-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors",
+                  "aria-label": "Previous page",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10.7 2.3a1 1 0 0 1 0 1.4L6.4 8l4.3 4.3a1 1 0 1 1-1.4 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.4 0z" }) })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center space-x-1", children: createPageButtons() }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handlePageChange(currentPage + 1),
+                  disabled: currentPage >= paginationData.pageCount - 1,
+                  className: "p-2 text-gray-400 hover:text-gray-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors",
+                  "aria-label": "Next page",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5.3 13.7a1 1 0 0 1 0-1.4L9.6 8 5.3 3.7a1 1 0 0 1 1.4-1.4l5 5a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4 0z" }) })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-3", children: [
+          onResetLayout && (renderResetControl ? renderResetControl(onResetLayout) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            ResetColumnsButton,
+            {
+              onReset: onResetLayout,
+              disabled: isLayoutBusy,
+              isLoading
+            }
+          )),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "label",
+              {
+                htmlFor: "pagination-per-page",
+                className: "text-sm text-gray-600",
+                children: "Items per page"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "select",
+              {
+                id: "pagination-per-page",
+                value: paginationData.perPage || 10,
+                onChange: handlePageSizeChange,
+                className: cn(
+                  "px-3 py-1.5 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors",
+                  classNames?.select
+                ),
+                children: effectiveSizeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: option, children: option }, option))
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CustomPagination,
   EztrakTabs,
+  ResetColumnsButton,
+  TableLayoutToolbarControls,
   capitalizeText,
   checkIfExistsInArray,
   cn,
+  confirmationAlert,
   convertCommaDataToArray,
   currencyFormatter,
   deserializeJson,