dn-react-router-toolkit 0.7.7 → 0.7.9

package/dist/crud/crud_page.js

@@ -1,9 +1,7 @@
 "use strict";
-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)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   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);
 
 // src/crud/crud_page.tsx
@@ -39,7 +29,6 @@ var import_react_router7 = require("react-router");
 var import_react_router = require("react-router");
 var import_react_store_input = require("react-store-input");
 var import_react = require("react");
-var import_react2 = __toESM(require("react"));
 
 // src/crud/serialize.ts
 function serialize(value) {
@@ -100,6 +89,7 @@ function serialize(value) {
 }
 
 // src/crud/crud_form_provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var FormContext = (0, import_react.createContext)({});
 function useFormContext() {
   return (0, import_react.useContext)(FormContext);
@@ -180,165 +170,17 @@ function CrudFormProvider({
     delete: deleteItem,
     columns
   };
-  return /* @__PURE__ */ import_react2.default.createElement(FormContext.Provider, { value }, children);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormContext.Provider, { value, children });
 }
 
 // src/table/page.tsx
 var import_react_router4 = require("react-router");
-
-// node_modules/react-icons/lib/iconBase.mjs
-var import_react4 = __toESM(require("react"), 1);
-
-// node_modules/react-icons/lib/iconContext.mjs
-var import_react3 = __toESM(require("react"), 1);
-var DefaultContext = {
-  color: void 0,
-  size: void 0,
-  className: void 0,
-  style: void 0,
-  attr: void 0
-};
-var IconContext = import_react3.default.createContext && /* @__PURE__ */ import_react3.default.createContext(DefaultContext);
-
-// node_modules/react-icons/lib/iconBase.mjs
-var _excluded = ["attr", "size", "title"];
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  for (var key in source) {
-    if (Object.prototype.hasOwnProperty.call(source, key)) {
-      if (excluded.indexOf(key) >= 0) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function Tree2Element(tree) {
-  return tree && tree.map((node, i) => /* @__PURE__ */ import_react4.default.createElement(node.tag, _objectSpread({
-    key: i
-  }, node.attr), Tree2Element(node.child)));
-}
-function GenIcon(data) {
-  return (props) => /* @__PURE__ */ import_react4.default.createElement(IconBase, _extends({
-    attr: _objectSpread({}, data.attr)
-  }, props), Tree2Element(data.child));
-}
-function IconBase(props) {
-  var elem = (conf) => {
-    var {
-      attr,
-      size,
-      title
-    } = props, svgProps = _objectWithoutProperties(props, _excluded);
-    var computedSize = size || conf.size || "1em";
-    var className;
-    if (conf.className) className = conf.className;
-    if (props.className) className = (className ? className + " " : "") + props.className;
-    return /* @__PURE__ */ import_react4.default.createElement("svg", _extends({
-      stroke: "currentColor",
-      fill: "currentColor",
-      strokeWidth: "0"
-    }, conf.attr, attr, svgProps, {
-      className,
-      style: _objectSpread(_objectSpread({
-        color: props.color || conf.color
-      }, conf.style), props.style),
-      height: computedSize,
-      width: computedSize,
-      xmlns: "http://www.w3.org/2000/svg"
-    }), title && /* @__PURE__ */ import_react4.default.createElement("title", null, title), props.children);
-  };
-  return IconContext !== void 0 ? /* @__PURE__ */ import_react4.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
-}
-
-// node_modules/react-icons/go/index.mjs
-function GoArrowDown(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M4.97 13.22a.75.75 0 0 1 1.06 0L11 18.19V3.75a.75.75 0 0 1 1.5 0v14.44l4.97-4.97a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734l-6.25 6.25a.75.75 0 0 1-1.06 0l-6.25-6.25a.75.75 0 0 1 0-1.06Z" }, "child": [] }] })(props);
-}
-function GoArrowUp(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M18.655 10.405a.75.75 0 0 1-1.06 0l-4.97-4.97v14.44a.75.75 0 0 1-1.5 0V5.435l-4.97 4.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l6.25-6.25a.75.75 0 0 1 1.06 0l6.25 6.25a.75.75 0 0 1 0 1.06Z" }, "child": [] }] })(props);
-}
-function GoSearch(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M10.25 2a8.25 8.25 0 0 1 6.34 13.53l5.69 5.69a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-5.69-5.69A8.25 8.25 0 1 1 10.25 2ZM3.5 10.25a6.75 6.75 0 1 0 13.5 0 6.75 6.75 0 0 0-13.5 0Z" }, "child": [] }] })(props);
-}
+var import_go2 = require("react-icons/go");
 
 // src/table/buttons.tsx
 var import_utils = require("dn-react-toolkit/utils");
 var import_react_router2 = require("react-router");
-var import_react5 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function TablePageButtons({
   MAX_PAGES_TO_SHOW,
   total,
@@ -351,63 +193,59 @@ function TablePageButtons({
   const currentPage = Math.floor(offset / limit) + 1;
   const startButton = (Math.ceil(currentPage / MAX_PAGES_TO_SHOW) - 1) * MAX_PAGES_TO_SHOW;
   const endButton = Math.min(startButton + MAX_PAGES_TO_SHOW - 1, pages);
-  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, pages > 1 && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex justify-center items-center my-8 gap-4 text-neutral-400" }, startButton > 1 && /* @__PURE__ */ import_react5.default.createElement(
-    import_react_router2.Link,
-    {
-      to: (() => {
-        searchParams.set(
-          "offset",
-          String((startButton - 1) * limit)
-        );
-        return `${pathname}?${searchParams.toString()}`;
-      })(),
-      className: "w-10 block text-center transition-colors hover:text-primary"
-    },
-    "\uC774\uC804"
-  ), Array.from({
-    length: Math.min(
-      MAX_PAGES_TO_SHOW,
-      pages - startButton
-    )
-  }).map((_, index) => {
-    return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: pages > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex justify-center items-center my-8 gap-4 text-neutral-400", children: [
+    startButton > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_react_router2.Link,
       {
-        key: index,
         to: (() => {
-          searchParams.set(
-            "offset",
-            String((startButton + index) * limit)
-          );
+          searchParams.set("offset", String((startButton - 1) * limit));
           return `${pathname}?${searchParams.toString()}`;
         })(),
-        className: (0, import_utils.cn)(
-          "w-6 block text-center transition-colors",
-          currentPage === startButton + index + 1 ? "font-bold text-primary" : "hover:text-primary"
-        )
-      },
-      startButton + index + 1
-    );
-  }), endButton < pages && /* @__PURE__ */ import_react5.default.createElement(
-    import_react_router2.Link,
-    {
-      to: (() => {
-        searchParams.set(
-          "offset",
-          String((endButton + 1) * limit)
-        );
-        return `${pathname}?${searchParams.toString()}`;
-      })(),
-      className: "w-10 block text-center transition-colors hover:text-primary"
-    },
-    "\uB2E4\uC74C"
-  )));
+        className: "w-10 block text-center transition-colors hover:text-primary",
+        children: "\uC774\uC804"
+      }
+    ),
+    Array.from({
+      length: Math.min(MAX_PAGES_TO_SHOW, pages - startButton)
+    }).map((_, index) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_router2.Link,
+        {
+          to: (() => {
+            searchParams.set(
+              "offset",
+              String((startButton + index) * limit)
+            );
+            return `${pathname}?${searchParams.toString()}`;
+          })(),
+          className: (0, import_utils.cn)(
+            "w-6 block text-center transition-colors",
+            currentPage === startButton + index + 1 ? "font-bold text-primary" : "hover:text-primary"
+          ),
+          children: startButton + index + 1
+        },
+        index
+      );
+    }),
+    endButton < pages && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react_router2.Link,
+      {
+        to: (() => {
+          searchParams.set("offset", String((endButton + 1) * limit));
+          return `${pathname}?${searchParams.toString()}`;
+        })(),
+        className: "w-10 block text-center transition-colors hover:text-primary",
+        children: "\uB2E4\uC74C"
+      }
+    )
+  ] }) });
 }
 
 // src/table/table.tsx
 var import_utils2 = require("dn-react-toolkit/utils");
