@akanjs/ui 0.0.149 → 0.0.151

package/cjs/Menu.js

@@ -0,0 +1,215 @@
+"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 Menu_exports = {};
+__export(Menu_exports, {
+  Menu: () => Menu
+});
+module.exports = __toCommonJS(Menu_exports);
+var import_client = require("@akanjs/client");
+var import_store = require("@akanjs/store");
+var import_react = require("react");
+var import_ai = require("react-icons/ai");
+const Menu = ({
+  items,
+  onClick,
+  selectedKeys,
+  labelClassName,
+  defaultSelectedKeys,
+  className = "",
+  ulClassName = "",
+  liClassName,
+  style,
+  mode = "inline",
+  activeStyle = "bordered",
+  inlineCollapsed,
+  onMouseOver,
+  onMouseLeave
+}) => {
+  const [expandedKey, setExpandedKey] = (0, import_react.useState)();
+  const [currentKey, setCurrentKey] = (0, import_react.useState)(defaultSelectedKeys?.[0] ?? null);
+  const modeClassName = mode === "horizontal" ? "menu-horizontal flex-row " : "bg-base-200";
+  const menuRef = (0, import_react.useRef)(null);
+  const LiRefs = (0, import_react.useRef)([]);
+  const overflowLiRef = (0, import_react.useRef)(null);
+  const itemWidthsRef = (0, import_react.useRef)([]);
+  const innerWidth = import_store.st.use.innerWidth();
+  const subMenuClassName = mode === "horizontal" ? `fixed menu-title bottom-0 translate-y-[98%] border-0 rounded-xs shadow-lg bg-base-100 hover:bg-base-100 flex flex-col` : "flex flex-col gap-0 p-0 bg-primary/10 hover:bg-primary/10 overflow-hidden";
+  const subMenuItemClassName = mode === "inline" ? "w-full h-full bg-red-500 btn btn-ghost px-2 m-0 hover:bg-primary/20 btn btn-ghost text-primary-focus font-normal" : "w-full text-center duration-300 whitespace-nowrap btn btn-ghost text-primary-focus font-normal";
+  const activeClassName = activeStyle === "active" ? "bg-primary text-primary-focus" : activeStyle === "bordered" ? " border-b-2 border-white" : activeStyle;
+  const [overflowMenuItems, setOverflowMenuItems] = (0, import_react.useState)([]);
+  (0, import_react.useLayoutEffect)(() => {
+    if (mode !== "horizontal")
+      return;
+    const menu = menuRef.current;
+    if (!menu)
+      return;
+    const liList = LiRefs.current;
+    const widths = [];
+    liList.forEach((li) => {
+      widths.push(li.getBoundingClientRect().width);
+    });
+    itemWidthsRef.current = widths;
+    checkOverflow();
+  }, []);
+  (0, import_react.useEffect)(() => {
+    checkOverflow();
+  }, [innerWidth]);
+  const checkOverflow = (0, import_react.useCallback)(() => {
+    if (mode !== "horizontal" || !itemWidthsRef.current.length)
+      return;
+    const menu = menuRef.current;
+    if (!menu)
+      return;
+    const totalWidth = menu.getBoundingClientRect().width;
+    const widths = itemWidthsRef.current;
+    const overflowItems = [];
+    let accumulatedWidth = 0;
+    for (let i = 0; i < widths.length; i++) {
+      accumulatedWidth += widths[i];
+      if (accumulatedWidth > totalWidth) {
+        if (overflowItems.length === 0 && i - 1 >= 0)
+          overflowItems.push(items[i - 1]);
+        overflowItems.push(items[i]);
+      }
+    }
+    setOverflowMenuItems(overflowItems);
+  }, [items, mode]);
+  const handleOnClick = (item) => {
+    setCurrentKey(item.key);
+    if (mode === "inline" && item.children)
+      setExpandedKey(item.key === expandedKey ? void 0 : item.key);
+    else
+      onClick?.(item);
+  };
+  const checkIsActive = (key) => {
+    if (selectedKeys)
+      return selectedKeys.includes(key);
+    return key === currentKey;
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: menuRef,
+      id: "menu",
+      className: (0, import_client.clsx)(mode === "horizontal" ? "w-full shrink overflow-hidden" : "w-fit", className)
+    },
+    /* @__PURE__ */ React.createElement(
+      "ul",
+      {
+        className: (0, import_client.clsx)("menu size-full flex-nowrap overflow-y-auto p-0", modeClassName, ulClassName),
+        style: { ...style },
+        onMouseOver,
+        onMouseLeave
+      },
+      items.filter((item) => !overflowMenuItems.some((overflowItem) => overflowItem.key === item.key)).map((item, idx) => {
+        const isOverflowItem = overflowMenuItems.some((overflowItem) => overflowItem.key === item.key);
+        const overflowClassName = isOverflowItem ? "opacity-50" : "";
+        return /* @__PURE__ */ React.createElement(
+          "li",
+          {
+            ref: (el) => {
+              if (el)
+                LiRefs.current[idx] = el;
+            },
+            id: item.key,
+            key: item.key,
+            className: (0, import_client.clsx)("relative m-0 duration-200 hover:opacity-70", overflowClassName, liClassName, {
+              "bg-base-300": activeStyle === "active" && checkIsActive(item.key),
+              "border-base-100 border-b-2": activeStyle === "bordered" && checkIsActive(item.key)
+            }),
+            onClick: () => {
+              if (!isOverflowItem)
+                handleOnClick(item);
+            },
+            onMouseEnter: () => {
+              if (mode === "horizontal" && !isOverflowItem && item.children && expandedKey !== item.key)
+                setExpandedKey(item.key);
+            },
+            onMouseLeave: () => {
+              if (mode === "horizontal" && !isOverflowItem)
+                setExpandedKey(void 0);
+            }
+          },
+          /* @__PURE__ */ React.createElement("div", { className: "flex h-full justify-between rounded-none" }, /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex items-center gap-1", labelClassName?.(checkIsActive(item.key))) }, item.icon, !inlineCollapsed && /* @__PURE__ */ React.createElement("div", { className: "text-base-content whitespace-nowrap" }, item.label)), item.children && mode === "inline" && /* @__PURE__ */ React.createElement(
+            import_ai.AiFillCaretDown,
+            {
+              className: (0, import_client.clsx)(
+                "text-xs transition-transform duration-400",
+                expandedKey === item.key ? "rotate-180" : ""
+              )
+            }
+          )),
+          item.children && expandedKey === item.key && /* @__PURE__ */ React.createElement("div", { className: subMenuClassName }, item.children.map((child) => /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onClick?.(child);
+                setExpandedKey(void 0);
+              },
+              key: child.key,
+              className: subMenuItemClassName
+            },
+            child.label
+          )))
+        );
+      }),
+      overflowMenuItems.length > 0 && mode === "horizontal" && /* @__PURE__ */ React.createElement(OverflowMenu, { overflowItems: overflowMenuItems, onClick })
+    )
+  );
+};
+const OverflowMenu = ({ overflowItems, onClick }) => {
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [expandedKey, setExpandedKey] = (0, import_react.useState)();
+  const handleMouseEnter = () => {
+    setIsOpen(true);
+  };
+  const handleMouseLeave = () => {
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ React.createElement("li", { className: "relative h-full", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, /* @__PURE__ */ React.createElement("div", { className: "flex h-full items-center justify-center rounded-none" }, /* @__PURE__ */ React.createElement(import_ai.AiOutlineEllipsis, null)), isOpen && /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 hover:bg-base-100 fixed -bottom-0 flex translate-y-[98%] flex-col rounded-xs border-0 p-2 shadow-lg" }, overflowItems.map((item) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: item.key,
+      onClick: () => onClick?.(item),
+      className: "btn btn-ghost text-primary-focus relative font-normal whitespace-nowrap",
+      onMouseEnter: () => {
+        if (item.children && expandedKey !== item.key)
+          setExpandedKey(item.key);
+      },
+      onMouseLeave: () => {
+        setExpandedKey(void 0);
+      }
+    },
+    item.label,
+    item.children && expandedKey === item.key && /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 absolute top-0 left-0 -translate-x-full p-4 drop-shadow-sm" }, item.children.map((child) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          onClick?.(child);
+          setExpandedKey(void 0);
+        },
+        key: child.key,
+        className: "btn btn-ghost text-primary-focus flex items-center justify-center text-center font-normal"
+      },
+      child.label
+    )))
+  ))));
+};

