@akanjs/ui 0.0.151 → 0.0.153

package/esm/System/Messages.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 import { msg } from "@akanjs/dictionary";
 import { usePage } from "@akanjs/next";
@@ -49,39 +50,41 @@ const Message = ({ content, type = "info", duration, keyForMessage }) => {
   const iconClassName = type === "loading" ? "text-info" : `text-${type}`;
   const getIcon = (type2) => {
     const icons = {
-      info: /* @__PURE__ */ React.createElement(AiOutlineInfoCircle, { className: clsx("text-2xl", iconClassName) }),
-      success: /* @__PURE__ */ React.createElement(AiOutlineCheckCircle, { className: clsx("text-2xl", iconClassName) }),
-      error: /* @__PURE__ */ React.createElement(BsExclamationCircleFill, { className: clsx("text-2xl", iconClassName) }),
-      warning: /* @__PURE__ */ React.createElement(AiOutlineQuestionCircle, { className: clsx("text-2xl", iconClassName) }),
-      loading: /* @__PURE__ */ React.createElement(AiOutlineLoading3Quarters, { className: clsx("animate-spin text-2xl", iconClassName) })
+      info: /* @__PURE__ */ jsx(AiOutlineInfoCircle, { className: clsx("text-2xl", iconClassName) }),
+      success: /* @__PURE__ */ jsx(AiOutlineCheckCircle, { className: clsx("text-2xl", iconClassName) }),
+      error: /* @__PURE__ */ jsx(BsExclamationCircleFill, { className: clsx("text-2xl", iconClassName) }),
+      warning: /* @__PURE__ */ jsx(AiOutlineQuestionCircle, { className: clsx("text-2xl", iconClassName) }),
+      loading: /* @__PURE__ */ jsx(AiOutlineLoading3Quarters, { className: clsx("animate-spin text-2xl", iconClassName) })
     };
     return icons[type2];
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-state": preBlind,
       className: "animate-zoomIn data-[state=true]:animate-smaller group w-screen px-6 duration-300 md:max-w-[60%]",
       style: {
         paddingTop: pageState.topSafeArea
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: clsx(
-          "typo-body1 text-base-content flex w-full items-center gap-2 rounded-[4px] border px-4 py-2 drop-shadow-lg",
-          {
-            "stroke-base-content bg-primary-content border-[#EEEEEE]": type === "loading" || type === "info",
-            "stroke-success bg-success/80 border-success-border": type === "success",
-            "stroke-error bg-error/80 border-error-border": type === "error",
-            "stroke-warning bg-warning/80 border-warning-border": type === "warning"
-          }
-        )
       },
-      /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 flex size-6 items-center justify-center rounded-full" }, getIcon(type)),
-      /* @__PURE__ */ React.createElement("span", { className: "text-base-100 truncate whitespace-nowrap" }, content)
-    )
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx(
+            "typo-body1 text-base-content flex w-full items-center gap-2 rounded-[4px] border px-4 py-2 drop-shadow-lg",
+            {
+              "stroke-base-content bg-primary-content border-[#EEEEEE]": type === "loading" || type === "info",
+              "stroke-success bg-success/80 border-success-border": type === "success",
+              "stroke-error bg-error/80 border-error-border": type === "error",
+              "stroke-warning bg-warning/80 border-warning-border": type === "warning"
+            }
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "bg-base-100 flex size-6 items-center justify-center rounded-full", children: getIcon(type) }),
+            /* @__PURE__ */ jsx("span", { className: "text-base-100 truncate whitespace-nowrap", children: content })
+          ]
+        }
+      )
+    }
   );
 };
 const Messages = () => {
@@ -133,22 +136,22 @@ const Messages = () => {
   }, []);
   if (!messages.length)
     return null;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       id: "toast",