+var import_go = require("react-icons/go");
 var import_react_router3 = require("react-router");
-var import_react6 = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function Table({
   className = "min-w-full whitespace-nowrap",
   data,
@@ -422,95 +260,92 @@ function Table({
   const keys = Object.entries(columns).filter((entry) => entry[1]).map(([key]) => key);
   const sortedArray = [...data];
   const [_, setSearchParams] = (0, import_react_router3.useSearchParams)();
-  return /* @__PURE__ */ import_react6.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "table",
     {
-      className: (0, import_utils2.cn)(
-        className,
-        "text-[15px] border-separate border-spacing-0"
-      )
-    },
-    /* @__PURE__ */ import_react6.default.createElement("thead", null, /* @__PURE__ */ import_react6.default.createElement("tr", null, keys.map((key) => {
-      const value = columns[key];
-      function getReactNode() {
-        if (value && typeof value === "object" && "label" in value) {
-          return value.label;
-        }
-        return value;
-      }
-      function Head() {
-        const reactNode = getReactNode();
-        if (typeof reactNode === "string") {
-          return /* @__PURE__ */ import_react6.default.createElement(
-            "button",
+      className: (0, import_utils2.cn)(className, "text-[15px] border-separate border-spacing-0"),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: keys.map((key) => {
+          const value = columns[key];
+          function getReactNode() {
+            if (value && typeof value === "object" && "label" in value) {
+              return value.label;
+            }
+            return value;
+          }
+          function Head() {
+            const reactNode = getReactNode();
+            if (typeof reactNode === "string") {
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "button",
+                {
+                  className: (0, import_utils2.cn)(
+                    orderBy === key ? "text-neutral-900 font-medium" : "text-neutral-500",
+                    "px-4 h-14 flex items-center w-full"
+                  ),
+                  onClick: () => {
+                    let newDirection = "asc";
+                    if (orderBy === key) {
+                      newDirection = direction === "asc" ? "desc" : "asc";
+                    }
+                    setSearchParams({
+                      orderBy: key,
+                      direction: newDirection
+                    });
+                  },
+                  children: [
+                    reactNode,
+                    orderBy === key && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ml-0.5", children: direction === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_go.GoArrowUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_go.GoArrowDown, {}) })
+                  ]
+                }
+              );
+            }
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: reactNode });
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { className: (0, import_utils2.cn)("border-y font-normal"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Head, {}) }, key);
+        }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tbody", { children: [
+          sortedArray.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "td",
             {
-              className: (0, import_utils2.cn)(
-                orderBy === key ? "text-neutral-900 font-medium" : "text-neutral-500",
-                "px-4 h-14 flex items-center w-full"
-              ),
-              onClick: () => {
-                let newDirection = "asc";
-                if (orderBy === key) {
-                  newDirection = direction === "asc" ? "desc" : "asc";
+              colSpan: keys.length,
+              className: "px-4 h-14 text-neutral-400 text-center",
+              children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+            }
+          ) }),
+          sortedArray.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { className: "hover:bg-gray-50 transition-colors", children: keys.map((key, i2) => {
+            const value = item[key];
+            function Content() {
+              if (key in columns) {
+                const column = columns[key];
+                if (column && typeof column === "object" && "mapper" in column) {
+                  const mapper = column.mapper;
+                  if (mapper) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: mapper(item) });
+                  }
                 }
-                setSearchParams({
-                  orderBy: key,
-                  direction: newDirection
-                });
               }
-            },
-            reactNode,
-            orderBy === key && /* @__PURE__ */ import_react6.default.createElement("div", { className: "ml-0.5" }, direction === "asc" ? /* @__PURE__ */ import_react6.default.createElement(GoArrowUp, null) : /* @__PURE__ */ import_react6.default.createElement(GoArrowDown, null))
-          );
-        }
-        return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, reactNode);
-      }
-      return /* @__PURE__ */ import_react6.default.createElement(
-        "th",
-        {
-          key,
-          className: (0, import_utils2.cn)("border-y font-normal")
-        },
-        /* @__PURE__ */ import_react6.default.createElement(Head, null)
-      );
-    }))),
-    /* @__PURE__ */ import_react6.default.createElement("tbody", null, sortedArray.length === 0 && /* @__PURE__ */ import_react6.default.createElement("tr", null, /* @__PURE__ */ import_react6.default.createElement(
-      "td",
-      {
-        colSpan: keys.length,
-        className: "px-4 h-14 text-neutral-400 text-center"
-      },
-      "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
-    )), sortedArray.map((item, i) => /* @__PURE__ */ import_react6.default.createElement("tr", { key: i, className: "hover:bg-gray-50 transition-colors" }, keys.map((key, i2) => {
-      const value = item[key];
-      function Content() {
-        if (key in columns) {
-          const column = columns[key];
-          if (column && typeof column === "object" && "mapper" in column) {
-            const mapper = column.mapper;
-            if (mapper) {
-              return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, mapper(item));
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: String(value) });
             }
-          }
-        }
-        return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, String(value));
-      }
-      const linkedContent = getLink ? /* @__PURE__ */ import_react6.default.createElement(
-        import_react_router3.Link,
-        {
-          to: getLink(item),
-          className: "block content-center px-4 w-full h-full"
-        },
-        /* @__PURE__ */ import_react6.default.createElement(Content, null)
-      ) : /* @__PURE__ */ import_react6.default.createElement(Content, null);
-      const cell = Mapper ? /* @__PURE__ */ import_react6.default.createElement(Mapper, { item, index: i2 }, linkedContent) : linkedContent;
-      return /* @__PURE__ */ import_react6.default.createElement("td", { key, className: "px-0 h-14 border-b" }, cell);
-    }))))
+            const linkedContent = getLink ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_react_router3.Link,
+              {
+                to: getLink(item),
+                className: "block content-center px-4 w-full h-full",
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Content, {})
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Content, {});
+            const cell = Mapper ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Mapper, { item, index: i2, children: linkedContent }) : linkedContent;
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "px-0 h-14 border-b", children: cell }, key);
+          }) }, i))
+        ] })
+      ]
+    }
   );
 }
 
 // src/table/page.tsx