package/cjs/Modal.js

@@ -0,0 +1,75 @@
+"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 Modal_exports = {};
+__export(Modal_exports, {
+  Modal: () => Modal,
+  Window: () => Window
+});
+module.exports = __toCommonJS(Modal_exports);
+var RadixDialog = __toESM(require("@radix-ui/react-dialog"));
+var import_bi = require("react-icons/bi");
+var import_Dialog = require("./Dialog");
+const Modal = ({
+  className,
+  title,
+  action,
+  open,
+  onCancel,
+  bodyClassName,
+  children,
+  confirmClose = false
+}) => {
+  return /* @__PURE__ */ React.createElement(import_Dialog.Dialog, { open }, /* @__PURE__ */ React.createElement(import_Dialog.Dialog.Modal, { className, onCancel, bodyClassName, confirmClose }, title ? /* @__PURE__ */ React.createElement(import_Dialog.Dialog.Title, null, title) : null, /* @__PURE__ */ React.createElement(import_Dialog.Dialog.Content, null, children), action ? /* @__PURE__ */ React.createElement(import_Dialog.Dialog.Action, null, action) : null));
+};
+const Window = ({ open, onCancel, title, children }) => {
+  if (!open)
+    return null;
+  return /* @__PURE__ */ React.createElement(RadixDialog.Root, { open }, /* @__PURE__ */ React.createElement(RadixDialog.Portal, null, /* @__PURE__ */ React.createElement(RadixDialog.Overlay, { className: "fixed inset-0 bg-black/40" }), /* @__PURE__ */ React.createElement(
+    RadixDialog.Content,
+    {
+      className: "animate-fadeIn fixed top-1/2 left-1/2 z-[2] w-[90%] min-w-auto -translate-x-1/2 -translate-y-1/2 rounded-[10px] border-[3px] border-black text-black backdrop-blur-lg md:w-fit",
+      style: {
+        background: `rgba(255, 255, 255, 0.3)`,
+        width: "406px"
+      }
+    },
+    /* @__PURE__ */ React.createElement(RadixDialog.Title, { className: "height-[36px] relative overflow-hidden rounded-t-[6px] border-b-2 border-black bg-white/60 text-center" }, /* @__PURE__ */ React.createElement("div", { className: "m-0 text-[22px]" }, title), /* @__PURE__ */ React.createElement(
+      RadixDialog.Close,
+      {
+        onClick: () => {
+          onCancel();
+        },
+        className: "absolute top-0 right-0 flex h-[34px] w-[40px] cursor-pointer items-center justify-center border-l-2 border-black"
+      },
+      /* @__PURE__ */ React.createElement(import_bi.BiX, { className: "text-[32px]" })
+    )),
+    /* @__PURE__ */ React.createElement(RadixDialog.Description, { className: "overflow-y-hidden rounded-b-[10px] p-2" }, children)
+  )));
+};
+Modal.Window = Window;

