@ryanhe919/lumen-ui 0.2.1 → 0.3.0

package/dist/LMTable-j1ZzAzXB.cjs

@@ -0,0 +1,593 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const componentSizes = require("./componentSizes-DUTZ7uEM.cjs");
+const CaretUpIcon = ({ active }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className: "w-2.5 h-2.5",
+    viewBox: "0 0 10 6",
+    fill: "none",
+    style: { color: active ? "var(--lm-primary-500)" : "var(--lm-gray-400)" },
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 0L10 6H0L5 0Z", fill: "currentColor" })
+  }
+);
+const CaretDownIcon = ({ active }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className: "w-2.5 h-2.5",
+    viewBox: "0 0 10 6",
+    fill: "none",
+    style: { color: active ? "var(--lm-primary-500)" : "var(--lm-gray-400)" },
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 6L0 0H10L5 6Z", fill: "currentColor" })
+  }
+);
+const ChevronLeftIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) });
+const ChevronRightIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
+const SpinnerIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-4 h-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "circle",
+    {
+      className: "opacity-25",
+      cx: "12",
+      cy: "12",
+      r: "10",
+      stroke: "currentColor",
+      strokeWidth: "4"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      className: "opacity-75",
+      fill: "currentColor",
+      d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    }
+  )
+] });
+const LMTable = ({
+  dataSource,
+  columns,
+  rowKey = "id",
+  pagination,
+  loadMore,
+  loading = false,
+  emptyText = "No data",
+  size = "md",
+  bordered = false,
+  striped = false,
+  selectable = false,
+  selectedRowKeys = [],
+  onSelectionChange,
+  onRowClick,
+  onSortChange,
+  className = "",
+  fullHeight = false,
+  variant = "default"
+}) => {
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [pageSize, setPageSize] = React.useState(10);
+  const [sortField, setSortField] = React.useState("");
+  const [sortOrder, setSortOrder] = React.useState("ascend");
+  const containerRef = React.useRef(null);
+  const getRowKey = React.useCallback(
+    (record, index) => {
+      if (typeof rowKey === "function") {
+        return rowKey(record, index);
+      }
+      const key = record[rowKey];
+      return (typeof key === "string" ? key : String(key)) || index.toString();
+    },
+    [rowKey]
+  );
+  const getValueByDataIndex = React.useCallback((record, dataIndex) => {
+    const parts = String(dataIndex).split(".");
+    let current = record;
+    for (const p of parts) {
+      if (current == null || typeof current !== "object" || !(p in current)) {
+        return "";
+      }
+      current = current[p];
+    }
+    return current;
+  }, []);
+  const handleSort = React.useCallback(
+    (column) => {
+      if (!column.sorter) return;
+      let newSortOrder = "ascend";
+      if (sortField === column.dataIndex) {
+        newSortOrder = sortOrder === "ascend" ? "descend" : "ascend";
+      }
+      setSortField(column.dataIndex);
+      setSortOrder(newSortOrder);
+      onSortChange == null ? void 0 : onSortChange(column.dataIndex, newSortOrder);
+    },
+    [sortField, sortOrder, onSortChange]
+  );
+  const handlePageChange = React.useCallback(
+    (page) => {
+      var _a;
+      setCurrentPage(page);
+      (_a = pagination == null ? void 0 : pagination.onChange) == null ? void 0 : _a.call(pagination, page, pageSize);
+    },
+    [pagination, pageSize]
+  );
+  const handlePageSizeChange = React.useCallback(
+    (newPageSize) => {
+      var _a;
+      setPageSize(newPageSize);
+      setCurrentPage(1);
+      (_a = pagination == null ? void 0 : pagination.onChange) == null ? void 0 : _a.call(pagination, 1, newPageSize);
+    },
+    [pagination]
+  );
+  const handleRowSelect = React.useCallback(
+    (record, checked) => {
+      const key = getRowKey(record, dataSource.indexOf(record));
+      let newSelectedRowKeys;
+      if (checked) {
+        newSelectedRowKeys = [...selectedRowKeys, key];
+      } else {
+        newSelectedRowKeys = selectedRowKeys.filter((k) => k !== key);
+      }
+      const newSelectedRows = dataSource.filter(
+        (item) => newSelectedRowKeys.includes(getRowKey(item, dataSource.indexOf(item)))
+      );
+      onSelectionChange == null ? void 0 : onSelectionChange(newSelectedRowKeys, newSelectedRows);
+    },
+    [selectedRowKeys, dataSource, getRowKey, onSelectionChange]
+  );
+  const handleSelectAll = React.useCallback(
+    (checked) => {
+      if (checked) {
+        const allKeys = dataSource.map((record, index) => getRowKey(record, index));
+        onSelectionChange == null ? void 0 : onSelectionChange(allKeys, dataSource);
+      } else {
+        onSelectionChange == null ? void 0 : onSelectionChange([], []);
+      }
+    },
+    [dataSource, getRowKey, onSelectionChange]
+  );
+  const handleScroll = React.useCallback(() => {
+    if (!(loadMore == null ? void 0 : loadMore.enabled) || loadMore.loading || !loadMore.hasMore) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    const threshold = loadMore.threshold || 100;
+    if (scrollTop + clientHeight >= scrollHeight - threshold) {
+      loadMore.onLoadMore();
+    }
+  }, [loadMore]);
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !(loadMore == null ? void 0 : loadMore.enabled)) return;
+    container.addEventListener("scroll", handleScroll);
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [handleScroll, loadMore == null ? void 0 : loadMore.enabled, loadMore == null ? void 0 : loadMore.loading, loadMore == null ? void 0 : loadMore.hasMore]);
+  React.useEffect(() => {
+    if ((pagination == null ? void 0 : pagination.current) !== void 0) {
+      setCurrentPage(pagination.current);
+    }
+    if ((pagination == null ? void 0 : pagination.pageSize) !== void 0) {
+      setPageSize(pagination.pageSize);
+    }
+  }, [pagination]);
+  const paginationUiClasses = {
+    xs: {
+      container: "px-3 py-2",
+      text: "text-xs",
+      control: "px-2 py-1 text-xs",
+      gap: "gap-1",
+      select: "px-2 py-1 text-xs",
+      input: "px-2 py-1 text-xs w-14"
+    },
+    sm: {
+      container: "px-3 py-2",
+      text: "text-sm",
+      control: "px-2 py-1 text-sm",
+      gap: "gap-2",
+      select: "px-2 py-1 text-sm",
+      input: "px-2 py-1 text-sm w-16"
+    },
+    md: {
+      container: "px-4 py-3",
+      text: "text-sm",
+      control: "px-3 py-1 text-sm",
+      gap: "gap-2",
+      select: "px-2 py-1 text-sm",
+      input: "px-2 py-1 text-sm w-16"
+    },
+    lg: {
+      container: "px-5 py-3.5",
+      text: "text-base",
+      control: "px-3.5 py-1.5 text-base",
+      gap: "gap-3",
+      select: "px-3 py-1.5 text-base",
+      input: "px-3 py-1.5 text-base w-20"
+    },
+    xl: {
+      container: "px-6 py-4",
+      text: "text-lg",
+      control: "px-4 py-2 text-lg",
+      gap: "gap-3",
+      select: "px-4 py-2 text-lg",
+      input: "px-4 py-2 text-lg w-24"
+    },
+    "2xl": {
+      container: "px-8 py-5",
+      text: "text-xl",
+      control: "px-5 py-2.5 text-xl",
+      gap: "gap-4",
+      select: "px-5 py-2.5 text-xl",
+      input: "px-5 py-2.5 text-xl w-28"
+    }
+  };
+  const totalPages = pagination && pagination.total && pageSize ? Math.max(1, Math.ceil(pagination.total / pageSize)) : 1;
+  const getTableStyles = () => ({
+    backgroundColor: variant === "minimal" ? "transparent" : variant === "soft" ? "var(--lm-bg-paper)" : "var(--lm-bg-elevated)",
+    borderColor: variant === "outline" ? "var(--lm-border-strong)" : bordered ? "var(--lm-border-default)" : "transparent"
+  });
+  const getHeaderStyles = () => ({
+    backgroundColor: variant === "minimal" ? "transparent" : "var(--lm-bg-elevated)",
+    color: "var(--lm-text-primary)",
+    borderColor: variant === "outline" ? "var(--lm-border-strong)" : "var(--lm-border-light)"
+  });
+  const getCellStyles = (isHeader = false) => ({
+    backgroundColor: isHeader ? variant === "minimal" ? "transparent" : "var(--lm-bg-paper)" : variant === "minimal" ? "transparent" : variant === "soft" ? "var(--lm-bg-paper)" : "var(--lm-bg-elevated)",
+    color: "var(--lm-text-primary)",
+    borderColor: variant === "outline" ? "var(--lm-border-strong)" : variant === "minimal" ? "transparent" : "var(--lm-border-light)"
+  });
+  const getRowStyles = (index, isSelected = false) => {
+    const baseStyles = {
+      backgroundColor: isSelected ? "var(--lm-primary-50)" : (striped || variant === "zebra") && index % 2 === 1 ? "var(--lm-bg-paper)" : variant === "minimal" ? "transparent" : variant === "soft" ? "var(--lm-bg-paper)" : "var(--lm-bg-elevated)",
+      color: "var(--lm-text-primary)"
+    };
+    if (isSelected) {
+      return {
+        ...baseStyles,
+        borderColor: "var(--lm-primary-200)"
+      };
+    }
+    return baseStyles;
+  };
+  const getPaginationStyles = () => ({
+    backgroundColor: variant === "minimal" ? "transparent" : variant === "soft" ? "var(--lm-bg-paper)" : "var(--lm-bg-elevated)",
+    color: "var(--lm-text-primary)",
+    borderColor: variant === "outline" ? "var(--lm-border-strong)" : "var(--lm-border-default)",
+    boxShadow: variant === "elevated" ? "var(--lm-shadow-md)" : void 0
+  });
+  const getButtonStyles = (disabled = false, active = false) => {
+    if (disabled) {
+      return {
+        backgroundColor: "var(--lm-bg-paper)",
+        color: "var(--lm-text-disabled)",
+        borderColor: "var(--lm-border-light)",
+        cursor: "not-allowed",
+        opacity: 0.6
+      };
+    }
+    if (active) {
+      return {
+        backgroundColor: "var(--lm-primary-500)",
+        color: "white",
+        borderColor: "var(--lm-primary-500)"
+      };
+    }
+    return {
+      backgroundColor: "var(--lm-bg-paper)",
+      color: "var(--lm-text-primary)",
+      borderColor: "var(--lm-border-default)"
+    };
+  };
+  const getLoadingStyles = () => ({
+    color: "var(--lm-text-secondary)"
+  });
+  const getEmptyStyles = () => ({
+    color: "var(--lm-text-secondary)"
+  });
+  const tableClassName = `w-full ${componentSizes.SIZE_TEXT_CLASSES[size]} border-collapse ${className}`.trim().replace(/\s+/g, " ");
+  const isAllSelected = dataSource.length > 0 && selectedRowKeys.length === dataSource.length;
+  const isIndeterminate = selectedRowKeys.length > 0 && selectedRowKeys.length < dataSource.length;
+  const rootClassName = `space-y-4 ${fullHeight ? "h-full flex flex-col min-h-0" : ""}`.trim().replace(/\s+/g, " ");
+  const tableContainerClassName = `${fullHeight ? "flex-1 min-h-0 overflow-auto" : `overflow-auto ${(loadMore == null ? void 0 : loadMore.enabled) ? "max-h-96" : ""}`}`.trim().replace(/\s+/g, " ");
+  const wrapperVariantClasses = (() => {
+    switch (variant) {
+      case "elevated":
+        return "rounded-2xl border shadow-lg";
+      case "outline":
+        return "rounded-xl border";
+      case "soft":
+        return "rounded-xl border";
+      case "minimal":
+        return "rounded-xl";
+      case "zebra":
+        return "rounded-xl border";
+      default:
+        return "";
+    }
+  })();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rootClassName, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: `${tableContainerClassName} ${wrapperVariantClasses}`,
+        style: { borderColor: "var(--lm-border-default)" },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: tableClassName, style: getTableStyles(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 z-20", style: getHeaderStyles(), children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            selectable && /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
+              {
+                className: `${componentSizes.SIZE_TABLE_CONFIG[size].cellPadding} py-3 ${componentSizes.SIZE_TEXT_CLASSES[size]} text-left ${bordered ? "border-r" : ""} font-semibold`,
+                style: getCellStyles(true),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: isAllSelected,
+                    ref: (input) => {
+                      if (input) input.indeterminate = isIndeterminate;
+                    },
+                    onChange: (e) => handleSelectAll(e.target.checked),
+                    className: "w-4 h-4",
+                    style: { accentColor: "var(--lm-primary-500)" }
+                  }
+                )
+              }
+            ),
+            columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
+              {
+                className: `${componentSizes.SIZE_TABLE_CONFIG[size].cellPadding} py-3 text-left ${bordered ? "border-r" : ""} ${column.sorter ? "cursor-pointer hover:bg-opacity-60" : ""} font-semibold`,
+                style: {
+                  ...getCellStyles(true),
+                  width: column.width,
+                  textAlign: column.align || "left",
+                  fontSize: size === "xs" ? "0.8125rem" : size === "sm" ? "0.875rem" : "0.9375rem"
+                },
+                onClick: () => handleSort(column),
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: column.title }),
+                  column.sorter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col -space-y-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      CaretUpIcon,
+                      {
+                        active: sortField === column.dataIndex && sortOrder === "ascend"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      CaretDownIcon,
+                      {
+                        active: sortField === column.dataIndex && sortOrder === "descend"
+                      }
+                    )
+                  ] })
+                ] })
+              },
+              column.dataIndex
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+            "td",
+            {
+              colSpan: columns.length + (selectable ? 1 : 0),
+              className: `px-4 py-8 text-center ${componentSizes.SIZE_TEXT_CLASSES[size]}`,
+              style: getLoadingStyles(),
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, {}),
+                "Loading..."
+              ] })
+            }
+          ) }) : dataSource.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+            "td",
+            {
+              colSpan: columns.length + (selectable ? 1 : 0),
+              className: `px-4 py-8 text-center ${componentSizes.SIZE_TEXT_CLASSES[size]}`,
+              style: getEmptyStyles(),
+              children: emptyText
+            }
+          ) }) : dataSource.map((record, index) => {
+            const key = getRowKey(record, index);
+            const isSelected = selectedRowKeys.includes(key);
+            const isLastRow = index === dataSource.length - 1;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "tr",
+              {
+                className: `${onRowClick ? "cursor-pointer hover:bg-opacity-60" : ""} transition-colors border-t ${isLastRow ? "border-b" : ""}`,
+                style: {
+                  ...getRowStyles(index, isSelected),
+                  borderColor: "var(--lm-border-light)"
+                },
+                onClick: () => onRowClick == null ? void 0 : onRowClick(record, index),
+                children: [
+                  selectable && /* @__PURE__ */ jsxRuntime.jsx(
+                    "td",
+                    {
+                      className: `${componentSizes.SIZE_TABLE_CONFIG[size].cellPadding} ${componentSizes.SIZE_TEXT_CLASSES[size]} ${bordered ? "border-r" : ""}`,
+                      style: getCellStyles(),
+                      onClick: (e) => e.stopPropagation(),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: isSelected,
+                          onChange: (e) => handleRowSelect(record, e.target.checked),
+                          className: "w-4 h-4",
+                          style: { accentColor: "var(--lm-primary-500)" }
+                        }
+                      )
+                    }
+                  ),
+                  columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "td",
+                    {
+                      className: `${componentSizes.SIZE_TABLE_CONFIG[size].cellPadding} ${componentSizes.SIZE_TEXT_CLASSES[size]} ${bordered ? "border-r" : ""}`,
+                      style: {
+                        ...getCellStyles(),
+                        textAlign: column.align || "left"
+                      },
+                      children: column.render ? column.render(
+                        getValueByDataIndex(record, column.dataIndex),
+                        record,
+                        index
+                      ) : String(getValueByDataIndex(record, column.dataIndex) ?? "")
+                    },
+                    column.dataIndex
+                  ))
+                ]
+              },
+              key
+            );
+          }) })
+        ] })
+      }
+    ),
+    (pagination == null ? void 0 : pagination.showPagination) && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `flex items-center justify-between ${paginationUiClasses[size].container} rounded-2xl border`,
+        style: getPaginationStyles(),
+        children: (() => {
+          var _a;
+          const maxButtons = 5;
+          const half = Math.floor(maxButtons / 2);
+          let start = Math.max(1, currentPage - half);
+          const end = Math.min(totalPages, start + maxButtons - 1);
+          if (end - start + 1 < maxButtons) {
+            start = Math.max(1, end - maxButtons + 1);
+          }
+          const pageNumbers = Array.from({ length: end - start + 1 }, (_, i) => start + i);
+          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+              pagination.showTotal && /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: paginationUiClasses[size].text,
+                  style: { color: "var(--lm-text-secondary)" },
+                  children: [
+                    "Total ",
+                    pagination.total,
+                    " items / ",
+                    totalPages,
+                    " pages"
+                  ]
+                }
+              ),
+              pagination.showSizeChanger && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: paginationUiClasses[size].text,
+                    style: { color: "var(--lm-text-secondary)" },
+                    children: "Show:"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "select",
+                  {
+                    value: pageSize,
+                    onChange: (e) => handlePageSizeChange(Number(e.target.value)),
+                    className: `${paginationUiClasses[size].select} border rounded-lg focus:ring-2 focus:ring-primary-400 focus:outline-none`,
+                    style: {
+                      backgroundColor: "var(--lm-bg-paper)",
+                      color: "var(--lm-text-primary)",
+                      borderColor: "var(--lm-border-default)"
+                    },
+                    children: (_a = pagination.pageSizeOptions) == null ? void 0 : _a.map((s) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: s, children: [
+                      s,
+                      " / page"
+                    ] }, s))
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center ${paginationUiClasses[size].gap}`, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => handlePageChange(currentPage - 1),
+                  disabled: currentPage <= 1,
+                  className: `${paginationUiClasses[size].control} border rounded-lg transition-colors`,
+                  style: getButtonStyles(currentPage <= 1),
+                  "aria-label": "Previous page",
+                  title: "Previous page",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, {})
+                }
+              ),
+              pageNumbers.map((page) => /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => handlePageChange(page),
+                  className: `${paginationUiClasses[size].control} border rounded-lg transition-colors ${currentPage === page ? "font-medium" : ""}`,
+                  style: getButtonStyles(false, currentPage === page),
+                  children: page
+                },
+                page
+              )),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => handlePageChange(currentPage + 1),
+                  disabled: currentPage >= totalPages,
+                  className: `${paginationUiClasses[size].control} border rounded-lg transition-colors`,
+                  style: getButtonStyles(currentPage >= totalPages),
+                  "aria-label": "Next page",
+                  title: "Next page",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {})
+                }
+              ),
+              pagination.showQuickJumper && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center ${paginationUiClasses[size].gap} ml-4`, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: paginationUiClasses[size].text,
+                    style: { color: "var(--lm-text-secondary)" },
+                    children: "Go to:"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "number",
+                    min: 1,
+                    max: totalPages,
+                    className: `${paginationUiClasses[size].input} border rounded-lg focus:ring-2 focus:ring-primary-400 focus:outline-none`,
+                    style: {
+                      backgroundColor: "var(--lm-bg-paper)",
+                      color: "var(--lm-text-primary)",
+                      borderColor: "var(--lm-border-default)"
+                    },
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") {
+                        const page = Number(e.currentTarget.value);
+                        if (page >= 1 && page <= totalPages) {
+                          handlePageChange(page);
+                        }
+                      }
+                    }
+                  }
+                )
+              ] })
+            ] })
+          ] });
+        })()
+      }
+    ),
+    (loadMore == null ? void 0 : loadMore.enabled) && loadMore.hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: loadMore.onLoadMore,
+        disabled: loadMore.loading,
+        className: "px-6 py-2 text-sm border rounded-2xl transition-colors",
+        style: getButtonStyles(loadMore.loading),
+        children: loadMore.loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, {}),
+          "Loading..."
+        ] }) : "Load more"
+      }
+    ) })
+  ] });
+};
+const LMTable_default = React.memo(LMTable);
+exports.LMTable_default = LMTable_default;
+//# sourceMappingURL=LMTable-j1ZzAzXB.cjs.map