@dreamtree-org/twreact-ui 1.2.1 → 1.3.1

package/dist/esm/components/core/Table/MobileFilters.js

@@ -0,0 +1,72 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { Search } from 'lucide-react';
+
+/**
+ * Mobile-specific filters panel
+ */
+function MobileFilters(_ref) {
+  var showMobileFilters = _ref.showMobileFilters,
+    setShowMobileFilters = _ref.setShowMobileFilters,
+    globalSearch = _ref.globalSearch,
+    searchInput = _ref.searchInput,
+    setSearchInput = _ref.setSearchInput,
+    onGlobalKeyDown = _ref.onGlobalKeyDown,
+    filterable = _ref.filterable,
+    visibleColumns = _ref.visibleColumns,
+    filters = _ref.filters,
+    handleFilter = _ref.handleFilter;
+  return jsxs("div", {
+    className: "mb-4 p-3 bg-gray-50 rounded-lg",
+    children: [jsxs("div", {
+      className: "flex items-center justify-between mb-3",
+      children: [jsx("h3", {
+        className: "text-sm font-medium",
+        children: "Filters"
+      }), jsx("button", {
+        onClick: function onClick() {
+          return setShowMobileFilters(function (s) {
+            return !s;
+          });
+        },
+        className: "text-xs text-primary-500",
+        children: showMobileFilters ? "Hide" : "Show"
+      })]
+    }), showMobileFilters && jsxs("div", {
+      className: "space-y-3",
+      children: [globalSearch && jsxs("div", {
+        className: "relative",
+        children: [jsx("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
+        }), jsx(Search, {
+          className: "absolute right-3 top-2.5 h-4 w-4 text-primary-400"
+        })]
+      }), filterable && visibleColumns.map(function (column) {
+        return jsxs("div", {
+          children: [jsx("label", {
+            className: "block text-xs font-medium mb-1",
+            children: column.label
+          }), jsx("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);
+            }
+          })]
+        }, column.key);
+      })]
+    })]
+  });
+}
+
+export { MobileFilters as default };

package/dist/esm/components/core/Table/Pagination.js

@@ -0,0 +1,157 @@
+'use client';
+import { defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { cn } from '../../../utils/cn.js';
+import { ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight } from 'lucide-react';
+
+/**
+ * Pagination controls component for the table
+ * Supports both header (icon-only) and footer (with page numbers) variants
+ */
+var DEFAULT_ROW_HOVER = "bg-gray-50";
+// Header pagination (compact, icon-based)
+function PaginationHeader(_ref) {
+  var _theme$rowHover;
+  var currentPage = _ref.currentPage,
+    totalPages = _ref.totalPages,
+    onPageChange = _ref.onPageChange,
+    theme = _ref.theme;
+  var rowHover = (_theme$rowHover = theme === null || theme === void 0 ? void 0 : theme.rowHover) !== null && _theme$rowHover !== void 0 ? _theme$rowHover : DEFAULT_ROW_HOVER;
+  return jsxs("div", {
+    className: "flex items-center gap-1",
+    children: [totalPages >= 4 && jsx("button", {
+      className: cn("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
+      disabled: currentPage === 1,
+      onClick: function onClick() {
+        return onPageChange(1);
+      },
+      "aria-label": "First page",
+      children: jsx(ChevronsLeft, {
+        className: "size-4 md:size-5 text-primary-800"
+      })
+    }), jsx("button", {
+      className: cn("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
+      disabled: currentPage === 1,
+      onClick: function onClick() {
+        return onPageChange(Math.max(1, currentPage - 1));
+      },
+      "aria-label": "Previous page",
+      children: jsx(ChevronLeft, {
+        className: "size-4 md:size-5 text-primary-800"
+      })
+    }), jsx("button", {
+      className: cn("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
+      disabled: currentPage === totalPages,
+      onClick: function onClick() {
+        return onPageChange(Math.min(totalPages, currentPage + 1));
+      },
+      "aria-label": "Next page",
+      children: jsx(ChevronRight, {
+        className: "size-4 md:size-5 text-primary-800"
+      })
+    }), totalPages >= 4 && jsx("button", {
+      className: cn("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
+      disabled: currentPage === totalPages,
+      onClick: function onClick() {
+        return onPageChange(totalPages);
+      },
+      "aria-label": "Last page",
+      children: jsx(ChevronsRight, {
+        className: "size-4 md:size-5 text-primary-800"
+      })
+    })]
+  });
+}
+// Footer pagination (with page numbers)
+function PaginationFooter(_ref2) {
+  var _theme$rowHover2;
+  var currentPage = _ref2.currentPage,
+    totalPages = _ref2.totalPages,
+    onPageChange = _ref2.onPageChange,
+    isMobileView = _ref2.isMobileView,
+    theme = _ref2.theme;
+  var rowHover = (_theme$rowHover2 = theme === null || theme === void 0 ? void 0 : theme.rowHover) !== null && _theme$rowHover2 !== void 0 ? _theme$rowHover2 : DEFAULT_ROW_HOVER;
+  var visiblePageCount = isMobileView ? 5 : 3;
+  return jsx("div", {
+    className: "p-4 border-t",
+    children: jsxs("div", {
+      className: "flex flex-col sm:flex-row items-center justify-between gap-3",
+      children: [jsxs("div", {
+        className: "text-sm",
+        children: ["Page ", currentPage, " of ", totalPages]
+      }), jsxs("div", {
+        className: "flex items-center gap-1 sm:gap-2",
+        children: [totalPages >= 4 && jsx("button", {
+          className: cn("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
+          disabled: currentPage === 1,
+          onClick: function onClick() {
+            return onPageChange(1);
+          },
+          "aria-label": "First page",
+          children: isMobileView ? jsx(ChevronsLeft, {
+            className: "size-4 text-primary-800"
+          }) : "First"
+        }), jsx("button", {
+          className: cn("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
+          disabled: currentPage === 1,
+          onClick: function onClick() {
+            return onPageChange(Math.max(1, currentPage - 1));
+          },
+          "aria-label": "Previous page",
+          children: isMobileView ? jsx(ChevronLeft, {
+            className: "size-4 text-primary-800"
+          }) : "Previous"
+        }), jsx("div", {
+          className: "flex items-center gap-1",
+          children: Array.from({
+            length: Math.min(visiblePageCount, totalPages)
+          }, function (_, i) {
+            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 jsx("button", {
+              className: cn("h-8 w-8 rounded-lg md:rounded-md text-sm", _defineProperty({
+                "bg-primary-600 text-white": pageNum === currentPage,
+                "border border-gray-300": pageNum !== currentPage
+              }, "hover:" + rowHover, pageNum !== currentPage)),
+              onClick: function onClick() {
+                return onPageChange(pageNum);
+              },
+              children: pageNum
+            }, pageNum);
+          })
+        }), jsx("button", {
+          className: cn("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
+          disabled: currentPage === totalPages,
+          onClick: function onClick() {
+            return onPageChange(Math.min(totalPages, currentPage + 1));
+          },
+          "aria-label": "Next page",
+          children: isMobileView ? jsx(ChevronRight, {
+            className: "size-4 text-primary-800"
+          }) : "Next"
+        }), totalPages >= 4 && jsx("button", {
+          className: cn("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
+          disabled: currentPage === totalPages,
+          onClick: function onClick() {
+            return onPageChange(totalPages);
+          },
+          "aria-label": "Last page",
+          children: isMobileView ? jsx(ChevronsRight, {
+            className: "size-4 text-primary-800"
+          }) : "Last"
+        })]
+      })]
+    })
+  });
+}
+
+export { PaginationFooter, PaginationHeader };