dn-react-router-toolkit 0.7.14 → 0.8.0

package/dist/crud/crud_page.js

@@ -23,7 +23,7 @@ __export(crud_page_exports, {
   crudPage: () => crudPage
 });
 module.exports = __toCommonJS(crud_page_exports);
-var import_react_router7 = require("react-router");
+var import_react_router9 = require("react-router");
 
 // src/crud/crud_form_provider.tsx
 var import_react_router = require("react-router");
@@ -175,87 +175,17 @@ function CrudFormProvider({
 }
 
 // src/table/page.tsx
-var import_react_router4 = require("react-router");
+var import_react_router6 = require("react-router");
+
+// src/table/table_form.tsx
+var import_react_router5 = require("react-router");
 var import_go2 = require("react-icons/go");
 
-// src/table/buttons.tsx
+// src/table/table.tsx
 var import_utils2 = require("dn-react-toolkit/utils");
+var import_go = require("react-icons/go");
 var import_react_router2 = require("react-router");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function TablePageButtons({
-  MAX_PAGES_TO_SHOW,
-  total,
-  limit,
-  offset
-}) {
-  const pages = Math.ceil(total / limit);
-  const { pathname } = (0, import_react_router2.useLocation)();
-  const [searchParams] = (0, import_react_router2.useSearchParams)();
-  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__ */ (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,
-      {
-        to: (() => {
-          searchParams.set(
-            "offset",
-            String((startButton - 1) * limit)
-          );
-          return `${pathname}?${searchParams.toString()}`;
-        })(),
-        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_utils2.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_utils3 = require("dn-react-toolkit/utils");
-var import_go = require("react-icons/go");
-var import_react_router3 = require("react-router");
-var import_jsx_runtime3 = require("react/jsx-runtime");
 function Table({
   className = "min-w-full whitespace-nowrap",
   data,
@@ -269,13 +199,13 @@ 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__ */ (0, import_jsx_runtime3.jsxs)(
+  const [_, setSearchParams] = (0, import_react_router2.useSearchParams)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "table",
     {
-      className: (0, import_utils3.cn)(className, "text-[15px] border-separate border-spacing-0"),
+      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) => {
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { children: keys.map((key) => {
           const value = columns[key];
           function getReactNode() {
             if (value && typeof value === "object" && "label" in value) {
@@ -286,10 +216,10 @@ function Table({
           function Head() {
             const reactNode = getReactNode();
             if (typeof reactNode === "string") {
-              return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                 "button",
                 {
-                  className: (0, import_utils3.cn)(
+                  className: (0, import_utils2.cn)(
                     orderBy === key ? "text-neutral-900 font-medium" : "text-neutral-500",
                     "px-4 h-14 flex items-center w-full"
                   ),
@@ -305,17 +235,17 @@ function Table({
                   },
                   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, {}) })
+                    orderBy === key && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "ml-0.5", children: direction === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_go.GoArrowUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_go.GoArrowDown, {}) })
                   ]
                 }
               );
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: reactNode });
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: reactNode });
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { className: (0, import_utils3.cn)("border-y font-normal"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Head, {}) }, key);
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: (0, import_utils2.cn)("border-y font-normal"), children: /* @__PURE__ */ (0, import_jsx_runtime2.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)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tbody", { children: [
+          sortedArray.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "td",
             {
               colSpan: keys.length,
@@ -323,7 +253,7 @@ function Table({
               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) => {
+          sortedArray.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { className: "hover:bg-gray-50 transition-colors", children: keys.map((key, i2) => {
             const value = item[key];
             function Content() {
               if (key in columns) {
@@ -331,22 +261,22 @@ function Table({
                 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) });
+                    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: mapper(item) });
                   }
                 }
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: String(value) });
+              return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: String(value) });
             }
-            const linkedContent = getLink ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              import_react_router3.Link,
+            const linkedContent = getLink ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_react_router2.Link,
               {
                 to: getLink(item),
                 className: "block content-center px-4 w-full h-full",
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Content, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.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);
+            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, {});
+            const cell = Mapper ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Mapper, { item, index: i2, children: linkedContent }) : linkedContent;
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "px-0 h-14 border-b", children: cell }, key);
           }) }, i))
         ] })
       ]
