@mastra/playground-ui 22.1.2-alpha.3 → 22.1.2-alpha.4

package/dist/index.es.js

@@ -11428,6 +11428,36 @@ function EntityListNoMatch({ message = "Nothing matches your search", className
   return /* @__PURE__ */ jsx("div", { className: cn("col-span-full flex flex-col items-center justify-center gap-2 py-12 text-neutral3", className), children: /* @__PURE__ */ jsx("p", { className: "text-ui-md", children: message }) });
 }
 
+function EntityListPagination({ currentPage, hasMore, onNextPage, onPrevPage }) {
+  const showNavigation = typeof currentPage === "number" && currentPage > 0 || hasMore;
+  return /* @__PURE__ */ jsxs("div", { className: cn("col-span-full flex items-center justify-center gap-8 pt-6 pb-4 text-ui-md text-neutral3"), children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      "Page ",
+      /* @__PURE__ */ jsx("b", { children: currentPage ? currentPage + 1 : "1" })
+    ] }),
+    showNavigation && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex gap-4",
+          "[&>button]:flex [&>button]:items-center [&>button]:gap-2 [&>button]:text-neutral4 [&>button:hover]:text-neutral5 [&>button]:transition-colors [&>button]:border [&>button]:border-border1 [&>button]:p-1 [&>button]:px-2 [&>button]:rounded-md",
+          "[&_svg]:w-[1em] [&_svg]:h-[1em] [&_svg]:text-neutral3"
+        ),
+        children: [
+          typeof currentPage === "number" && currentPage > 0 && /* @__PURE__ */ jsxs("button", { type: "button", onClick: onPrevPage, children: [
+            /* @__PURE__ */ jsx(ArrowLeftIcon, {}),
+            "Previous"
+          ] }),
+          hasMore && /* @__PURE__ */ jsxs("button", { type: "button", onClick: onNextPage, children: [
+            "Next",
+            /* @__PURE__ */ jsx(ArrowRightIcon, {})
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
 function EntityListRoot({ children, columns, className }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -11567,7 +11597,8 @@ const EntityList = Object.assign(EntityListRoot, {
   TextCell: EntityListTextCell,
   NameCell: EntityListNameCell,
   DescriptionCell: EntityListDescriptionCell,
-  NoMatch: EntityListNoMatch
+  NoMatch: EntityListNoMatch,
+  Pagination: EntityListPagination
 });
 
 const widths = ["75%", "50%", "65%", "90%", "60%", "80%"];