package/cjs/Model/Edit.js

@@ -0,0 +1,61 @@
+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 Edit_exports = {};
+__export(Edit_exports, {
+  default: () => Edit
+});
+module.exports = __toCommonJS(Edit_exports);
+var import_client = require("@akanjs/client");
+var import_next = require("@akanjs/next");
+var import_ai = require("react-icons/ai");
+var import_EditModal = __toESM(require("./EditModal"));
+var import_EditWrapper = __toESM(require("./EditWrapper"));
+function Edit({
+  className,
+  wrapperClassName,
+  type = "button",
+  children,
+  sliceName,
+  modelId,
+  modal,
+  renderTitle
+}) {
+  const { l } = (0, import_next.usePage)();
+  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("inline", wrapperClassName) }, /* @__PURE__ */ React.createElement(
+    import_EditWrapper.default,
+    {
+      className: (0, import_client.clsx)("flex w-full items-center justify-center gap-2", className),
+      sliceName,
+      modelId,
+      modal
+    },
+    /* @__PURE__ */ React.createElement(import_ai.AiOutlineEdit, null),
+    " ",
+    type === "button" ? l("shared.edit") : null
+  ), /* @__PURE__ */ React.createElement(import_EditModal.default, { renderTitle, sliceName, id: modelId }, children));
+}