-var import_react7 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function createTablePage({
   name,
   columns,
@@ -530,73 +365,83 @@ function createTablePage({
       navigate(`${pathname}?${searchParams2.toString()}`);
     };
     const [searchParams] = (0, import_react_router4.useSearchParams)();
-    return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(
-      Header,
-      {
-        title: name,
-        actions: /* @__PURE__ */ import_react7.default.createElement(import_react_router4.Link, { to: `${pathname}/new`, className: "button-primary" }, name, " \uCD94\uAC00")
-      }
-    ), /* @__PURE__ */ import_react7.default.createElement("div", { className: "max-w-7xl mx-auto w-full overflow-auto" }, searchKey && /* @__PURE__ */ import_react7.default.createElement(
-      "form",
-      {
-        className: "h-18 px-4 flex items-center border-t",
-        onSubmit: (e) => {
-          e.preventDefault();
-          const formData = new FormData(e.currentTarget);
-          const query = formData.get("query");
-          search(query);
-        }
-      },
-      /* @__PURE__ */ import_react7.default.createElement(
-        "button",
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        Header,
         {
-          type: "submit",
-          className: "w-10 h-10 flex justify-center items-center"
-        },
-        /* @__PURE__ */ import_react7.default.createElement(GoSearch, { className: "text-xl mr-4" })
-      ),
-      /* @__PURE__ */ import_react7.default.createElement(
-        "input",
-        {
-          className: "outline-none h-full flex-1",
-          placeholder: "\uC5EC\uAE30\uC5D0 \uAC80\uC0C9\uD558\uC138\uC694...",
-          name: "query",
-          defaultValue: searchParams.get("query") ?? ""
+          title: name,
+          actions: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_router4.Link, { to: `${pathname}/new`, className: "button-primary", children: [
+            name,
+            " \uCD94\uAC00"
+          ] })
         }
-      )
-    ), /* @__PURE__ */ import_react7.default.createElement(
-      Table,
-      {
-        data: items,
-        columns,
-        getLink: primaryKey ? (item) => `${pathname}/${item[primaryKey]}` : void 0,
-        limit,
-        offset,
-        orderBy,
-        direction
-      }
-    ), /* @__PURE__ */ import_react7.default.createElement(
-      TablePageButtons,
-      {
-        total,
-        limit,
-        offset,
-        MAX_PAGES_TO_SHOW: 10
-      }
-    )));
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "max-w-7xl mx-auto w-full overflow-auto", children: [
+        searchKey && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "form",
+          {
+            className: "h-18 px-4 flex items-center border-t",
+            onSubmit: (e) => {
+              e.preventDefault();
+              const formData = new FormData(e.currentTarget);
+              const query = formData.get("query");
+              search(query);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  type: "submit",
+                  className: "w-10 h-10 flex justify-center items-center",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_go2.GoSearch, { className: "text-xl mr-4" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "input",
+                {
+                  className: "outline-none h-full flex-1",
+                  placeholder: "\uC5EC\uAE30\uC5D0 \uAC80\uC0C9\uD558\uC138\uC694...",
+                  name: "query",
+                  defaultValue: searchParams.get("query") ?? ""
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Table,
+          {
+            data: items,
+            columns,
+            getLink: primaryKey ? (item) => `${pathname}/${item[primaryKey]}` : void 0,
+            limit,
+            offset,
+            orderBy,
+            direction
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          TablePageButtons,
+          {
+            total,
+            limit,
+            offset,
+            MAX_PAGES_TO_SHOW: 10
+          }
+        )
+      ] })
+    ] });
   };
 }
 
-// src/crud/crud_form.tsx
-var import_react13 = __toESM(require("react"));
-
 // src/form/create_form_component.tsx
 var import_utils3 = require("dn-react-toolkit/utils");
-var import_react8 = __toESM(require("react"));
+var import_react2 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function createComponent(tag, options) {
   return function FormComponent({ className, ...props }) {
     const Tag = tag;
-    return /* @__PURE__ */ import_react8.default.createElement(Tag, { ...props, className: (0, import_utils3.cn)(options.className, className) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tag, { ...props, className: (0, import_utils3.cn)(options.className, className) });
   };
 }
 
@@ -615,12 +460,12 @@ var FormLabel = createComponent("label", {
 var import_react_store_input3 = require("react-store-input");
 
 // src/client/env_loader.tsx
-var import_react9 = __toESM(require("react"));
 var import_react_router5 = require("react-router");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 
 // src/client/file_input.tsx
-var import_react10 = require("react");
-var import_react11 = __toESM(require("react"));
+var import_react3 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 
 // src/client/use_user_agent.tsx
 var import_react_router6 = require("react-router");
@@ -628,7 +473,8 @@ var import_react_router6 = require("react-router");
 // src/client/store_text_editor.tsx
 var import_dn_react_text_editor = require("dn-react-text-editor");
 var import_react_store_input2 = require("react-store-input");
-var import_react12 = __toESM(require("react"));
+var import_react4 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function StoreTextEditor({
   store,
   name,
@@ -638,8 +484,8 @@ function StoreTextEditor({
   ref,
   ...props
 }) {
-  const controllerRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useImperativeHandle)(
+  const controllerRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useImperativeHandle)(
     ref,
     () => controllerRef.current,
     []
@@ -687,7 +533,7 @@ function StoreTextEditor({
     }
     return void 0;
   };
-  return /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_dn_react_text_editor.TextEditor,
     {
       ...props,
@@ -705,71 +551,93 @@ function StoreTextEditor({
 var import_client = require("dn-react-toolkit/file/client");
 
 // src/crud/crud_form.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function CrudForm({
   AdminHeader
 }) {
   const form = useFormContext();
   const component = (0, import_react_store_input3.useStoreComponent)(form.store);
-  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(
-    AdminHeader,
-    {
-      title: `${form.name} ${form.item ? "\uC218\uC815" : "\uCD94\uAC00"}`,
-      actions: /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, form.item && /* @__PURE__ */ import_react13.default.createElement(
-        "button",
-        {
-          type: "button",
-          className: "button-outline",
-          onClick: () => {
-            form.delete();
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      AdminHeader,
+      {
+        title: `${form.name} ${form.item ? "\uC218\uC815" : "\uCD94\uAC00"}`,
+        actions: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+          form.item && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "button-outline",
+              onClick: () => {
+                form.delete();
+              },
+              children: "\uC0AD\uC81C\uD558\uAE30"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "button-primary",
+              onClick: form.submit,
+              children: "\uC800\uC7A5\uD558\uAE30"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-w-2xl mx-auto", children: Object.keys(form.columns).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: Object.entries(form.columns).map(
+      ([name, value]) => {
+        function InputComponent() {
+          if (value.component) {
+            const Component = value.component;
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component, { store: form.store, name });
           }
-        },
-        "\uC0AD\uC81C\uD558\uAE30"
-      ), /* @__PURE__ */ import_react13.default.createElement(
-        "button",
-        {
-          type: "button",
-          className: "button-primary",
-          onClick: form.submit
-        },
-        "\uC800\uC7A5\uD558\uAE30"
-      ))
-    }
-  ), /* @__PURE__ */ import_react13.default.createElement("div", { className: "max-w-2xl mx-auto" }, Object.keys(form.columns).length > 0 && /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, Object.entries(form.columns).map(
-    ([name, value]) => {
-      function InputComponent() {
-        if (value.type === "textarea") {
-          return /* @__PURE__ */ import_react13.default.createElement(
-            StoreTextEditor,
+          if (value.type === "textarea") {
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              StoreTextEditor,
+              {
+                store: form.store,
+                name,
+                editor: {
+                  attributes: {
+                    class: "text-editor-form"
+                  }
+                }
+              }
+            );
+          }
+          if (value.options) {
+            const Component = value.options;
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(component.select, { name, className: "select-form", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component, {}) });
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            component.input,
             {
-              store: form.store,
-              name
+              name,
+              type: value.type,
+              className: "input-form"
             }
           );
         }
-        if (value.options) {
-          const Component = value.options;
-          return /* @__PURE__ */ import_react13.default.createElement(component.select, { name, className: "select-form" }, /* @__PURE__ */ import_react13.default.createElement(Component, null));
+        const v = form.store.state[name];
+        if (typeof v === "boolean") {
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex", children: [
+            value.label,
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ml-auto", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(InputComponent, {}) })
+          ] });
         }
-        return /* @__PURE__ */ import_react13.default.createElement(
-          component.input,
-          {
-            name,
-            type: value.type,
-            className: "input-form"
-          }
-        );
-      }
-      const v = form.store.state[name];
-      if (typeof v === "boolean") {
-        return /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex" }, value.label, /* @__PURE__ */ import_react13.default.createElement("div", { className: "ml-auto" }, /* @__PURE__ */ import_react13.default.createElement(InputComponent, null)));
+        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormRow, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FormEntry, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormLabel, { children: value.label }, name),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(InputComponent, {})
+        ] }) });
       }
-      return /* @__PURE__ */ import_react13.default.createElement(FormRow, null, /* @__PURE__ */ import_react13.default.createElement(FormEntry, null, /* @__PURE__ */ import_react13.default.createElement(FormLabel, { key: name }, value.label), /* @__PURE__ */ import_react13.default.createElement(InputComponent, null)));
-    }
-  ))));
+    ) }) })
+  ] });
 }
 
 // src/crud/crud_page.tsx