@@ -354,8 +284,169 @@ function Table({
   );
 }
 
-// src/table/page.tsx
+// src/table/use_table.tsx
+var import_react_router3 = require("react-router");
+function useTable() {
+  const { table } = (0, import_react_router3.useLoaderData)();
+  const { items, total, limit, offset, orderBy, direction, searchKey } = table;
+  return {
+    items,
+    total,
+    limit,
+    offset,
+    orderBy,
+    direction,
+    searchKey
+  };
+}
+
+// src/table/buttons.tsx
+var import_utils3 = require("dn-react-toolkit/utils");
+var import_react_router4 = require("react-router");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function TablePageButtons({
+  MAX_PAGES_TO_SHOW,
+  total,
+  limit,
+  offset
+}) {
+  const pages = Math.ceil(total / limit);
+  const { pathname } = (0, import_react_router4.useLocation)();
+  const [searchParams] = (0, import_react_router4.useSearchParams)();
+  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__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: pages > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-center items-center my-8 gap-4 text-neutral-400", children: [
+    startButton > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_router4.Link,
+      {
+        to: (() => {
+          searchParams.set(
+            "offset",
+            String((startButton - 1) * limit)
+          );
+          return `${pathname}?${searchParams.toString()}`;
+        })(),
+        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_runtime3.jsx)(
+        import_react_router4.Link,
+        {
+          to: (() => {
+            searchParams.set(
+              "offset",
+              String((startButton + index) * limit)
+            );
+            return `${pathname}?${searchParams.toString()}`;
+          })(),
+          className: (0, import_utils3.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_runtime3.jsx)(
+      import_react_router4.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_form.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+function TableForm({
+  columns,
+  primaryKey = "id"
+}) {
+  const { pathname } = (0, import_react_router5.useLocation)();
+  const { items, total, limit, offset, orderBy, direction, searchKey } = useTable();
+  const navigate = (0, import_react_router5.useNavigate)();
+  const search = (query) => {
+    const searchParams2 = new URLSearchParams(window.location.search);
+    searchParams2.set("query", query);
+    searchParams2.set("offset", "0");
+    navigate(`${pathname}?${searchParams2.toString()}`);
+  };
+  const [searchParams] = (0, import_react_router5.useSearchParams)();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { 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/table/page.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function createTablePage({
   name,
   columns,
@@ -364,82 +455,19 @@ function createTablePage({
   return function TablePage({
     header: Header
   }) {
-    const { pathname } = (0, import_react_router4.useLocation)();
-    const { table } = (0, import_react_router4.useLoaderData)();
-    const { items, total, limit, offset, orderBy, direction, searchKey } = table;
-    const navigate = (0, import_react_router4.useNavigate)();
-    const search = (query) => {
-      const searchParams2 = new URLSearchParams(window.location.search);
-      searchParams2.set("query", query);
-      searchParams2.set("offset", "0");
-      navigate(`${pathname}?${searchParams2.toString()}`);
-    };
-    const [searchParams] = (0, import_react_router4.useSearchParams)();
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    const { pathname } = (0, import_react_router6.useLocation)();
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         Header,
         {
           title: name,
-          actions: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_router4.Link, { to: `${pathname}/new`, className: "button-primary", children: [
+          actions: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_router6.Link, { to: `${pathname}/new`, className: "button-primary", children: [
             name,
             " \uCD94\uAC00"
           ] })
         }
       ),
-      /* @__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
-          }
-        )
-      ] })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "max-w-7xl mx-auto w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TableForm, { columns, primaryKey }) })
     ] });
   };
 }
@@ -447,11 +475,11 @@ function createTablePage({
 // src/form/create_form_component.tsx
 var import_utils4 = require("dn-react-toolkit/utils");
 var import_react2 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function createComponent(tag, options) {
   return function FormComponent({ className, ...props }) {
     const Tag = tag;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tag, { ...props, className: (0, import_utils4.cn)(options.className, className) });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Tag, { ...props, className: (0, import_utils4.cn)(options.className, className) });
   };
 }
 
@@ -470,21 +498,21 @@ var FormLabel = createComponent("label", {
 var import_react_store_input3 = require("react-store-input");
 
 // src/client/env_loader.tsx
-var import_react_router5 = require("react-router");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react_router7 = require("react-router");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 
 // src/client/file_input.tsx
 var import_react3 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 
 // src/client/use_user_agent.tsx
-var import_react_router6 = require("react-router");
+var import_react_router8 = 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_react4 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function StoreTextEditor({
   store,
   name,
@@ -543,7 +571,7 @@ function StoreTextEditor({
     }
     return void 0;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_dn_react_text_editor.TextEditor,
     {
       ...props,
@@ -561,19 +589,19 @@ function StoreTextEditor({
 var import_client = require("dn-react-toolkit/file/client");
 
 // src/crud/crud_form.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function CrudForm({
   AdminHeader
 }) {
   const form = useFormContext();
   const component = (0, import_react_store_input3.useStoreComponent)(form.store);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.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)(
+        actions: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          form.item && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
               type: "button",
@@ -584,7 +612,7 @@ function CrudForm({
               children: "\uC0AD\uC81C\uD558\uAE30"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
               type: "button",
@@ -596,15 +624,15 @@ function CrudForm({
         ] })
       }
     ),
-    /* @__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(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-2xl mx-auto", children: Object.keys(form.columns).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.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 });
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, { store: form.store, name });
           }
           if (value.type === "textarea") {
-            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               StoreTextEditor,
               {
                 store: form.store,
@@ -619,9 +647,9 @@ function CrudForm({
           }
           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_runtime10.jsx)(component.select, { name, className: "select-form", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, {}) });
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             component.input,
             {
               name,
@@ -632,22 +660,22 @@ function CrudForm({
         }
         const v = form.store.state[name];
         if (typeof v === "boolean") {
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime10.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, {}) })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "ml-auto", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InputComponent, {}) })
           ] });
         }
-        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__ */ (0, import_jsx_runtime10.jsx)(FormRow, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(FormEntry, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FormLabel, { children: value.label }, name),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InputComponent, {})
+        ] }) }, name);
       }
     ) }) })
   ] });
 }
 
 // src/crud/crud_page.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function crudPage({
   name,
   primaryKey,
@@ -657,17 +685,17 @@ function crudPage({
 }) {
   const create = (prefix) => {
     return function Page() {
-      const data = (0, import_react_router7.useLoaderData)();
-      const { pathname } = (0, import_react_router7.useLocation)();
+      const data = (0, import_react_router9.useLoaderData)();
+      const { pathname } = (0, import_react_router9.useLocation)();
       if (pathname === prefix) {
         const Component = createTablePage({
           ...tablePageOptions,
           name
         });
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, { header });
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Component, { header });
       }
       if (pathname.startsWith(prefix)) {
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           CrudFormProvider,
           {
             item: data?.item,
@@ -675,7 +703,7 @@ function crudPage({
             name,
             columns: formOptions.columns,
             primaryKey,
-            children: formOptions.form ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FormDelegate, { component: formOptions.form }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CrudForm, { AdminHeader: header })
+            children: formOptions.form ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FormDelegate, { component: formOptions.form }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CrudForm, { AdminHeader: header })
           }
         );
       }
@@ -690,7 +718,7 @@ function FormDelegate({
   component: Component
 }) {
   const form = useFormContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, { form });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Component, { form });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {