@expcat/tigercat-react 0.0.1

package/dist/chunk-R5BQHZWB.js

@@ -0,0 +1,698 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Table.tsx
+var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
+var SortIcon = ({ direction }) => {
+  if (direction === "asc") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        className: tigercatCore.getSortIconClasses(true),
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 3l4 4H4l4-4z" })
+      }
+    );
+  }
+  if (direction === "desc") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        className: tigercatCore.getSortIconClasses(true),
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 13l-4-4h8l-4 4z" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: tigercatCore.getSortIconClasses(false),
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "currentColor",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 3l4 4H4l4-4zM8 13l-4-4h8l-4 4z" })
+    }
+  );
+};
+var LockIcon = ({ locked }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: locked ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 8h-1V6a4 4 0 10-8 0v2H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V10a2 2 0 00-2-2zm-7-2a2 2 0 114 0v2h-4V6z" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 8h-1V6a4 4 0 00-7.75-1.41 1 1 0 101.9.62A2 2 0 0114 6v2H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V10a2 2 0 00-2-2zm0 12H7V10h10v10z" }) });
+};
+var LoadingSpinner = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className: tigercatCore.getLoadingOverlaySpinnerClasses(),
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: spinnerSvg.viewBox,
+    children: spinnerSvg.elements.map((el, index) => {
+      if (el.type === "circle") return /* @__PURE__ */ jsxRuntime.jsx("circle", { ...el.attrs }, index);
+      if (el.type === "path") return /* @__PURE__ */ jsxRuntime.jsx("path", { ...el.attrs }, index);
+      return null;
+    })
+  }
+);
+function Table({
+  columns,
+  columnLockable = false,
+  dataSource = [],
+  sort,
+  defaultSort,
+  filters,
+  defaultFilters,
+  size = "md",
+  bordered = false,
+  striped = false,
+  hoverable = true,
+  loading = false,
+  emptyText = "No data",
+  pagination = {
+    current: 1,
+    pageSize: 10,
+    total: 0,
+    pageSizeOptions: [10, 20, 50, 100],
+    showSizeChanger: true,
+    showTotal: true
+  },
+  rowSelection,
+  rowKey = "id",
+  rowClassName,
+  stickyHeader = false,
+  maxHeight,
+  onChange,
+  onRowClick,
+  onSelectionChange,
+  onSortChange,
+  onFilterChange,
+  onPageChange,
+  className,
+  ...props
+}) {
+  const isSortControlled = sort !== void 0;
+  const isFiltersControlled = filters !== void 0;
+  const paginationConfig = pagination !== false && typeof pagination === "object" ? pagination : null;
+  const isCurrentPageControlled = paginationConfig?.current !== void 0;
+  const isPageSizeControlled = paginationConfig?.pageSize !== void 0;
+  const isSelectionControlled = rowSelection?.selectedRowKeys !== void 0 && Array.isArray(rowSelection.selectedRowKeys);
+  const [uncontrolledSortState, setUncontrolledSortState] = react.useState(
+    defaultSort ?? { key: null, direction: null }
+  );
+  const [uncontrolledFilterState, setUncontrolledFilterState] = react.useState(
+    defaultFilters ?? {}
+  );
+  const [uncontrolledCurrentPage, setUncontrolledCurrentPage] = react.useState(
+    () => paginationConfig?.defaultCurrent ?? paginationConfig?.current ?? 1
+  );
+  const [uncontrolledCurrentPageSize, setUncontrolledCurrentPageSize] = react.useState(
+    () => paginationConfig?.defaultPageSize ?? paginationConfig?.pageSize ?? 10
+  );
+  const [uncontrolledSelectedRowKeys, setUncontrolledSelectedRowKeys] = react.useState(rowSelection?.defaultSelectedRowKeys ?? rowSelection?.selectedRowKeys ?? []);
+  const sortState = isSortControlled ? sort : uncontrolledSortState;
+  const filterState = isFiltersControlled ? filters : uncontrolledFilterState;
+  const currentPage = isCurrentPageControlled ? paginationConfig.current : uncontrolledCurrentPage;
+  const currentPageSize = isPageSizeControlled ? paginationConfig.pageSize : uncontrolledCurrentPageSize;
+  const selectedRowKeys = isSelectionControlled ? rowSelection.selectedRowKeys : uncontrolledSelectedRowKeys;
+  react.useEffect(() => {
+    if (isSortControlled && sort) {
+      setUncontrolledSortState(sort);
+    }
+  }, [isSortControlled, sort?.key, sort?.direction]);
+  react.useEffect(() => {
+    if (isFiltersControlled && filters) {
+      setUncontrolledFilterState(filters);
+    }
+  }, [isFiltersControlled, filters]);
+  react.useEffect(() => {
+    if (isCurrentPageControlled) {
+      setUncontrolledCurrentPage(paginationConfig.current);
+    }
+  }, [isCurrentPageControlled, paginationConfig?.current]);
+  react.useEffect(() => {
+    if (isPageSizeControlled) {
+      setUncontrolledCurrentPageSize(paginationConfig.pageSize);
+    }
+  }, [isPageSizeControlled, paginationConfig?.pageSize]);
+  react.useEffect(() => {
+    if (isSelectionControlled) {
+      setUncontrolledSelectedRowKeys(rowSelection?.selectedRowKeys ?? []);
+    }
+  }, [isSelectionControlled, rowSelection?.selectedRowKeys]);
+  const [fixedOverrides, setFixedOverrides] = react.useState({});
+  const displayColumns = react.useMemo(() => {
+    return columns.map((column) => {
+      const hasOverride = Object.prototype.hasOwnProperty.call(fixedOverrides, column.key);
+      return {
+        ...column,
+        fixed: hasOverride ? fixedOverrides[column.key] : column.fixed
+      };
+    });
+  }, [columns, fixedOverrides]);
+  const columnByKey = react.useMemo(() => {
+    const map = {};
+    for (const column of displayColumns) {
+      map[column.key] = column;
+    }
+    return map;
+  }, [displayColumns]);
+  const fixedColumnsInfo = react.useMemo(() => {
+    return tigercatCore.getFixedColumnOffsets(displayColumns);
+  }, [displayColumns]);
+  const toggleColumnLock = react.useCallback(
+    (columnKey) => {
+      setFixedOverrides((prev) => {
+        const original = columns.find((c) => c.key === columnKey)?.fixed;
+        const current = Object.prototype.hasOwnProperty.call(prev, columnKey) ? prev[columnKey] : original;
+        const isLocked = current === "left" || current === "right";
+        return {
+          ...prev,
+          [columnKey]: isLocked ? false : "left"
+        };
+      });
+    },
+    [columns]
+  );
+  const processedData = react.useMemo(() => {
+    let data = dataSource;
+    data = tigercatCore.filterData(data, filterState);
+    if (sortState.key && sortState.direction) {
+      const column = columnByKey[sortState.key];
+      data = tigercatCore.sortData(data, sortState.key, sortState.direction, column?.sortFn);
+    }
+    return data;
+  }, [dataSource, filterState, sortState, columnByKey]);
+  const paginatedData = react.useMemo(() => {
+    if (pagination === false) {
+      return processedData;
+    }
+    return tigercatCore.paginateData(processedData, currentPage, currentPageSize);
+  }, [processedData, currentPage, currentPageSize, pagination]);
+  const pageRowKeys = react.useMemo(
+    () => paginatedData.map((record, index) => tigercatCore.getRowKey(record, rowKey, index)),
+    [paginatedData, rowKey]
+  );
+  const selectedRowKeySet = react.useMemo(
+    () => new Set(selectedRowKeys),
+    [selectedRowKeys]
+  );
+  const paginationInfo = react.useMemo(() => {
+    if (pagination === false) {
+      return null;
+    }
+    const total = processedData.length;
+    return tigercatCore.calculatePagination(total, currentPage, currentPageSize);
+  }, [processedData.length, currentPage, currentPageSize, pagination]);
+  const handleSort = react.useCallback(
+    (columnKey) => {
+      const column = columnByKey[columnKey];
+      if (!column || !column.sortable) {
+        return;
+      }
+      let newDirection = "asc";
+      if (sortState.key === columnKey) {
+        if (sortState.direction === "asc") {
+          newDirection = "desc";
+        } else if (sortState.direction === "desc") {
+          newDirection = null;
+        }
+      }
+      const newSortState = {
+        key: newDirection ? columnKey : null,
+        direction: newDirection
+      };
+      if (!isSortControlled) {
+        setUncontrolledSortState(newSortState);
+      }
+      onSortChange?.(newSortState);
+      onChange?.({
+        sort: newSortState,
+        filters: filterState,
+        pagination: pagination !== false ? {
+          current: currentPage,
+          pageSize: currentPageSize
+        } : null
+      });
+    },
+    [
+      columnByKey,
+      sortState,
+      filterState,
+      currentPage,
+      currentPageSize,
+      pagination,
+      isSortControlled,
+      onSortChange,
+      onChange
+    ]
+  );
+  const handleFilter = react.useCallback(
+    (columnKey, value) => {
+      const newFilterState = {
+        ...filterState,
+        [columnKey]: value
+      };
+      if (!isFiltersControlled) {
+        setUncontrolledFilterState(newFilterState);
+      }
+      setUncontrolledCurrentPage(1);
+      onFilterChange?.(newFilterState);
+      onChange?.({
+        sort: sortState,
+        filters: newFilterState,
+        pagination: pagination !== false ? {
+          current: 1,
+          pageSize: currentPageSize
+        } : null
+      });
+    },
+    [
+      filterState,
+      sortState,
+      currentPageSize,
+      pagination,
+      isFiltersControlled,
+      onFilterChange,
+      onChange
+    ]
+  );
+  const handlePageChange = react.useCallback(
+    (page) => {
+      if (!isCurrentPageControlled) {
+        setUncontrolledCurrentPage(page);
+      } else {
+        setUncontrolledCurrentPage(page);
+      }
+      onPageChange?.({ current: page, pageSize: currentPageSize });
+      onChange?.({
+        sort: sortState,
+        filters: filterState,
+        pagination: {
+          current: page,
+          pageSize: currentPageSize
+        }
+      });
+    },
+    [currentPageSize, sortState, filterState, isCurrentPageControlled, onPageChange, onChange]
+  );
+  const handlePageSizeChange = react.useCallback(
+    (pageSize) => {
+      if (!isPageSizeControlled) {
+        setUncontrolledCurrentPageSize(pageSize);
+      } else {
+        setUncontrolledCurrentPageSize(pageSize);
+      }
+      if (!isCurrentPageControlled) {
+        setUncontrolledCurrentPage(1);
+      } else {
+        setUncontrolledCurrentPage(1);
+      }
+      onPageChange?.({ current: 1, pageSize });
+      onChange?.({
+        sort: sortState,
+        filters: filterState,
+        pagination: {
+          current: 1,
+          pageSize
+        }
+      });
+    },
+    [sortState, filterState, isPageSizeControlled, isCurrentPageControlled, onPageChange, onChange]
+  );
+  const handleRowClick = react.useCallback(
+    (record, index) => {
+      onRowClick?.(record, index);
+    },
+    [onRowClick]
+  );
+  const handleSelectRow = react.useCallback(
+    (key, checked) => {
+      let newKeys;
+      if (rowSelection?.type === "radio") {
+        newKeys = checked ? [key] : [];
+      } else {
+        if (checked) {
+          newKeys = [...selectedRowKeys, key];
+        } else {
+          newKeys = selectedRowKeys.filter((k) => k !== key);
+        }
+      }
+      if (!isSelectionControlled) {
+        setUncontrolledSelectedRowKeys(newKeys);
+      }
+      onSelectionChange?.(newKeys);
+    },
+    [rowSelection, selectedRowKeys, isSelectionControlled, onSelectionChange]
+  );
+  const handleSelectAll = react.useCallback(
+    (checked) => {
+      if (checked) {
+        const newKeys = pageRowKeys;
+        if (!isSelectionControlled) {
+          setUncontrolledSelectedRowKeys(newKeys);
+        }
+        onSelectionChange?.(newKeys);
+      } else {
+        if (!isSelectionControlled) {
+          setUncontrolledSelectedRowKeys([]);
+        }
+        onSelectionChange?.([]);
+      }
+    },
+    [pageRowKeys, isSelectionControlled, onSelectionChange]
+  );
+  const allSelected = react.useMemo(() => {
+    if (pageRowKeys.length === 0) {
+      return false;
+    }
+    return pageRowKeys.every((key) => selectedRowKeySet.has(key));
+  }, [pageRowKeys, selectedRowKeySet]);
+  const someSelected = react.useMemo(() => {
+    return selectedRowKeys.length > 0 && !allSelected;
+  }, [selectedRowKeys.length, allSelected]);
+  const renderTableHeader = react.useCallback(() => {
+    return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: tigercatCore.getTableHeaderClasses(stickyHeader), children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+      rowSelection && rowSelection.showCheckbox !== false && rowSelection.type !== "radio" && /* @__PURE__ */ jsxRuntime.jsx("th", { className: tigercatCore.getCheckboxCellClasses(size), children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          className: "rounded border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]",
+          checked: allSelected,
+          ref: (el) => {
+            if (el) el.indeterminate = someSelected;
+          },
+          onChange: (e) => handleSelectAll(e.target.checked)
+        }
+      ) }),
+      displayColumns.map((column) => {
+        const isSorted = sortState.key === column.key;
+        const sortDirection = isSorted ? sortState.direction : null;
+        const ariaSort = column.sortable ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0;
+        const isFixedLeft = column.fixed === "left";
+        const isFixedRight = column.fixed === "right";
+        const fixedStyle = isFixedLeft ? {
+          position: "sticky",
+          left: `${fixedColumnsInfo.leftOffsets[column.key] || 0}px`,
+          zIndex: 15
+        } : isFixedRight ? {
+          position: "sticky",
+          right: `${fixedColumnsInfo.rightOffsets[column.key] || 0}px`,
+          zIndex: 15
+        } : void 0;
+        const widthStyle = column.width ? {
+          width: typeof column.width === "number" ? `${column.width}px` : column.width
+        } : void 0;
+        const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "th",
+          {
+            "aria-sort": ariaSort,
+            className: tigercatCore.classNames(
+              tigercatCore.getTableHeaderCellClasses(
+                size,
+                column.align || "left",
+                !!column.sortable,
+                column.headerClassName
+              ),
+              (isFixedLeft || isFixedRight) && "bg-gray-50"
+            ),
+            style,
+            onClick: column.sortable ? () => handleSort(column.key) : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                column.renderHeader ? column.renderHeader() : column.title,
+                columnLockable && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": column.fixed === "left" || column.fixed === "right" ? `Unlock column ${column.title}` : `Lock column ${column.title}`,
+                    className: tigercatCore.classNames(
+                      "inline-flex items-center",
+                      column.fixed === "left" || column.fixed === "right" ? "text-[var(--tiger-primary,#2563eb)]" : "text-gray-400 hover:text-gray-700"
+                    ),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      toggleColumnLock(column.key);
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(LockIcon, { locked: column.fixed === "left" || column.fixed === "right" })
+                  }
+                ),
+                column.sortable && /* @__PURE__ */ jsxRuntime.jsx(SortIcon, { direction: sortDirection })
+              ] }),
+              column.filter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: column.filter.type === "select" && column.filter.options ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "select",
+                {
+                  className: "w-full px-2 py-1 text-sm border border-gray-300 rounded",
+                  onChange: (e) => handleFilter(column.key, e.target.value),
+                  onClick: (e) => e.stopPropagation(),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "All" }),
+                    column.filter.options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
+                  ]
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  className: "w-full px-2 py-1 text-sm border border-gray-300 rounded",
+                  placeholder: column.filter.placeholder || "Filter...",
+                  onInput: (e) => handleFilter(column.key, e.target.value),
+                  onClick: (e) => e.stopPropagation()
+                }
+              ) })
+            ]
+          },
+          column.key
+        );
+      })
+    ] }) });
+  }, [
+    displayColumns,
+    size,
+    stickyHeader,
+    sortState,
+    rowSelection,
+    allSelected,
+    someSelected,
+    handleSort,
+    handleFilter,
+    handleSelectAll,
+    columnLockable,
+    toggleColumnLock,
+    fixedColumnsInfo
+  ]);
+  const renderTableBody = react.useCallback(() => {
+    if (loading) {
+      return null;
+    }
+    if (paginatedData.length === 0) {
+      return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        "td",
+        {
+          colSpan: displayColumns.length + (rowSelection ? 1 : 0),
+          className: tigercatCore.tableEmptyStateClasses,
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", children: emptyText })
+        }
+      ) }) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: paginatedData.map((record, index) => {
+      const key = pageRowKeys[index];
+      const isSelected = selectedRowKeySet.has(key);
+      const rowClass = typeof rowClassName === "function" ? rowClassName(record, index) : rowClassName;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "tr",
+        {
+          className: tigercatCore.classNames(
+            tigercatCore.getTableRowClasses(hoverable, striped, index % 2 === 0, rowClass),
+            fixedColumnsInfo.hasFixedColumns && "group"
+          ),
+          onClick: () => handleRowClick(record, index),
+          children: [
+            rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsxRuntime.jsx("td", { className: tigercatCore.getCheckboxCellClasses(size), children: /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: rowSelection?.type === "radio" ? "radio" : "checkbox",
+                className: rowSelection?.type === "radio" ? "border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]" : "rounded border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]",
+                checked: isSelected,
+                disabled: rowSelection?.getCheckboxProps?.(record)?.disabled,
+                onChange: (e) => handleSelectRow(key, e.target.checked),
+                onClick: (e) => e.stopPropagation()
+              }
+            ) }),
+            displayColumns.map((column) => {
+              const dataKey = column.dataKey || column.key;
+              const cellValue = record[dataKey];
+              const isFixedLeft = column.fixed === "left";
+              const isFixedRight = column.fixed === "right";
+              const fixedStyle = isFixedLeft ? {
+                position: "sticky",
+                left: `${fixedColumnsInfo.leftOffsets[column.key] || 0}px`,
+                zIndex: 10
+              } : isFixedRight ? {
+                position: "sticky",
+                right: `${fixedColumnsInfo.rightOffsets[column.key] || 0}px`,
+                zIndex: 10
+              } : void 0;
+              const widthStyle = column.width ? {
+                width: typeof column.width === "number" ? `${column.width}px` : column.width
+              } : void 0;
+              const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
+              const stickyBgClass = striped && index % 2 === 0 ? "bg-gray-50/50" : "bg-white";
+              const stickyCellClass = isFixedLeft || isFixedRight ? tigercatCore.classNames(stickyBgClass, hoverable && "group-hover:bg-gray-50") : void 0;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "td",
+                {
+                  className: tigercatCore.classNames(
+                    tigercatCore.getTableCellClasses(size, column.align || "left", column.className),
+                    stickyCellClass
+                  ),
+                  style,
+                  children: column.render ? column.render(record, index) : cellValue
+                },
+                column.key
+              );
+            })
+          ]
+        },
+        key
+      );
+    }) });
+  }, [
+    loading,
+    paginatedData,
+    displayColumns,
+    rowSelection,
+    emptyText,
+    pageRowKeys,
+    selectedRowKeySet,
+    rowClassName,
+    hoverable,
+    striped,
+    size,
+    handleRowClick,
+    handleSelectRow,
+    fixedColumnsInfo
+  ]);
+  const renderPagination = react.useCallback(() => {
+    if (pagination === false || !paginationInfo) {
+      return null;
+    }
+    const { totalPages, startIndex, endIndex, hasNext, hasPrev } = paginationInfo;
+    const total = processedData.length;
+    const paginationConfig2 = pagination;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.tablePaginationContainerClasses, children: [
+      paginationConfig2.showTotal !== false && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-700", children: paginationConfig2.totalText ? paginationConfig2.totalText(total, [startIndex, endIndex]) : `Showing ${startIndex} to ${endIndex} of ${total} results` }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        paginationConfig2.showSizeChanger !== false && /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            className: "px-3 py-1 border border-gray-300 rounded text-sm",
+            value: currentPageSize,
+            onChange: (e) => handlePageSizeChange(Number(e.target.value)),
+            children: (paginationConfig2.pageSizeOptions || [10, 20, 50, 100]).map((size2) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: size2, children: [
+              size2,
+              " / page"
+            ] }, size2))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: tigercatCore.classNames(
+                "px-3 py-1 border border-gray-300 rounded text-sm",
+                hasPrev ? "hover:bg-gray-50 text-gray-700" : "text-gray-400 cursor-not-allowed"
+              ),
+              disabled: !hasPrev,
+              onClick: () => handlePageChange(currentPage - 1),
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-3 py-1 text-sm text-gray-700", children: [
+            "Page ",
+            currentPage,
+            " of ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: tigercatCore.classNames(
+                "px-3 py-1 border border-gray-300 rounded text-sm",
+                hasNext ? "hover:bg-gray-50 text-gray-700" : "text-gray-400 cursor-not-allowed"
+              ),
+              disabled: !hasNext,
+              onClick: () => handlePageChange(currentPage + 1),
+              children: "Next"
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }, [
+    pagination,
+    paginationInfo,
+    processedData.length,
+    currentPage,
+    currentPageSize,
+    handlePageChange,
+    handlePageSizeChange
+  ]);
+  const wrapperStyle = react.useMemo(
+    () => maxHeight ? {
+      maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
+    } : void 0,
+    [maxHeight]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.classNames("relative", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: tigercatCore.getTableWrapperClasses(bordered, maxHeight),
+        style: wrapperStyle,
+        "aria-busy": loading,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "table",
+            {
+              className: tigercatCore.tableBaseClasses,
+              ...props,
+              style: fixedColumnsInfo.hasFixedColumns && fixedColumnsInfo.minTableWidth ? {
+                ...props.style,
+                minWidth: `${fixedColumnsInfo.minTableWidth}px`
+              } : props.style,
+              children: [
+                renderTableHeader(),
+                renderTableBody()
+              ]
+            }
+          ),
+          loading && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: tigercatCore.tableLoadingOverlayClasses,
+              role: "status",
+              "aria-live": "polite",
+              "aria-label": "Loading",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading" })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    renderPagination()
+  ] });
+}
+
+exports.Table = Table;