@akanjs/ui 0.0.149 → 0.0.151

package/cjs/Data/Item.js

@@ -0,0 +1,204 @@
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Item_exports = {};
+__export(Item_exports, {
+  Action: () => Action,
+  convToAntdColumn: () => convToAntdColumn,
+  default: () => Item
+});
+module.exports = __toCommonJS(Item_exports);
+var import_client = require("@akanjs/client");
+var import_common = require("@akanjs/common");
+var import_next = require("@akanjs/next");
+var import_store = require("@akanjs/store");
+var import_react = __toESM(require("react"));
+var import_ai = require("react-icons/ai");
+var import_Dropdown = require("../Dropdown");
+var import_ObjectId = require("../ObjectId");
+var import_Popconfirm = require("../Popconfirm");
+var import_RecentTime = require("../RecentTime");
+const convToAntdColumn = (column) => {
+  if (typeof column !== "string")
+    return {
+      key: column.key,
+      dataIndex: column.key,
+      title: (0, import_common.capitalize)(column.key),
+      responsive: column.responsive ? ["xs", "sm", "md", "xl"] : void 0,
+      render: column.render
+    };
+  else if ([
+    "createdAt",
+    "updatedAt",
+    "at",
+    "At",
+    "lastLoginAt",
+    "openAt",
+    "closeAt",
+    "announceAt",
+    "startAt",
+    "logtime"
+  ].includes(column))
+    return {
+      key: column,
+      dataIndex: column,
+      title: (0, import_common.capitalize)(column),
+      render: (date) => /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_RecentTime.RecentTime, { date }))
+    };
+  else if (column.includes("status") || column.includes("Status"))
+    return {
+      key: column,
+      dataIndex: column,
+      title: (0, import_common.capitalize)(column),
+      render: (status) => /* @__PURE__ */ import_react.default.createElement(StatusTag, { status })
+    };
+  else if (column.includes("role") || column.includes("Role"))
+    return {
+      key: column,
+      dataIndex: column,
+      title: (0, import_common.capitalize)(column),
+      render: (role) => /* @__PURE__ */ import_react.default.createElement(RoleTags, { role })
+    };
+  else
+    return { key: column, dataIndex: column, title: (0, import_common.capitalize)(column) };
+};
+function Item({
+  className,
+  model,
+  sliceName,
+  onClick,
+  title,
+  actions = [],
+  columns = [],
+  children
+}) {
+  const { l } = (0, import_next.usePage)();
+  const strActions = actions.filter((action) => typeof action === "string").map((action, idx) => /* @__PURE__ */ import_react.default.createElement(Action, { key: idx, action, outline: false, model, sliceName }));
+  const customActions = actions.filter((action) => typeof action !== "string").map((action, idx) => ({
+    key: idx,
+    label: typeof action !== "string" ? action.render() : null
+  }));
+  const extraCols = columns.filter((column) => {
+    const key = typeof column === "string" ? column : column.key;
+    return !["id", "status", "createdAt"].includes(key);
+  }).map((column, idx) => {
+    const key = typeof column === "string" ? column : column.key;
+    const title2 = typeof column !== "string" && column.title ? column.title : l.field(sliceName, key);
+    const render = convToAntdColumn(column).render ?? ((v, m, i) => JSON.stringify(v, null, 2));
+    const modelKeyLength = model[key]?.length;
+    if (convToAntdColumn(column).render) {
+      return /* @__PURE__ */ import_react.default.createElement("div", { key: idx, className: "flex-wrap overflow-hidden text-xs" }, !!modelKeyLength && /* @__PURE__ */ import_react.default.createElement("span", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "font-semibold whitespace-nowrap" }, title2), /* @__PURE__ */ import_react.default.createElement("span", { className: "text-sm" }, render(model[key], model, idx))));
+    }
+    return /* @__PURE__ */ import_react.default.createElement("div", { key: idx, className: "flex-wrap overflow-hidden text-xs" }, !!modelKeyLength && /* @__PURE__ */ import_react.default.createElement("span", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "font-semibold whitespace-nowrap" }, title2), /* @__PURE__ */ import_react.default.createElement("span", { className: "text-sm" }, model[key])));
+  });
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, children ? /* @__PURE__ */ import_react.default.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "relative size-full", onClick }, children, /* @__PURE__ */ import_react.default.createElement("div", { className: "absolute inset-0" }))) : title ? /* @__PURE__ */ import_react.default.createElement("div", { className: "font-bold" }, title) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: "bg-primary/5 mt-2 h-full rounded-lg p-2" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "mb-2 flex justify-between" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "[&_.badge]:badge-xs [&_.badge]:p-2" }, columns.find((c) => c === "id") && /* @__PURE__ */ import_react.default.createElement(import_ObjectId.ObjectId, { id: model.id })), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-end justify-center gap-2" }, columns.find((c) => c === "createdAt") && /* @__PURE__ */ import_react.default.createElement(import_RecentTime.RecentTime, { date: model.createdAt, className: "text-xs opacity-60" }), columns.find((c) => c === "status") && /* @__PURE__ */ import_react.default.createElement(StatusTag, { status: model.status, className: "badge-xs mr-0 p-2" }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col gap-1" }, extraCols), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex w-full justify-around" }, strActions.map((action, idx) => /* @__PURE__ */ import_react.default.createElement("div", { className: "", key: idx }, action)), customActions.length ? /* @__PURE__ */ import_react.default.createElement(
+    import_Dropdown.Dropdown,
+    {
+      buttonClassName: "m-1 text-center btn btn-square btn-ghost btn-sm ",
+      value: /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineMore, null),
+      content: customActions.map((action) => /* @__PURE__ */ import_react.default.createElement("div", { key: action.key }, action.label))
+    }
+  ) : null)));
+}
+const Action = ({
+  action,
+  model,
+  sliceName,
+  outline = true
+}) => {
+  const { l } = (0, import_next.usePage)();
+  const storeDo = import_store.st.do;
+  const storeGet = import_store.st.get;
+  const refName = import_store.st.slice[sliceName].refName;
+  const [modelName, modelClassName] = [refName, (0, import_common.capitalize)(refName)];
+  const names = {
+    model: modelName,
+    editModel: `edit${modelClassName}`,
+    viewModel: `view${modelClassName}`,
+    removeModel: `remove${modelClassName}`
+  };
+  const namesOfSlice = {
+    editModel: sliceName.replace(names.model, names.editModel),
+    viewModel: sliceName.replace(names.model, names.viewModel),
+    removeModel: sliceName.replace(names.model, names.removeModel)
+  };
+  return action === "edit" ? /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      className: `btn btn-square btn-ghost btn-sm m-1 text-center ${outline && "btn-outline border-dashed"}`,
+      onClick: () => void storeDo[namesOfSlice.editModel](model.id)
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineEdit, { key: action })
+  ) : action === "view" ? /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      className: `btn btn-square btn-ghost btn-sm m-1 text-center ${outline && "btn-outline border-dashed"}`,
+      onClick: () => void storeDo[namesOfSlice.viewModel](model.id)
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineEye, { key: action })
+  ) : action === "remove" ? /* @__PURE__ */ import_react.default.createElement(
+    import_Popconfirm.Popconfirm,
+    {
+      key: action,
+      title: l("shared.removeMsg"),
+      onConfirm: () => void storeDo[namesOfSlice.removeModel](model.id)
+    },
+    /* @__PURE__ */ import_react.default.createElement("button", { className: `btn btn-square btn-ghost btn-sm m-1 text-center ${outline && "btn-outline border-dashed"}` }, /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineDelete, null))
+  ) : action.render();
+};
+const statusColors = {
+  active: "badge-info badge-outline",
+  applied: "badge-warning",
+  approved: "badge-success",
+  denied: "badge-error badge-outline",
+  failed: "badge-error badge-outline",
+  restricted: "badge-error",
+  paused: "badge-outline",
+  running: "badge-warning badge-outline",
+  break: "badge-accent badge-outline",
+  rejected: "badge-error badge-outline",
+  hidden: "badge-outline",
+  inProgress: "badge-accent",
+  resolved: "badge-success badge-outline",
+  finished: "badge-secondary"
+};
+const StatusTag = ({ status, className }) => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)(`badge mr-1 p-3 ${statusColors[status] ?? "badge-outline"}`, className) }, status);
+};
+Item.StatusTag = StatusTag;
+const roleColors = {
+  user: "badge-success",
+  business: "badge-warning",
+  admin: "badge-error badge-outline",
+  superAdmin: "badge-error",
+  root: "badge-primary"
+};
+const RoleTags = ({ role }) => {
+  return Array.isArray(role) ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, role.map((role2) => /* @__PURE__ */ import_react.default.createElement("div", { className: `badge mr-1 ${roleColors[role2]}`, key: role2 }, role2))) : /* @__PURE__ */ import_react.default.createElement("div", { className: "badge mr-1", style: { backgroundColor: roleColors[role] } }, role);
+};
+Item.RoleTags = RoleTags;