package/cjs/Model/EditModal.js

@@ -0,0 +1,255 @@
+"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 EditModal_exports = {};
+__export(EditModal_exports, {
+  default: () => EditModal
+});
+module.exports = __toCommonJS(EditModal_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_signal = require("@akanjs/signal");
+var import_store2 = require("@akanjs/store");
+var import_react = __toESM(require("react"));
+var import_ai = require("react-icons/ai");
+var import_Button = require("../Button");
+var import_Modal = require("../Modal");
+const EditModel = ({
+  type = "modal",
+  sliceName,
+  className,
+  checkSubmit = true,
+  edit,
+  modal,
+  children,
+  loadingWrapper
+}) => {
+  const storeUse = import_store2.st.use;
+  const storeDo = import_store2.st.do;
+  const refName = import_store2.st.slice[sliceName].refName;
+  const [modelName, ModelName] = (0, import_react.useMemo)(() => [(0, import_common.lowerlize)(refName), (0, import_common.capitalize)(refName)], []);
+  const names = (0, import_react.useMemo)(
+    () => ({
+      model: modelName,
+      Model: ModelName,
+      modelForm: `${modelName}Form`,
+      modelFormLoading: `${modelName}FormLoading`,
+      modelModal: `${modelName}Modal`,
+      checkModelSubmitable: `check${ModelName}Submitable`
+    }),
+    []
+  );
+  const modelModal = storeUse[names.modelModal]();
+  const modelForm = storeUse[names.modelForm]();
+  const checkSubmitable = (0, import_next.useDebounce)(() => {
+    storeDo[names.checkModelSubmitable]();
+  });
+  (0, import_react.useEffect)(() => {
+    if (checkSubmit)
+      checkSubmitable();
+  }, [modelModal, modelForm]);
+  const LoadingWrapper = (0, import_react.useMemo)(() => {
+    return loadingWrapper === false ? ({ children: children2, className: className2 }) => children2 : typeof loadingWrapper === "function" ? loadingWrapper : ({ children: children2, className: className2 }) => {
+      const modelFormLoading = storeUse[names.modelFormLoading]();
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)("", className2) }, children2, modelFormLoading ? /* @__PURE__ */ import_react.default.createElement("div", { className: "bg-base-100/50 absolute inset-0 animate-pulse" }) : null);
+    };
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement(LoadingWrapper, { className: (0, import_client.clsx)("w-full", className) }, children);
+};
+function EditModal({
+  type = "modal",
+  sliceName,
+  id,
+  className,
+  disabled,
+  checkSubmit = true,
+  modalClassName,
+  edit,
+  modal,
+  renderTitle,
+  children,
+  submitOption,
+  renderSubmit,
+  loadingWrapper,
+  onSubmit,
+  onCancel
+}) {
+  const { l } = (0, import_next.usePage)();
+  const refName = import_store2.st.slice[sliceName].refName;
+  const storeUse = import_store2.st.use;
+  const storeDo = import_store2.st.do;
+  const storeSel = import_store2.st.sel;
+  const modelEdit = edit?.then ? (0, import_react.use)(edit) : edit;
+  const [modelName, ModelName] = (0, import_react.useMemo)(() => [(0, import_common.lowerlize)(refName), (0, import_common.capitalize)(refName)], []);
+  const names = (0, import_react.useMemo)(
+    () => ({
+      model: modelName,
+      modelForm: `${modelName}Form`,
+      modelFormLoading: `${modelName}FormLoading`,
+      modelModal: `${modelName}Modal`,
+      modelSubmit: `${modelName}Submit`,
+      submitModel: `submit${ModelName}`,
+      resetModel: `reset${ModelName}`,
+      setModelModal: `set${ModelName}Modal`,
+      modelLoading: `${modelName}Loading`,
+      modelViewAt: `${modelName}ViewAt`,
+      newModel: `new${ModelName}`,
+      crystalizeModel: `crystalize${ModelName}`,
+      modelObj: `${modelName}Obj`
+    }),
+    []
+  );
+  const modelModal = storeUse[names.modelModal]();
+  const modelFormId = storeSel(
+    (state) => state[names.modelForm].id
+  );
+  const modelFormLoading = storeUse[names.modelFormLoading]();
+  const isModalOpen = modelModal === (modal ?? "edit") && (modelFormLoading === false || modelFormLoading === id) && (!modelFormId && !id || id === modelFormId);
+  (0, import_react.useEffect)(() => {
+    if (!modelEdit)
+      return;
+    const refName2 = modelEdit.refName;
+    const editType = refName2 && modelEdit[names.modelObj] ? "edit" : "new";
+    const crystalizeModel = import_signal.fetch[names.crystalizeModel];
+    const modelRef = (0, import_constant.getFullModelRef)(modelName);
+    if (editType === "edit") {
+      const crystal = crystalizeModel(modelEdit[names.modelObj]);
+      import_store2.st.set({
+        [names.model]: crystal,
+        [names.modelLoading]: false,
+        [names.modelForm]: (0, import_signal.immerify)(modelRef, crystal),
+        [names.modelFormLoading]: false,
+        [names.modelModal]: modal ?? "edit",
+        [names.modelViewAt]: modelEdit[names.modelViewAt]
+      });
+    } else {
+      const crystal = crystalizeModel(modelEdit);
+      void storeDo[names.newModel](crystal, { modal, setDefault: true, sliceName });
+    }
+    return () => {
+    };
+  }, [modelEdit]);
+  const handleCancel = (0, import_react.useCallback)(() => {
+    const modelForm = import_store2.st.get()[names.modelForm];
+    const form = (0, import_common.deepObjectify)({ ...modelForm });
+    void storeDo[names.setModelModal](null);
+    if (typeof onCancel === "function")
+      onCancel(form);
+    else if (onCancel === "back")
+      import_client.router.back();
+    else if (onCancel === "reset")
+      void storeDo[names.resetModel]();
+    else if (typeof onCancel === "string")
+      import_client.router.replace(onCancel);
+  }, []);
+  const Title = () => {
+    const modelFormLoading2 = storeUse[names.modelFormLoading]();
+    const modelForm = storeUse[names.modelForm]();
+    return modelFormLoading2 ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null) : renderTitle ? typeof renderTitle === "string" ? `${l(`${modelName}.modelName`)}${renderTitle === "default" ? "" : ` - ${modelForm[renderTitle]}`}` : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, renderTitle(modelForm)) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null);
+  };
+  const Submit = (0, import_react.useMemo)(
+    () => renderSubmit === false ? () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null) : typeof renderSubmit === "function" ? () => renderSubmit(storeUse[names.modelForm]()) : () => {
+      const modelSubmit = storeUse[names.modelSubmit]();
+      const handleSubmit = (0, import_react.useCallback)(async ({ onError } = {}) => {
+        await storeDo[names.submitModel]({
+          ...submitOption,
+          sliceName,
+          onError,
+          onSuccess: typeof onSubmit === "function" ? onSubmit : void 0
+        });
+        if (onSubmit === "back")
+          import_client.router.back();
+        else if (onSubmit === "reset")
+          void storeDo[names.resetModel]();
+        else if (typeof onSubmit === "string")
+          import_client.router.replace(onSubmit);
+      }, []);
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_Button.Button,
+        {
+          className: "btn btn-primary w-full gap-2 rounded-2xl",
+          disabled: modelSubmit.disabled || !!disabled,
+          onClick: async (e, { onError }) => {
+            await handleSubmit({ onError });
+          },
+          onSuccess: () => {
+          }
+        },
+        modelFormId ? /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineSave, null) : /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlinePlus, null),
+        l(modelFormId ? "shared.updateModel" : "shared.createModel", {
+          model: l.field(names.model, "modelName")
+        })
+      );
+    },
+    [disabled, modelFormId]
+  );
+  if (type === "modal")
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_Modal.Modal,
+      {
+        open: isModalOpen,
+        onCancel: () => {
+          handleCancel();
+        },
+        className: modalClassName,
+        title: /* @__PURE__ */ import_react.default.createElement(Title, null),
+        action: /* @__PURE__ */ import_react.default.createElement(Submit, null)
+      },
+      isModalOpen ? /* @__PURE__ */ import_react.default.createElement(
+        EditModel,
+        {
+          type,
+          sliceName,
+          className,
+          checkSubmit,
+          edit,
+          modal,
+          loadingWrapper
+        },
+        children
+      ) : null
+    );
+  else if (isModalOpen)
+    return /* @__PURE__ */ import_react.default.createElement(
+      EditModel,
+      {
+        type,
+        sliceName,
+        className,
+        checkSubmit,
+        edit,
+        modal,
+        loadingWrapper
+      },
+      /* @__PURE__ */ import_react.default.createElement(Title, null),
+      children,
+      type === "form" ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-4" }, /* @__PURE__ */ import_react.default.createElement(Submit, null)) : null
+    );
+}

