@akanjs/ui 0.0.151 → 0.0.152

package/esm/Model/Remove.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx, router } from "@akanjs/client";
 import { capitalize } from "@akanjs/common";
 import { msg } from "@akanjs/dictionary";
@@ -20,47 +21,52 @@ function Remove({ className, name, modelId, sliceName, modal, redirect }) {
     }),
     []
   );
-  return /* @__PURE__ */ React.createElement("div", { className: "inline size-full" }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: clsx("btn text-error btn-sm size-full flex-nowrap whitespace-nowrap", className),
-      onClick: (e) => {
-        e.stopPropagation();
-        setModalOpen(true);
+  return /* @__PURE__ */ jsxs("div", { className: "inline size-full", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: clsx("btn text-error btn-sm size-full flex-nowrap whitespace-nowrap", className),
+        onClick: (e) => {
+          e.stopPropagation();
+          setModalOpen(true);
+        },
+        children: [
+          /* @__PURE__ */ jsx(AiOutlineDelete, {}),
+          " ",
+          l("shared.remove")
+        ]
       }
-    },
-    /* @__PURE__ */ React.createElement(AiOutlineDelete, null),
-    " ",
-    l("shared.remove")
-  ), /* @__PURE__ */ React.createElement(
-    Modal,
-    {
-      open: modalOpen,
-      onCancel: () => {
-        setModalOpen(false);
-      },
-      title: /* @__PURE__ */ React.createElement("div", { className: "text-error text-lg font-bold" }, l("shared.removeModel", { model: l(`${modelName}.modelName`) })),
-      action: /* @__PURE__ */ React.createElement(
-        Button,
-        {
-          className: "btn btn-warning w-full",
-          onClick: async (e, { onError }) => {
-            await storeDo[names.removeModel](modelId, { onError, modal });
-            msg.success("shared.removeSuccess", { data: { model: l(`${modelName}.modelName`) } });
-            setModalOpen(false);
-            if (!redirect)
-              return;
-            if (redirect === "back")
-              router.back();
-            else
-              router.push(redirect);
-          }
+    ),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        open: modalOpen,
+        onCancel: () => {
+          setModalOpen(false);
         },
-        l("shared.yesRemove", { model: l(`${modelName}.modelName`) })
-      )
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center justify-center" }, l("shared.sureToRemove", { model: l(`${modelName}.modelName`), name: name ?? "" }))
-  ));
+        title: /* @__PURE__ */ jsx("div", { className: "text-error text-lg font-bold", children: l("shared.removeModel", { model: l(`${modelName}.modelName`) }) }),
+        action: /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "btn btn-warning w-full",
+            onClick: async (e, { onError }) => {
+              await storeDo[names.removeModel](modelId, { onError, modal });
+              msg.success("shared.removeSuccess", { data: { model: l(`${modelName}.modelName`) } });
+              setModalOpen(false);
+              if (!redirect)
+                return;
+              if (redirect === "back")
+                router.back();
+              else
+                router.push(redirect);
+            },
+            children: l("shared.yesRemove", { model: l(`${modelName}.modelName`) })
+          }
+        ),
+        children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-center", children: l("shared.sureToRemove", { model: l(`${modelName}.modelName`), name: name ?? "" }) })
+      }
+    )
+  ] });
 }
 export {
   Remove as default

package/esm/Model/RemoveWrapper.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 import { capitalize } from "@akanjs/common";
 import { usePage } from "@akanjs/next";
@@ -12,16 +13,16 @@ function RemoveWrapper({ children, sliceName, name, modelId, className, modal })
     removeModel: `remove${capitalize(modelName)}`
   };
   const storeDo = st.do;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Popconfirm,
     {
       title: l("shared.removeModel", { model: l(`${modelName}.modelName`) }),
-      description: /* @__PURE__ */ React.createElement("div", null, l("shared.sureToRemove", { model: l(`${modelName}.modelName`), name })),
+      description: /* @__PURE__ */ jsx("div", { children: l("shared.sureToRemove", { model: l(`${modelName}.modelName`), name }) }),
       onConfirm: () => {
         void storeDo[names.removeModel](modelId, { modal });
-      }
-    },
-    /* @__PURE__ */ React.createElement("div", { className: clsx("cursor-pointer", className) }, children)
+      },
+      children: /* @__PURE__ */ jsx("div", { className: clsx("cursor-pointer", className), children })
+    }
   );
 }
 export {

package/esm/Model/SureToRemove.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx, router } from "@akanjs/client";
 import { capitalize } from "@akanjs/common";
 import { msg } from "@akanjs/dictionary";