package/cjs/Data/ListContainer.js

@@ -0,0 +1,251 @@
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ListContainer_exports = {};
+__export(ListContainer_exports, {
+  default: () => ListContainer
+});
+module.exports = __toCommonJS(ListContainer_exports);
+var import_client = require("@akanjs/client");
+var import_common = require("@akanjs/common");
+var import_constant = require("@akanjs/constant");
+var import_next = require("@akanjs/next");
+var import_store = require("@akanjs/store");
+var import_file_saver = require("file-saver");
+var import_react = __toESM(require("react"));
+var import_ai = require("react-icons/ai");
+var import_Dropdown = require("../Dropdown");
+var import_Loading = require("../Loading");
+var import_Model = require("../Model");
+var import_Select = require("../Select");
+var import_CardList = __toESM(require("./CardList"));
+var import_QueryMaker = __toESM(require("./QueryMaker"));
+var import_TableList = __toESM(require("./TableList"));
+function ListContainer({
+  className,
+  cardListClassName,
+  type = "card",
+  query,
+  init,
+  create = true,
+  sliceName,
+  title,
+  sort,
+  columns = ["id", "createdAt", "updatedAt"],
+  actions,
+  tools = [],
+  renderDashboard,
+  renderItem,
+  renderTemplate,
+  renderTitle = (model) => model.id ? /* @__PURE__ */ import_react.default.createElement("h2", { className: "flex items-center justify-center py-3 text-lg sm:justify-start md:text-2xl" }, sliceName, " - ", model.id) : /* @__PURE__ */ import_react.default.createElement("h2", { className: "flex items-center justify-center py-3 text-lg sm:justify-start md:text-2xl" }, "New ", sliceName),
+  renderView,
+  renderQueryMaker = () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null),
+  renderInsight,
+  renderLoading
+}) {
+  const { l } = (0, import_next.usePage)();
+  const storeUse = import_store.st.use;
+  const storeDo = import_store.st.do;
+  const storeGet = import_store.st.get;
+  const refName = import_store.st.slice[sliceName].refName;
+  const [modelName, modelClassName] = [refName, (0, import_common.capitalize)(refName)];
+  if (refName !== sliceName)
+    throw new Error("ListContainer: sliceName must be the same as refName");
+  const names = {
+    model: modelName,
+    modelList: `${modelName}List`,
+    modelListLoading: `${modelName}ListLoading`,
+    modelInsight: `${modelName}Insight`,
+    limitOfModel: `limitOf${modelClassName}`,
+    sortOfModel: `sortOf${modelClassName}`,
+    initModel: `init${modelClassName}`,
+    newModel: `new${modelClassName}`,
+    refreshModel: `refresh${modelClassName}`,
+    setSortOfModel: `setSortOf${modelClassName}`,
+    setLimitOfModel: `setLimitOf${modelClassName}`
+  };
+  const namesOfSlice = {
+    modelList: sliceName.replace(names.model, names.modelList),
+    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+    modelInsight: sliceName.replace(names.model, names.modelInsight),
+    limitOfModel: sliceName.replace(names.model, names.limitOfModel),
+    sortOfModel: sliceName.replace(names.model, names.sortOfModel),
+    initModel: sliceName.replace(names.model, names.initModel),
+    newModel: sliceName.replace(names.model, names.newModel),
+    refreshModel: sliceName.replace(names.model, names.refreshModel),
+    setSortOfModel: sliceName.replace(names.model, names.setSortOfModel),
+    setLimitOfModel: sliceName.replace(names.model, names.setLimitOfModel)
+  };
+  const cnst = (0, import_constant.getCnstMeta)(sliceName);
+  const limitOfModel = storeUse[namesOfSlice.limitOfModel]();
+  const sortOfModel = storeUse[namesOfSlice.sortOfModel]();
+  const ModelDashboard = () => {
+    const summary = storeUse.summary();
+    const summaryLoading = storeUse.summaryLoading();
+    const Stat = renderDashboard;
+    if (!Stat)
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null);
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "mb-4" }, !summary || summaryLoading ? /* @__PURE__ */ import_react.default.createElement(import_Loading.Loading.Skeleton, { active: true }) : /* @__PURE__ */ import_react.default.createElement(Stat, { summary, hidePresents: true }));
+  };
+  const RenderQueryMaker = renderQueryMaker;
+  const RenderInsight = () => {
+    const modelInsight = storeUse[namesOfSlice.modelInsight]();
+    return renderInsight ? renderInsight({ insight: modelInsight }) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null);
+  };
+  const RenderTemplate = renderTemplate;
+  const RenderTools = () => {
+    const modelList = storeUse[namesOfSlice.modelList]();
+    const modelListLoading = storeUse[namesOfSlice.modelListLoading]();
+    const toolList = modelListLoading ? [] : [
+      ...Array.isArray(tools) ? tools : tools([...modelList]),
+      {
+        render: () => /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: "btn btn-sm btn-ghost flex flex-nowrap justify-start gap-2",
+            onClick: () => {
+              const header = columns.map((column) => {
+                if (typeof column === "string")
+                  return l.field(sliceName, column);
+                else if (column.title)
+                  return column.title;
+                else
+                  return l.field(sliceName, column.key);
+              }).join("	");
+              const body = modelList.map((model) => {
+                const line = columns.map((column) => {
+                  if (typeof column === "string")
+                    return model[column];
+                  else if (column.value)
+                    return column.value(model[column.key], model);
+                  else if (column.render)
+                    return column.render(model[column.key], model);
+                  else
+                    return model[column.key];
+                }).join("	");
+                return line;
+              }).join("\n");
+              const blob = new Blob([`${header}
+${body}`], { type: "text/csv;charset=utf-8" });
+              (0, import_file_saver.saveAs)(blob, `${sliceName}.csv`);
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineFileExcel, null),
+          /* @__PURE__ */ import_react.default.createElement("span", null, "Export CSV")
+        )
+      },
+      {
+        render: () => /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: "btn btn-sm btn-ghost flex flex-nowrap justify-start gap-2",
+            onClick: () => {
+              const json = JSON.stringify((0, import_common.deepObjectify)([...modelList], { serializable: true }));
+              const blob = new Blob([json], { type: "application/json" });
+              (0, import_file_saver.saveAs)(blob, `${sliceName}.json`);
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineFileProtect, null),
+          /* @__PURE__ */ import_react.default.createElement("span", null, "Export JSON")
+        )
+      }
+    ];
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_Dropdown.Dropdown,
+      {
+        buttonClassName: `btn btn-primary btn-sm ${renderTemplate && create ? "rounded-l-none" : ""}`,
+        value: /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineEllipsis, null),
+        content: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, toolList.map((tool, idx) => /* @__PURE__ */ import_react.default.createElement(tool.render, { key: idx })))
+      }
+    );
+  };
+  const RenderSort = () => {
+    const sortMap = (0, import_constant.getFilterSortMap)(cnst.Filter);
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_Select.Select,
+      {
+        value: sortOfModel,
+        options: Object.keys(sortMap).map((sortKey) => ({
+          label: l.field(sliceName, sortKey),
+          value: sortKey
+        })),
+        onChange: (sortKey) => void storeDo[namesOfSlice.setSortOfModel](sortKey)
+      }
+    );
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)("m-4", className) }, /* @__PURE__ */ import_react.default.createElement("div", { className: "mb-3 flex flex-wrap justify-between" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex pb-1" }, /* @__PURE__ */ import_react.default.createElement("p", { className: "prose text-lg" }, title ?? l.field(sliceName, "modelName")), /* @__PURE__ */ import_react.default.createElement("div", { className: "ml-3 flex items-center" }, renderTemplate && create ? /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      onClick: () => void storeDo[namesOfSlice.newModel](),
+      className: `btn btn-sm btn-primary mr-[0.5px] rounded-r-none`
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlinePlus, null),
+    " ",
+    l("shared.new")
+  ) : null, /* @__PURE__ */ import_react.default.createElement(RenderTools, null))), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex" }, /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      className: "btn btn-primary btn-sm btn-square mx-1",
+      onClick: () => void storeDo[namesOfSlice.refreshModel]()
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineRedo, { className: "mx-2" })
+  ), /* @__PURE__ */ import_react.default.createElement(RenderSort, null), /* @__PURE__ */ import_react.default.createElement(
+    import_Select.Select,
+    {
+      value: limitOfModel,
+      options: [10, 20, 50, 100].map((limit) => ({
+        label: `${limit} ${l("shared.perPage")}`,
+        value: limit
+      })),
+      onChange: (limit) => void storeDo[namesOfSlice.setLimitOfModel](limit)
+    }
+  ))), !query && /* @__PURE__ */ import_react.default.createElement(ModelDashboard, null), /* @__PURE__ */ import_react.default.createElement(import_QueryMaker.default, { className: "mb-4", sliceName, query }), /* @__PURE__ */ import_react.default.createElement(RenderQueryMaker, null), /* @__PURE__ */ import_react.default.createElement(RenderInsight, null), type === "card" ? /* @__PURE__ */ import_react.default.createElement(
+    import_CardList.default,
+    {
+      sliceName,
+      renderItem: renderItem ?? (({ [sliceName]: model }) => /* @__PURE__ */ import_react.default.createElement("div", { key: model.id }, model.id)),
+      renderLoading,
+      renderTemplate,
+      renderView,
+      renderTitle,
+      columns,
+      actions,
+      cardListClassName
+    }
+  ) : /* @__PURE__ */ import_react.default.createElement(
+    import_TableList.default,
+    {
+      columns,
+      sliceName,
+      actions,
+      renderTemplate,
+      renderTitle,
+      renderView
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(import_Model.Model.EditModal, { sliceName, renderTitle }, RenderTemplate ? /* @__PURE__ */ import_react.default.createElement(RenderTemplate, null) : null));
+}

package/cjs/Data/Pagination.js

@@ -0,0 +1,64 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Pagination_exports = {};
+__export(Pagination_exports, {
+  default: () => Pagination
+});
+module.exports = __toCommonJS(Pagination_exports);
+var import_client = require("@akanjs/client");
+var import_common = require("@akanjs/common");
+var import_store = require("@akanjs/store");
+var import_Pagination = require("../Pagination");
+function Pagination({ className, sliceName }) {
+  const storeUse = import_store.st.use;
+  const storeDo = import_store.st.do;
+  const storeGet = import_store.st.get;
+  const refName = import_store.st.slice[sliceName].refName;
+  const [modelName, modelClassName] = [refName, (0, import_common.capitalize)(refName)];
+  const names = {
+    model: modelName,
+    modelInsight: `${modelName}Insight`,
+    limitOfModel: `limitOf${modelClassName}`,
+    lastPageOfModel: `lastPageOf${modelClassName}`,
+    pageOfModel: `pageOf${modelClassName}`,
+    setPageOfModel: `setPageOf${modelClassName}`
+  };
+  const namesOfSlice = {
+    modelInsight: sliceName.replace(names.model, names.modelInsight),
+    limitOfModel: sliceName.replace(names.model, names.limitOfModel),
+    lastPageOfModel: sliceName.replace(names.model, names.lastPageOfModel),
+    pageOfModel: sliceName.replace(names.model, names.pageOfModel),
+    setPageOfModel: sliceName.replace(names.model, names.setPageOfModel)
+  };
+  const modelInsight = storeUse[namesOfSlice.modelInsight]();
+  const limitOfModel = storeUse[namesOfSlice.limitOfModel]();
+  const lastPageOfModel = storeUse[namesOfSlice.lastPageOfModel]();
+  const pageOfModel = storeUse[namesOfSlice.pageOfModel]();
+  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("mt-4 flex flex-wrap justify-center", className) }, /* @__PURE__ */ React.createElement(
+    import_Pagination.Pagination,
+    {
+      currentPage: pageOfModel,
+      total: modelInsight.count,
+      onPageSelect: (page) => {
+        void storeDo[namesOfSlice.setPageOfModel](page);
+      },
+      itemsPerPage: limitOfModel || modelInsight.count
+    }
+  ));
+}