-      className: "fixed top-0 left-0 z-[100] mt-[var(--safe-area-top)] flex h-fit w-screen flex-col items-center justify-start gap-2 pt-2"
-    },
-    messages.map((message) => /* @__PURE__ */ React.createElement(
-      Message,
-      {
-        content: message.content,
-        type: message.type,
-        duration: message.duration,
-        key: message.key,
-        keyForMessage: message.key
-      }
-    ))
+      className: "fixed top-0 left-0 z-[100] mt-[var(--safe-area-top)] flex h-fit w-screen flex-col items-center justify-start gap-2 pt-2",
+      children: messages.map((message) => /* @__PURE__ */ jsx(
+        Message,
+        {
+          content: message.content,
+          type: message.type,
+          duration: message.duration,
+          keyForMessage: message.key
+        },
+        message.key
+      ))
+    }
   );
 };
 export {

package/esm/System/Reconnect.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { router } from "@akanjs/client";
 import { useInterval } from "@akanjs/next";
 import { fetch } from "@akanjs/signal";
@@ -36,9 +37,30 @@ const Reconnect = ({
       return;
     await reconnect();
   }, 5e3);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, dev ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex h-screen flex-col items-center justify-center" }, /* @__PURE__ */ React.createElement("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md p-5 md:w-1/3" }, /* @__PURE__ */ React.createElement("div", { className: "text-3xl font-bold" }, "Something's wrong!"), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center pt-5" }, /* @__PURE__ */ React.createElement("div", { className: "py-5" }, connectStatus === "disconnected" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "text-[100px] text-gray-500" }, /* @__PURE__ */ React.createElement(TbPlugConnectedX, null))) : connectStatus === "connecting" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "animate-pulse text-[100px] text-gray-500" }, /* @__PURE__ */ React.createElement(TbPlugConnectedX, null))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "animate-pop text-[100px] text-white" }, /* @__PURE__ */ React.createElement(TbPlugConnected, null)))), connectStatus === "connected" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", null, "Connected!"), /* @__PURE__ */ React.createElement("div", { className: "animate-pop" }), /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-500" }, "Redirecting to the previous page in some seconds."))) : connectStatus === "connecting" ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center" }, /* @__PURE__ */ React.createElement("div", null, "Try reconnecting to the server"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, Array.from({ length: DOTS_LENGTH }).map(
-    (_, index) => dots >= index ? /* @__PURE__ */ React.createElement("div", { key: index, className: "visible" }, ".") : /* @__PURE__ */ React.createElement("div", { key: index, className: "invisible" }, ".")
-  ))) : /* @__PURE__ */ React.createElement("div", null, "Server disconnected."))), /* @__PURE__ */ React.createElement("span", { className: "text-center text-sm text-gray-500" }, "*Please check your server status."))) : /* @__PURE__ */ React.createElement("div", { className: "flex h-screen items-center justify-center" }, /* @__PURE__ */ React.createElement("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md py-5 md:w-1/3" }, /* @__PURE__ */ React.createElement("div", { className: "text-3xl font-bold" }, "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC5B4\uC694!"), /* @__PURE__ */ React.createElement(Image, { className: "mt-5", src: "/deadBot.svg", alt: "deadBot", color: "gray", width: 120, height: 120 }), /* @__PURE__ */ React.createElement("div", { className: "text-lg" }, "\uC11C\uBC84\uC5D0 \uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4."), /* @__PURE__ */ React.createElement("div", { className: "text-lg" }, "\uC11C\uBC84\uC5D0 \uC5F0\uACB0\uC744 \uC7AC\uC2DC\uB3C4\uD558\uACE0 \uC788\uC5B4\uC694..."))));
+  return /* @__PURE__ */ jsx(Fragment, { children: dev ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-screen flex-col items-center justify-center", children: [
+    /* @__PURE__ */ jsxs("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md p-5 md:w-1/3", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: "Something's wrong!" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center pt-5", children: [
+        /* @__PURE__ */ jsx("div", { className: "py-5", children: connectStatus === "disconnected" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "text-[100px] text-gray-500", children: /* @__PURE__ */ jsx(TbPlugConnectedX, {}) }) }) : connectStatus === "connecting" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "animate-pulse text-[100px] text-gray-500", children: /* @__PURE__ */ jsx(TbPlugConnectedX, {}) }) }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "animate-pop text-[100px] text-white", children: /* @__PURE__ */ jsx(TbPlugConnected, {}) }) }) }),
+        connectStatus === "connected" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { children: "Connected!" }),
+          /* @__PURE__ */ jsx("div", { className: "animate-pop" }),
+          /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: "Redirecting to the previous page in some seconds." }) })
+        ] }) : connectStatus === "connecting" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center", children: [
+          /* @__PURE__ */ jsx("div", { children: "Try reconnecting to the server" }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center", children: Array.from({ length: DOTS_LENGTH }).map(
+            (_, index) => dots >= index ? /* @__PURE__ */ jsx("div", { className: "visible", children: "." }, index) : /* @__PURE__ */ jsx("div", { className: "invisible", children: "." }, index)
+          ) })
+        ] }) : /* @__PURE__ */ jsx("div", { children: "Server disconnected." })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "text-center text-sm text-gray-500", children: "*Please check your server status." })
+  ] }) }) : /* @__PURE__ */ jsx("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "bg-base-300 flex w-4/5 flex-col items-center justify-center rounded-md py-5 md:w-1/3", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC5B4\uC694!" }),
+    /* @__PURE__ */ jsx(Image, { className: "mt-5", src: "/deadBot.svg", alt: "deadBot", color: "gray", width: 120, height: 120 }),
+    /* @__PURE__ */ jsx("div", { className: "text-lg", children: "\uC11C\uBC84\uC5D0 \uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4." }),
+    /* @__PURE__ */ jsx("div", { className: "text-lg", children: "\uC11C\uBC84\uC5D0 \uC5F0\uACB0\uC744 \uC7AC\uC2DC\uB3C4\uD558\uACE0 \uC788\uC5B4\uC694..." })
+  ] }) }) });
 };
 export {
   Reconnect

package/esm/System/Root.js

@@ -1,10 +1,11 @@
 "use client";
+import { Fragment, jsx } from "react/jsx-runtime";
 import { baseEnv } from "@akanjs/base";
 import { checkDictCoverage } from "@akanjs/dictionary";
 const Root = ({ children, st }) => {
   if (baseEnv.operationMode === "local")
     checkDictCoverage();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  return /* @__PURE__ */ jsx(Fragment, { children });
 };
 export {
   Root

package/esm/System/SSR.js

@@ -1,10 +1,11 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx, router } from "@akanjs/client";
 import { Suspense } from "react";
 import { Load } from "../Load";
 import { ClientBridge, ClientInner, ClientNextBridge, ClientPathWrapper, ClientWrapper } from "./Client";
 import { Common } from "./Common";
 const SSR = () => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null);