@@ -27,63 +28,78 @@ function SureToRemove({
     }),
     []
   );
-  return /* @__PURE__ */ React.createElement("div", { className: "inline size-full" }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: clsx(
-        "text-error flex size-full cursor-pointer flex-nowrap items-center justify-center gap-2 whitespace-nowrap",
-        className
-      ),
-      onClick: (e) => {
-        e.stopPropagation();
-        setModalOpen(true);
-      }
-    },
-    /* @__PURE__ */ React.createElement(AiOutlineDelete, null),
-    " ",
-    l("shared.remove")
-  ), /* @__PURE__ */ React.createElement(
-    Modal,
-    {
-      open: modalOpen,
-      onCancel: () => {
-        setModalOpen(false);
-      },
-      title: /* @__PURE__ */ React.createElement("div", { className: "text-error text-lg font-bold" }, l("shared.removeModel", { model: l(`${modelName}.modelName`) })),
-      bodyClassName: "border-error",
-      action: /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          className: "btn btn-error w-full",
-          disabled: typeNameToRemove && repeatName !== name,
-          onClick: async () => {
-            await storeDo[names.removeModel](modelId);
-            msg.success("shared.removeSuccess", { data: { model: l(`${modelName}.modelName`) } });
-            setModalOpen(false);
-            if (!redirect)
-              return;
-            if (redirect === "back")
-              router.back();
-            else
-              router.push(redirect);
-          }
+  return /* @__PURE__ */ jsxs("div", { className: "inline size-full", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          "text-error flex size-full cursor-pointer flex-nowrap items-center justify-center gap-2 whitespace-nowrap",
+          className
+        ),
+        onClick: (e) => {
+          e.stopPropagation();
+          setModalOpen(true);
         },
-        l("shared.removeModel", { model: l(`${modelName}.modelName`) })
-      )
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "py-4" }, l("shared.sureToRemove", { model: l(`${modelName}.modelName`), name }), /* @__PURE__ */ React.createElement("br", null), l("shared.irreversibleOps"), typeNameToRemove ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("br", null), l("shared.typeNameToRemove", { model: l(`${modelName}.modelName`), name })) : null),
-    typeNameToRemove ? /* @__PURE__ */ React.createElement(
-      "input",
+        children: [
+          /* @__PURE__ */ jsx(AiOutlineDelete, {}),
+          " ",
+          l("shared.remove")
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Modal,
       {
-        className: "input w-full text-center",
-        placeholder: `${l(`${modelName}.modelName`)} name`,
-        value: repeatName,
-        onChange: (e) => {
-          setRepeatName(e.target.value);
-        }
+        open: modalOpen,
+        onCancel: () => {
+          setModalOpen(false);
+        },
+        title: /* @__PURE__ */ jsx("div", { className: "text-error text-lg font-bold", children: l("shared.removeModel", { model: l(`${modelName}.modelName`) }) }),
+        bodyClassName: "border-error",
+        action: /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "btn btn-error w-full",
+            disabled: typeNameToRemove && repeatName !== name,
+            onClick: async () => {
+              await storeDo[names.removeModel](modelId);
+              msg.success("shared.removeSuccess", { data: { model: l(`${modelName}.modelName`) } });
+              setModalOpen(false);
+              if (!redirect)
+                return;
+              if (redirect === "back")
+                router.back();
+              else
+                router.push(redirect);
+            },
+            children: l("shared.removeModel", { model: l(`${modelName}.modelName`) })
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "py-4", children: [
+            l("shared.sureToRemove", { model: l(`${modelName}.modelName`), name }),
+            /* @__PURE__ */ jsx("br", {}),
+            l("shared.irreversibleOps"),
+            typeNameToRemove ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("br", {}),
+              l("shared.typeNameToRemove", { model: l(`${modelName}.modelName`), name })
+            ] }) : null
+          ] }),
+          typeNameToRemove ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "input w-full text-center",
+              placeholder: `${l(`${modelName}.modelName`)} name`,
+              value: repeatName,
+              onChange: (e) => {
+                setRepeatName(e.target.value);
+              }
+            }
+          ) : null
+        ]
       }
-    ) : null
-  ));
+    )
+  ] });
 }
 export {
   SureToRemove as default

package/esm/Model/View.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { AiOutlineMeh } from "react-icons/ai";
 function View({
@@ -11,14 +12,23 @@ function View({
   empty
 }) {
   const RenderLoadingWrapper = useMemo(
-    () => loadingWrapper === null ? ({ children, className: className2 }) => children : loadingWrapper ?? (({ children, className: className2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, children, modelLoading ? /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 animate-pulse" }) : null)),
+    () => loadingWrapper === null ? ({ children, className: className2 }) => children : loadingWrapper ?? (({ children, className: className2 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      children,
+      modelLoading ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0 animate-pulse" }) : null
+    ] })),
     [modelLoading]
   );
   const RenderModel = useMemo(
-    () => modelLoading ? loading === null ? () => null : loading ?? (() => /* @__PURE__ */ React.createElement("div", { className: "flex size-full flex-col items-center justify-center gap-3 pt-6 pb-3" }, /* @__PURE__ */ React.createElement("span", { className: "loading loading-dots loading-lg" }), "Loading")) : model ? () => render(model) : empty === null ? () => null : empty ?? (() => /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col items-center justify-center gap-3 pt-6 pb-3" }, /* @__PURE__ */ React.createElement(AiOutlineMeh, { className: "scale-150 text-4xl" }), " Empty")),
+    () => modelLoading ? loading === null ? () => null : loading ?? (() => /* @__PURE__ */ jsxs("div", { className: "flex size-full flex-col items-center justify-center gap-3 pt-6 pb-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "loading loading-dots loading-lg" }),
+      "Loading"
+    ] })) : model ? () => render(model) : empty === null ? () => null : empty ?? (() => /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center justify-center gap-3 pt-6 pb-3", children: [
+      /* @__PURE__ */ jsx(AiOutlineMeh, { className: "scale-150 text-4xl" }),
+      " Empty"
+    ] })),
     [model, modelLoading]
   );
-  return /* @__PURE__ */ React.createElement(RenderLoadingWrapper, { className }, /* @__PURE__ */ React.createElement(RenderModel, null));
+  return /* @__PURE__ */ jsx(RenderLoadingWrapper, { className, children: /* @__PURE__ */ jsx(RenderModel, {}) });
 }
 export {
   View as default

package/esm/Model/ViewEditModal.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { capitalize } from "@akanjs/common";
 import { usePage } from "@akanjs/next";
 import { st } from "@akanjs/store";
@@ -39,15 +40,15 @@ function ViewEditModal({
   const isModalOpen = modelModal === "view" || modelModal === "edit" && !!modelFormId;
   const Title = () => {
     if (!model || modelLoading || !renderTitle)
-      return /* @__PURE__ */ React.createElement(React.Fragment, null);
+      return /* @__PURE__ */ jsx(Fragment, {});
     const render = renderTitle(model);
     if (typeof render === "string")
-      return /* @__PURE__ */ React.createElement("h2", { className: "flex items-center text-sm md:text-base lg:text-lg xl:text-2xl" }, render);
+      return /* @__PURE__ */ jsx("h2", { className: "flex items-center text-sm md:text-base lg:text-lg xl:text-2xl", children: render });
     else
       return render;
   };
   const Template = renderTemplate;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Modal,
     {
       open: isModalOpen,
@@ -55,33 +56,43 @@ function ViewEditModal({
         storeDo[names.resetModel]();
       },
       className: modalClassName,
-      title: /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center justify-between" }, /* @__PURE__ */ React.createElement(Title, null), /* @__PURE__ */ React.createElement("div", { className: "dropdown dropdown-end" }, /* @__PURE__ */ React.createElement("label", { tabIndex: 0, className: "btn btn-square m-1" }, /* @__PURE__ */ React.createElement(BiDotsVertical, null)), /* @__PURE__ */ React.createElement("ul", { tabIndex: 0, className: "dropdown-content menu bg-base-100 rounded-box z-[1] p-2 shadow-sm" }, model ? /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(Remove, { sliceName, modelId: model.id, modal: null })) : null))),
-      action: modelModal === "view" ? /* @__PURE__ */ React.createElement(
+      title: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
+        /* @__PURE__ */ jsx(Title, {}),
+        /* @__PURE__ */ jsxs("div", { className: "dropdown dropdown-end", children: [
+          /* @__PURE__ */ jsx("label", { tabIndex: 0, className: "btn btn-square m-1", children: /* @__PURE__ */ jsx(BiDotsVertical, {}) }),
+          /* @__PURE__ */ jsx("ul", { tabIndex: 0, className: "dropdown-content menu bg-base-100 rounded-box z-[1] p-2 shadow-sm", children: model ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Remove, { sliceName, modelId: model.id, modal: null }) }) : null })
+        ] })
+      ] }),
+      action: modelModal === "view" ? /* @__PURE__ */ jsxs(
         "button",
         {
           className: "btn btn-primary w-full",
           onClick: () => {
             if (model)
               storeDo[names.editModel](model.id);
-          }
-        },
-        /* @__PURE__ */ React.createElement(AiOutlineEdit, null),
-        " ",
-        l("shared.edit")
-      ) : /* @__PURE__ */ React.createElement(
+          },
+          children: [
+            /* @__PURE__ */ jsx(AiOutlineEdit, {}),
+            " ",
+            l("shared.edit")
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(
         "button",
         {
           className: "btn btn-primary w-full",
           onClick: () => {
             storeDo[names.submitModel]({ sliceName, modal: "view" });
-          }
-        },
-        /* @__PURE__ */ React.createElement(AiOutlineSave, null),
-        " ",
-        l("shared.save")
-      )
-    },
-    modelModal === "view" ? /* @__PURE__ */ React.createElement(View, { className: viewClassName, model, modelLoading, render: renderView }) : modelModal === "edit" ? /* @__PURE__ */ React.createElement(Template, null) : null
+          },
+          children: [
+            /* @__PURE__ */ jsx(AiOutlineSave, {}),
+            " ",
+            l("shared.save")
+          ]
+        }
+      ),
+      children: modelModal === "view" ? /* @__PURE__ */ jsx(View, { className: viewClassName, model, modelLoading, render: renderView }) : modelModal === "edit" ? /* @__PURE__ */ jsx(Template, {}) : null
+    }
   );
 }
 export {

package/esm/Model/ViewModal.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx } from "react/jsx-runtime";
 import { capitalize } from "@akanjs/common";
 import { st } from "@akanjs/store";
 import { Modal } from "../Modal";
@@ -31,20 +32,20 @@ function ViewModal({
   const isModalOpen = modelModal === (modal ?? "view") && (modelLoading === id || model?.id === id);
   const Title = () => {
     if (!model || modelLoading || !renderTitle)
-      return /* @__PURE__ */ React.createElement(React.Fragment, null);
+      return /* @__PURE__ */ jsx(Fragment, {});
     const render = renderTitle(model);
     if (typeof render === "string")
-      return /* @__PURE__ */ React.createElement("h2", { className: "flex items-center text-2xl" }, render);
+      return /* @__PURE__ */ jsx("h2", { className: "flex items-center text-2xl", children: render });
     else
       return render;
   };
   const Action = () => {
     if (!model || modelLoading || !renderAction)
-      return /* @__PURE__ */ React.createElement(React.Fragment, null);
+      return /* @__PURE__ */ jsx(Fragment, {});
     const render = renderAction(model);
     return render;
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Modal,
     {
       open: isModalOpen,
@@ -52,10 +53,10 @@ function ViewModal({
         storeDo[names.resetModel]();
       },
       className: modalClassName,
-      title: /* @__PURE__ */ React.createElement(Title, null),
-      action: /* @__PURE__ */ React.createElement(Action, null)
-    },
-    /* @__PURE__ */ React.createElement(View, { className: viewClassName, model, modelLoading, render: renderView })
+      title: /* @__PURE__ */ jsx(Title, {}),
+      action: /* @__PURE__ */ jsx(Action, {}),
+      children: /* @__PURE__ */ jsx(View, { className: viewClassName, model, modelLoading, render: renderView })
+    }
   );
 }
 export {

package/esm/Model/ViewWrapper.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 import { capitalize } from "@akanjs/common";
 import { st } from "@akanjs/store";
@@ -9,7 +10,7 @@ function ViewWrapper({ children, sliceName, modelId, className, modal, resets })
     viewModel: `view${capitalize(modelName)}`
   };
   const storeDo = st.do;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: clsx("cursor-pointer", className),
@@ -19,9 +20,9 @@ function ViewWrapper({ children, sliceName, modelId, className, modal, resets })
         resets?.forEach((reset) => {
           void storeDo[`reset${capitalize(reset)}`]();
         });
-      }
-    },
-    children
+      },
+      children
+    }
   );
 }
 export {

package/esm/More.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 import dynamic from "next/dynamic";
 import { isMobile } from "react-device-detect";
@@ -15,10 +16,10 @@ const More = ({
   reverse
 }) => {
   if (total <= itemsPerPage) {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+    return /* @__PURE__ */ jsx(Fragment, { children });
   }
   if (isMobile) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       InfiniteScroll,
       {
         total,
@@ -26,12 +27,15 @@ const More = ({
         itemsPerPage,
         onAddPage,
         onPageSelect,
-        reverse
-      },
-      children
+        reverse,
+        children
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children, /* @__PURE__ */ React.createElement("div", { className: clsx("mt-4 flex w-full flex-wrap justify-center", className) }, /* @__PURE__ */ React.createElement(Pagination, { currentPage, total, itemsPerPage, onPageSelect })));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx("div", { className: clsx("mt-4 flex w-full flex-wrap justify-center", className), children: /* @__PURE__ */ jsx(Pagination, { currentPage, total, itemsPerPage, onPageSelect }) })
+  ] });
 };
 export {
   More

package/esm/ObjectId.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { AiOutlineCheck, AiOutlineCopy } from "react-icons/ai";
 const ObjectId = ({ id }) => {
@@ -11,7 +12,10 @@ const ObjectId = ({ id }) => {
       setIsCopied(false);
     }, 2e3);
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "tooltip tooltip-primary", "data-tip": id }, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-semibold" }, shortenedId)), /* @__PURE__ */ React.createElement("button", { className: "btn btn-circle btn-xs", onClick: handleCopyClick }, isCopied ? /* @__PURE__ */ React.createElement(AiOutlineCheck, null) : /* @__PURE__ */ React.createElement(AiOutlineCopy, null)));
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "tooltip tooltip-primary", "data-tip": id, children: /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold", children: shortenedId }) }),
+    /* @__PURE__ */ jsx("button", { className: "btn btn-circle btn-xs", onClick: handleCopyClick, children: isCopied ? /* @__PURE__ */ jsx(AiOutlineCheck, {}) : /* @__PURE__ */ jsx(AiOutlineCopy, {}) })
+  ] });
 };
 export {
   ObjectId

package/esm/Pagination.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 import { BiChevronLeft, BiChevronRight, BiDotsHorizontalRounded } from "react-icons/bi";
 const Pagination = ({
@@ -39,52 +40,56 @@ const Pagination = ({
       displayNumbers = ["1", "...", ...pageNumbers.slice(-5)];
     }
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center" }, total > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: clsx(
-        "btn btn-ghost btn-square duration-200",
-        currentPage > 1 ? "opacity-100" : "opacity-0 hover:cursor-default hover:opacity-0"
-      ),
-      onClick: handleLeftClick
-    },
-    /* @__PURE__ */ React.createElement(BiChevronLeft, null)
-  ), displayNumbers.map((pageNum, index) => {
-    if (pageNum === "...") {
-      return /* @__PURE__ */ React.createElement("button", { key: index, className: "btn btn-ghost btn-square text-primary/40" }, /* @__PURE__ */ React.createElement(BiDotsHorizontalRounded, null));
-    }
-    if (Number(pageNum) === currentPage) {
-      return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: total > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: clsx(
+          "btn btn-ghost btn-square duration-200",
+          currentPage > 1 ? "opacity-100" : "opacity-0 hover:cursor-default hover:opacity-0"
+        ),
+        onClick: handleLeftClick,
+        children: /* @__PURE__ */ jsx(BiChevronLeft, {})
+      }
+    ),
+    displayNumbers.map((pageNum, index) => {
+      if (pageNum === "...") {
+        return /* @__PURE__ */ jsx("button", { className: "btn btn-ghost btn-square text-primary/40", children: /* @__PURE__ */ jsx(BiDotsHorizontalRounded, {}) }, index);
+      }
+      if (Number(pageNum) === currentPage) {
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: clsx("btn btn-ghost btn-square text-primary", classNames?.activePageNumClassName),
+            children: pageNum
+          },
+          index
+        );
+      }
+      return /* @__PURE__ */ jsx(
         "button",
         {
-          key: index,
-          className: clsx("btn btn-ghost btn-square text-primary", classNames?.activePageNumClassName)
+          className: clsx("btn btn-ghost btn-square text-primary/40", classNames?.pageNumClassName),
+          onClick: () => {
+            onPageSelect(Number(pageNum));
+          },
+          children: pageNum
         },
-        pageNum
+        index
       );
-    }
-    return /* @__PURE__ */ React.createElement(
+    }),
+    /* @__PURE__ */ jsx(
       "button",
       {
-        key: index,
-        className: clsx("btn btn-ghost btn-square text-primary/40", classNames?.pageNumClassName),
-        onClick: () => {
-          onPageSelect(Number(pageNum));
-        }
-      },
-      pageNum
-    );
-  }), /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: clsx(
-        "btn btn-ghost btn-square duration-200",
-        currentPage < totalPages ? "opacity-100" : "opacity-0 hover:cursor-default hover:opacity-0"
-      ),
-      onClick: handleRightClick
-    },
-    /* @__PURE__ */ React.createElement(BiChevronRight, null)
-  )));
+        className: clsx(
+          "btn btn-ghost btn-square duration-200",
+          currentPage < totalPages ? "opacity-100" : "opacity-0 hover:cursor-default hover:opacity-0"
+        ),
+        onClick: handleRightClick,
+        children: /* @__PURE__ */ jsx(BiChevronRight, {})
+      }
+    )
+  ] }) });
 };
 export {
   Pagination