package/cjs/Model/EditWrapper.js

@@ -0,0 +1,48 @@
+"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 EditWrapper_exports = {};
+__export(EditWrapper_exports, {
+  default: () => EditWrapper
+});
+module.exports = __toCommonJS(EditWrapper_exports);
+var import_client = require("@akanjs/client");
+var import_common = require("@akanjs/common");
+var import_store = require("@akanjs/store");
+function EditWrapper({ children, sliceName, modelId, className, modal, resets }) {
+  const refName = import_store.st.slice[sliceName].refName;
+  const modelName = refName;
+  const names = {
+    editModel: `edit${(0, import_common.capitalize)(modelName)}`
+  };
+  const storeDo = import_store.st.do;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: (0, import_client.clsx)("cursor-pointer", className),
+      onClick: (e) => {
+        e.stopPropagation();
+        void storeDo[names.editModel](modelId, { modal });
+        resets?.forEach((reset) => {
+          void storeDo[`reset${(0, import_common.capitalize)(reset)}`]();
+        });
+      }
+    },
+    children
+  );
+}

package/cjs/Model/LoadInit.js

@@ -0,0 +1,27 @@
+"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 LoadInit_exports = {};
+__export(LoadInit_exports, {
+  default: () => LoadInit
+});
+module.exports = __toCommonJS(LoadInit_exports);
+var import_Load = require("../Load");
+function LoadInit({ init }) {
+  return /* @__PURE__ */ React.createElement(import_Load.Load.Units, { init, renderList: () => null, loading: null, renderEmpty: null });
+}