+  return /* @__PURE__ */ jsx(Fragment, {});
 };
 const SSRProvider = ({
   className,
@@ -24,7 +25,7 @@ const SSRProvider = ({
   fetchMe,
   fetchSelf
 }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Load.Page,
     {
       of,
@@ -34,7 +35,7 @@ const SSRProvider = ({
           router.init({ type: "next", side: "server", lang, prefix });
         return { lang };
       },
-      render: ({ lang }) => /* @__PURE__ */ React.createElement(
+      render: ({ lang }) => /* @__PURE__ */ jsx(
         Common.Wrapper,
         {
           fetch,
@@ -42,7 +43,7 @@ const SSRProvider = ({
           fetchPing,
           fetchMe,
           fetchSelf,
-          render: ({ mePromise, selfPromise }) => /* @__PURE__ */ React.createElement(
+          render: ({ mePromise, selfPromise }) => /* @__PURE__ */ jsx(
             SSRWrapper,
             {
               className,
@@ -51,19 +52,26 @@ const SSRProvider = ({
               head,
               fonts,
               prefix,
-              layoutStyle
-            },
-            /* @__PURE__ */ React.createElement(ClientWrapper, { theme }, children, /* @__PURE__ */ React.createElement(Suspense, { fallback: null }, /* @__PURE__ */ React.createElement(ClientInner, null)), /* @__PURE__ */ React.createElement(Suspense, { fallback: null }, /* @__PURE__ */ React.createElement(
-              ClientBridge,
-              {
-                env,
-                mePromise,
-                selfPromise,
-                theme,
-                prefix,
-                gaTrackingId
-              }
-            ), /* @__PURE__ */ React.createElement(ClientNextBridge, { lang, prefix })))
+              layoutStyle,
+              children: /* @__PURE__ */ jsxs(ClientWrapper, { theme, children: [
+                children,
+                /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(ClientInner, {}) }),
+                /* @__PURE__ */ jsxs(Suspense, { fallback: null, children: [
+                  /* @__PURE__ */ jsx(
+                    ClientBridge,
+                    {
+                      env,
+                      mePromise,
+                      selfPromise,
+                      theme,
+                      prefix,
+                      gaTrackingId
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(ClientNextBridge, { lang, prefix })
+                ] })
+              ] })
+            }
           )
         }
       )
@@ -80,43 +88,53 @@ const SSRWrapper = ({
   className,
   prefix,
   layoutStyle = "web"
-}) => /* @__PURE__ */ React.createElement("html", { lang, className: `${fonts.map((font) => font.variable).join(" ")} ${className}`, suppressHydrationWarning: true }, /* @__PURE__ */ React.createElement("head", null, head), /* @__PURE__ */ React.createElement("body", { className: "app" }, /* @__PURE__ */ React.createElement("div", { id: "frameRoot", className }, /* @__PURE__ */ React.createElement(ClientPathWrapper, { layoutStyle, prefix }, /* @__PURE__ */ React.createElement("div", { id: "topSafeArea", className: clsx("bg-base-100 fixed inset-x-0 top-0") }), /* @__PURE__ */ React.createElement("div", { id: "pageContainers", className: clsx("isolate") }, /* @__PURE__ */ React.createElement("div", { id: "pageContainer" }, /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    id: "pageContent",
-    className: clsx("bg-base-100 relative isolate", {
-      "w-screen": layoutStyle === "web",
-      "left-1/2 h-screen w-[600px] -translate-x-1/2": layoutStyle === "mobile"
-    })
-  },
-  children
-))), /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    id: "topInsetContainer",
-    className: clsx("bg-base-100 fixed inset-x-0 top-0 isolate", {
-      "left-1/2 w-[600px] -translate-x-1/2": layoutStyle === "mobile",
-      "w-screen": layoutStyle === "web"
-    })
-  },
-  /* @__PURE__ */ React.createElement("div", { id: "topInsetContent", className: clsx("relative isolate size-full") })
-), /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    id: "topLeftActionContainer",
-    className: "aspect-1 absolute top-0 left-0 isolate flex items-center justify-center"
-  }
-), /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    id: "bottomInsetContainer",
-    className: clsx("fixed inset-x-0 bottom-0 isolate", {
-      "left-1/2 w-[600px] -translate-x-1/2": layoutStyle === "mobile",
-      "w-screen": layoutStyle === "web"
-    })
-  },
-  /* @__PURE__ */ React.createElement("div", { id: "bottomInsetContent", className: "isolate size-full" })
-), /* @__PURE__ */ React.createElement("div", { id: "bottomSafeArea", className: "bg-base-100 fixed inset-x-0" })))));
+}) => /* @__PURE__ */ jsxs("html", { lang, className: `${fonts.map((font) => font.variable).join(" ")} ${className}`, suppressHydrationWarning: true, children: [
+  /* @__PURE__ */ jsx("head", { children: head }),
+  /* @__PURE__ */ jsx("body", { className: "app", children: /* @__PURE__ */ jsx("div", { id: "frameRoot", className, children: /* @__PURE__ */ jsxs(ClientPathWrapper, { layoutStyle, prefix, children: [
+    /* @__PURE__ */ jsx("div", { id: "topSafeArea", className: clsx("bg-base-100 fixed inset-x-0 top-0") }),
+    /* @__PURE__ */ jsx("div", { id: "pageContainers", className: clsx("isolate"), children: /* @__PURE__ */ jsx("div", { id: "pageContainer", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: "pageContent",
+        className: clsx("bg-base-100 relative isolate", {
+          "w-screen": layoutStyle === "web",
+          "left-1/2 h-screen w-[600px] -translate-x-1/2": layoutStyle === "mobile"
+        }),
+        children
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: "topInsetContainer",
+        className: clsx("bg-base-100 fixed inset-x-0 top-0 isolate", {
+          "left-1/2 w-[600px] -translate-x-1/2": layoutStyle === "mobile",
+          "w-screen": layoutStyle === "web"
+        }),
+        children: /* @__PURE__ */ jsx("div", { id: "topInsetContent", className: clsx("relative isolate size-full") })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: "topLeftActionContainer",
+        className: "aspect-1 absolute top-0 left-0 isolate flex items-center justify-center"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: "bottomInsetContainer",
+        className: clsx("fixed inset-x-0 bottom-0 isolate", {
+          "left-1/2 w-[600px] -translate-x-1/2": layoutStyle === "mobile",
+          "w-screen": layoutStyle === "web"
+        }),
+        children: /* @__PURE__ */ jsx("div", { id: "bottomInsetContent", className: "isolate size-full" })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { id: "bottomSafeArea", className: "bg-base-100 fixed inset-x-0" })
+  ] }) }) })
+] });
 SSR.Wrapper = SSRWrapper;
 var SSR_default = SSRProvider;
 export {

package/esm/System/SelectLanguage.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { router } from "@akanjs/client";
 import { usePage } from "@akanjs/next";
 import { useState } from "react";
@@ -11,28 +12,31 @@ const languageNames = {
 const SelectLanguage = ({ className, languages = ["en", "ko"] }) => {
   const { l, lang } = usePage();
   const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      id: "select-language",
-      onClick: () => {
-        setOpen(!open);
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: "select-language",
+        onClick: () => {
+          setOpen(!open);
+        },
+        className: "mx-2 my-auto cursor-pointer rounded-3xl border bg-black/50 px-3 text-xs font-light text-white md:mx-4",
+        children: languageNames[lang]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx("div", { className: "absolute top-6 -left-4 w-28 rounded-xl border bg-slate-900/90 py-2 text-center text-white", children: languages.filter((lang2) => !!languageNames[lang2]).map((lang2) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: () => {
+          router.setLang(lang2);
+          setOpen(false);
+        },
+        className: "cursor-pointer py-1 hover:bg-white/20",
+        children: languageNames[lang2]
       },
-      className: "mx-2 my-auto cursor-pointer rounded-3xl border bg-black/50 px-3 text-xs font-light text-white md:mx-4"
-    },
-    languageNames[lang]
-  ), open ? /* @__PURE__ */ React.createElement("div", { className: "absolute top-6 -left-4 w-28 rounded-xl border bg-slate-900/90 py-2 text-center text-white" }, languages.filter((lang2) => !!languageNames[lang2]).map((lang2) => /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      key: lang2,
-      onClick: () => {
-        router.setLang(lang2);
-        setOpen(false);
-      },
-      className: "cursor-pointer py-1 hover:bg-white/20"
-    },
-    languageNames[lang2]
-  ))) : null);
+      lang2
+    )) }) : null
+  ] });
 };
 export {
   SelectLanguage

package/esm/System/ThemeToggle.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { capitalize } from "@akanjs/common";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
@@ -14,7 +15,10 @@ const ThemeToggle = () => {
   if (!mounted) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "form-control" }, /* @__PURE__ */ React.createElement("label", { className: "label cursor-pointer" }, /* @__PURE__ */ React.createElement("span", { className: "label-text mr-2 text-sm whitespace-nowrap" }, capitalize(theme ?? "")), /* @__PURE__ */ React.createElement("input", { type: "checkbox", className: "toggle toggle-sm", checked: theme === "dark", onChange: handleTheme })));
+  return /* @__PURE__ */ jsx("div", { className: "form-control", children: /* @__PURE__ */ jsxs("label", { className: "label cursor-pointer", children: [
+    /* @__PURE__ */ jsx("span", { className: "label-text mr-2 text-sm whitespace-nowrap", children: capitalize(theme ?? "") }),
+    /* @__PURE__ */ jsx("input", { type: "checkbox", className: "toggle toggle-sm", checked: theme === "dark", onChange: handleTheme })
+  ] }) });
 };
 export {
   ThemeToggle

package/esm/System/index.js

@@ -1,3 +1,4 @@
+import { jsx } from "react/jsx-runtime";
 import { baseClientEnv } from "@akanjs/base";
 import { default as CSR } from "./CSR";
 import { DevModeToggle } from "./DevModeToggle";
@@ -8,9 +9,9 @@ import { default as SSR } from "./SSR";
 import { ThemeToggle } from "./ThemeToggle";
 const Provider = (props) => {
   if (baseClientEnv.renderMode === "csr")
-    return /* @__PURE__ */ React.createElement(CSR, { ...props });
+    return /* @__PURE__ */ jsx(CSR, { ...props });
   else
-    return /* @__PURE__ */ React.createElement(SSR, { ...props });
+    return /* @__PURE__ */ jsx(SSR, { ...props });
 };
 const System = {
   Provider,

package/esm/Tab/Menu.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 import { useContext, useEffect } from "react";
 import { TabContext } from "./context";
@@ -24,7 +25,7 @@ const Menu = ({
     if (currentMenu === menu)
       setMenu([...menuSet.current.values()].find((m) => m !== menu) ?? null);
   }, [disabled]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-tip": tooltip,
@@ -41,9 +42,9 @@ const Menu = ({
         setMenu(menu);
         if (scrollToTop)
           window.scrollTo({ top: 0, behavior: "smooth" });
-      }
-    },
-    children
+      },
+      children
+    }
   );
 };
 export {

package/esm/Tab/Menus.js

@@ -1,6 +1,7 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 const Menus = ({ className, children }) => {
-  return /* @__PURE__ */ React.createElement("div", { className }, children);
+  return /* @__PURE__ */ jsx("div", { className, children });
 };
 export {
   Menus

package/esm/Tab/Panel.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 import { useContext, useEffect, useState } from "react";
 import { TabContext } from "./context";
@@ -14,9 +15,9 @@ const Panel = ({ className, menu, children, loading = "eager" }) => {
       setLoaded(currentMenu === menu);
   }, [currentMenu]);
   if (loading === "eager")
-    return /* @__PURE__ */ React.createElement("div", { className: clsx(className, { hidden: currentMenu !== menu }) }, children);
+    return /* @__PURE__ */ jsx("div", { className: clsx(className, { hidden: currentMenu !== menu }), children });
   else
-    return loaded ? /* @__PURE__ */ React.createElement("div", { className: clsx(className, { hidden: currentMenu !== menu }) }, children) : null;
+    return loaded ? /* @__PURE__ */ jsx("div", { className: clsx(className, { hidden: currentMenu !== menu }), children }) : null;
 };
 export {
   Panel

package/esm/Tab/Provider.js

@@ -1,11 +1,12 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 import { useRef, useState } from "react";
 import { TabContext } from "./context";
 const Provider = ({ className, defaultMenu = null, children }) => {
   const menuSet = useRef(/* @__PURE__ */ new Set());
   const [menu, setMenu] = useState(defaultMenu);
-  return /* @__PURE__ */ React.createElement(TabContext.Provider, { value: { defaultMenu, menu, setMenu, menuSet } }, /* @__PURE__ */ React.createElement("div", { "data-menu": menu, className: clsx(className, "group/tab") }, children));
+  return /* @__PURE__ */ jsx(TabContext.Provider, { value: { defaultMenu, menu, setMenu, menuSet }, children: /* @__PURE__ */ jsx("div", { "data-menu": menu, className: clsx(className, "group/tab"), children }) });
 };
 export {
   Provider

package/esm/Tab/index.js

@@ -1,9 +1,10 @@
+import { jsx } from "react/jsx-runtime";
 import { Menu } from "./Menu";
 import { Menus } from "./Menus";
 import { Panel } from "./Panel";
 import { Provider } from "./Provider";
 const Tab = (props) => {
-  return /* @__PURE__ */ React.createElement(Provider, { ...props });
+  return /* @__PURE__ */ jsx(Provider, { ...props });
 };
 Tab.Menu = Menu;
 Tab.Menus = Menus;

package/esm/Table.js

@@ -1,7 +1,8 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 import { st } from "@akanjs/store";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
 import { Empty } from "./Empty";
 import { Pagination } from "./Pagination";
@@ -22,34 +23,42 @@ const Table = ({
   const borderedClassName = bordered ? "border border-gray-200 rounded-xl" : "";
   const responsive = st.use.responsive();
   const renderedColumns = useMemo(() => {
-    return columns.filter((c) => !c.responsive || c.responsive.includes(responsive)).map((column, idx) => /* @__PURE__ */ React.createElement("th", { key: idx, className: "whitespace-nowrap" }, column.title));
+    return columns.filter((c) => !c.responsive || c.responsive.includes(responsive)).map((column, idx) => /* @__PURE__ */ jsx("th", { className: "whitespace-nowrap", children: column.title }, idx));
   }, [columns, responsive]);
   const renderedRows = useMemo(() => {
     return dataSource.map((rowData, rowIndex) => {
-      const renderedCells = columns.filter((c) => !c.responsive || c.responsive.includes(responsive)).map((column, idx) => /* @__PURE__ */ React.createElement(
+      const renderedCells = columns.filter((c) => !c.responsive || c.responsive.includes(responsive)).map((column, idx) => /* @__PURE__ */ jsx(
         "td",
         {
-          key: idx,
           className: clsx(
             "whitespace-nowrap",
             rowClassName ? typeof rowClassName === "string" ? rowClassName : rowClassName(rowData, rowIndex) : ""
           ),
-          ...onRow?.(rowData, rowIndex)
+          ...onRow?.(rowData, rowIndex),
+          children: column.render ? column.render(rowData[column.dataIndex], rowData, rowIndex) : column.dataIndex ? rowData[column.dataIndex] : null
         },
-        column.render ? column.render(rowData[column.dataIndex], rowData, rowIndex) : column.dataIndex ? rowData[column.dataIndex] : null
+        idx
       ));
-      return /* @__PURE__ */ React.createElement("tr", { key: rowIndex }, renderedCells);
+      return /* @__PURE__ */ jsx("tr", { children: renderedCells }, rowIndex);
     });
   }, [columns, dataSource, responsive]);
-  return /* @__PURE__ */ React.createElement("div", { className: clsx("relative w-full", loadingClassName, borderedClassName) }, loading && /* @__PURE__ */ React.createElement("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" }, /* @__PURE__ */ React.createElement(AiOutlineLoading3Quarters, { className: "animate-spin text-3xl" })), /* @__PURE__ */ React.createElement("table", { className: clsx("table w-full", sizeClassName) }, showHeader === true || Array.isArray(showHeader) && showHeader.includes(responsive) ? /* @__PURE__ */ React.createElement("thead", { className: "normal-case" }, /* @__PURE__ */ React.createElement("tr", null, renderedColumns)) : null, !!dataSource.length && /* @__PURE__ */ React.createElement("tbody", null, renderedRows)), !dataSource.length && /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement(Empty, null)), pagination && /* @__PURE__ */ React.createElement("div", { className: "mt-3 flex justify-center" }, /* @__PURE__ */ React.createElement(
-    Pagination,
-    {
-      currentPage: pagination.currentPage,
-      total: pagination.total,
-      onPageSelect: pagination.onPageSelect,
-      itemsPerPage: pagination.itemsPerPage
-    }
-  )));
+  return /* @__PURE__ */ jsxs("div", { className: clsx("relative w-full", loadingClassName, borderedClassName), children: [
+    loading && /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(AiOutlineLoading3Quarters, { className: "animate-spin text-3xl" }) }),
+    /* @__PURE__ */ jsxs("table", { className: clsx("table w-full", sizeClassName), children: [
+      showHeader === true || Array.isArray(showHeader) && showHeader.includes(responsive) ? /* @__PURE__ */ jsx("thead", { className: "normal-case", children: /* @__PURE__ */ jsx("tr", { children: renderedColumns }) }) : null,
+      !!dataSource.length && /* @__PURE__ */ jsx("tbody", { children: renderedRows })
+    ] }),
+    !dataSource.length && /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(Empty, {}) }),
+    pagination && /* @__PURE__ */ jsx("div", { className: "mt-3 flex justify-center", children: /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        currentPage: pagination.currentPage,
+        total: pagination.total,
+        onPageSelect: pagination.onPageSelect,
+        itemsPerPage: pagination.itemsPerPage
+      }
+    ) })
+  ] });
 };
 export {
   Table