-var import_react14 = __toESM(require("react"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function crudPage({
   name,
   primaryKey,
@@ -777,7 +645,7 @@ function crudPage({
   formOptions,
   header
 }) {
-  return (prefix) => {
+  const create = (prefix) => {
     return function Page() {
       const data = (0, import_react_router7.useLoaderData)();
       const { pathname } = (0, import_react_router7.useLocation)();
@@ -786,29 +654,33 @@ function crudPage({
           ...tablePageOptions,
           name
         });
-        return /* @__PURE__ */ import_react14.default.createElement(Component, { header });
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, { header });
       }
       if (pathname.startsWith(prefix)) {
-        return /* @__PURE__ */ import_react14.default.createElement(
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           CrudFormProvider,
           {
             item: data?.item,
             prefix,
             name,
             columns: formOptions.columns,
-            primaryKey
-          },
-          formOptions.form ? /* @__PURE__ */ import_react14.default.createElement(FormDelegate, { component: formOptions.form }) : /* @__PURE__ */ import_react14.default.createElement(CrudForm, { AdminHeader: header })
+            primaryKey,
+            children: formOptions.form ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FormDelegate, { component: formOptions.form }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CrudForm, { AdminHeader: header })
+          }
         );
       }
     };
   };
+  return {
+    name,
+    create
+  };
 }
 function FormDelegate({
   component: Component
 }) {
   const form = useFormContext();
-  return /* @__PURE__ */ import_react14.default.createElement(Component, { form });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, { form });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {