fix pagination bug

dist/remote-ui.js

@@ -1,24 +1,24 @@
-import g, { useRef as d, useEffect as h } from "react";
+import k, { useRef as d, useEffect as h } from "react";
-import { createRoot as k } from "react-dom/client";
+import { createRoot as v } from "react-dom/client";
-import { Text as v, Input as w, IconButton as y, HStack as E, Button as x, Badge as C, ChakraProvider as I } from "@chakra-ui/react";
+import { Text as w, Input as y, IconButton as E, HStack as x, Button as C, Badge as I, ChakraProvider as T, useTheme as D } from "@chakra-ui/react";
-import { a as f, D as B } from "./chunks/constants-CRZ9QfxV.js";
+import { a as m, D as P } from "./chunks/constants-CRZ9QfxV.js";
-import { jsx as D } from "react/jsx-runtime";
+import { jsx as g } from "react/jsx-runtime";
-import { AppHeader as z } from "./remote-ui-app-header.js";
+import { AppHeader as N } from "./remote-ui-app-header.js";
-import { AppSidebar as N } from "./remote-ui-app-sidebar.js";
+import { AppSidebar as J } from "./remote-ui-app-sidebar.js";
 function S(e = {}) {
   if (typeof window > "u") return;
-  const t = window[f] || {};
+  const t = window[m] || {};
-  window[f] = {
+  window[m] = {
     ...t,
-    React: e.React || t.React || g,
+    React: e.React || t.React || k,
-    createRoot: e.createRoot || t.createRoot || k,
+    createRoot: e.createRoot || t.createRoot || v,
-    ChakraProvider: e.ChakraProvider || t.ChakraProvider || I,
+    ChakraProvider: e.ChakraProvider || t.ChakraProvider || T,
-    Badge: e.Badge || t.Badge || C,
+    Badge: e.Badge || t.Badge || I,
-    Button: e.Button || t.Button || x,
+    Button: e.Button || t.Button || C,
-    HStack: e.HStack || t.HStack || E,
+    HStack: e.HStack || t.HStack || x,
-    IconButton: e.IconButton || t.IconButton || y,
+    IconButton: e.IconButton || t.IconButton || E,
-    Input: e.Input || t.Input || w,
+    Input: e.Input || t.Input || y,
-    Text: e.Text || t.Text || v,
+    Text: e.Text || t.Text || w,
     ...e.deps || {},
     theme: Object.prototype.hasOwnProperty.call(e, "theme") ? e.theme : t.theme,
     chakraProviderProps: {
@@ -28,15 +28,15 @@ function S(e = {}) {
   };
 }
 const a = /* @__PURE__ */ new Map();
-function T(e = []) {
+function b(e = []) {
   if (typeof window > "u") return !1;
-  const t = window[f];
+  const t = window[m];
   return e.every((r) => t == null ? void 0 : t[r]);
 }
-function b(e = []) {
+function H(e = []) {
-  typeof window > "u" || T(e) || S();
+  typeof window > "u" || b(e) || S();
 }
-function H(e, t) {
+function G(e, t) {
   const r = `${e}:${t}`;
   return a.has(r) || a.set(
     r,
@@ -49,26 +49,26 @@ function H(e, t) {
     })
   ), a.get(r);
 }
-function P({
+function B({
   componentName: e,
   tagName: t,
   defaultRemoteUrl: r,
   requiredDeps: u,
-  normalizeProps: m
+  normalizeProps: f
 }) {
   return function({
-    theme: p,
+    theme: s,
-    chakraProviderProps: s,
+    chakraProviderProps: p,
     ...l
   }) {
     const c = d(null), n = d(null), i = d(null);
     return i.current = {
-      ...m ? m(l) : l,
+      ...f ? f(l) : l,
-      ...p !== void 0 ? { theme: p } : {},
+      ...s !== void 0 ? { theme: s } : {},
-      ...s ? { chakraProviderProps: s } : {}
+      ...p ? { chakraProviderProps: p } : {}
     }, h(() => {
       let R = !0;
-      return b(u), H(e, r).then(() => {
+      return H(u), G(e, r).then(() => {
         if (!R || !c.current) return;
         const o = document.createElement(t);
         o.componentProps = i.current, c.current.appendChild(o), n.current = o;
@@ -82,7 +82,7 @@ function P({
       };
     }, [e, r, t]), h(() => {
       n.current && (n.current.componentProps = i.current);
-    }), /* @__PURE__ */ D(
+    }), /* @__PURE__ */ g(
       "span",
       {
         ref: c,
@@ -93,26 +93,26 @@ function P({
     );
   };
 }
-function G(e) {
+function O(e) {
   if (typeof e == "string" || typeof e == "number")
     return e;
   e != null && console.warn(
     "[uikit/remote/ui] GBadge only accepts text/number children across the remote boundary."
   );
 }
-const $ = P({
+const K = B({
   componentName: "GBadge",
   tagName: "uikit-g-badge",
-  defaultRemoteUrl: B.GBadge,
+  defaultRemoteUrl: P.GBadge,
   requiredDeps: ["React", "createRoot", "ChakraProvider", "Badge"],
   normalizeProps: ({ children: e, ...t }) => ({
     ...t,
-    children: G(e)
+    children: O(e)
   })
-}), j = P({
+}), _ = B({
   componentName: "Pagination",
   tagName: "uikit-pagination",
-  defaultRemoteUrl: B.Pagination,
+  defaultRemoteUrl: P.Pagination,
   requiredDeps: [
     "React",
     "createRoot",
@@ -124,10 +124,20 @@ const $ = P({
     "Text"
   ]
 });
+function L({ theme: e, ...t }) {
+  const r = D();
+  return /* @__PURE__ */ g(
+    _,
+    {
+      ...t,
+      theme: e ?? r
+    }
+  );
+}
 export {
-  z as AppHeader,
+  N as AppHeader,
-  N as AppSidebar,
+  J as AppSidebar,
-  $ as GBadge,
+  K as GBadge,
-  j as Pagination,
+  L as Pagination,
   S as setupUikitRemoteDeps
 };

dist/remote/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="color-scheme" content="light" />
     <title>UI Kit Remote Demo</title>
-    <script type="module" crossorigin src="./demo-assets/index-LJMONNgk.js"></script>
+    <script type="module" crossorigin src="./demo-assets/index-CGeO2iR0.js"></script>
   </head>
   <body>
     <div id="root"></div>

src/remote/ui/Pagination/index.jsx

@@ -1,9 +1,11 @@
 "use client";
 
+import { useTheme } from "@chakra-ui/react";
+
 import { DEFAULT_REMOTE_URLS } from "../_core/constants";
 import { createRemoteElementComponent } from "../_core/createRemoteElementComponent";
 
-export const Pagination = createRemoteElementComponent({
+const RemotePagination = createRemoteElementComponent({
   componentName: "Pagination",
   tagName: "uikit-pagination",
   defaultRemoteUrl: DEFAULT_REMOTE_URLS.Pagination,
@@ -18,3 +20,15 @@ export const Pagination = createRemoteElementComponent({
     "Text",
   ],
 });
+
+
+export function Pagination({ theme, ...props }) {
+  const hostTheme = useTheme();
+
+  return (
+    <RemotePagination
+      {...props}
+      theme={theme ?? hostTheme}
+    />
+  );
+}