dn-react-router-toolkit 0.5.9 → 0.6.1

package/dist/crud/crud_form_provider.d.mts

@@ -1,26 +1,26 @@
-import { RxStore } from 'dn-react-toolkit/store';
-import React from 'react';
+import { Store } from 'react-store-input';
+import React__default from 'react';
 
 type FormState<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = Omit<TModel, TPrimaryKey> & {
     [K in TPrimaryKey]?: TModel[K];
 };
 type FormColumnValue<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = {
     label: string;
-    type?: React.HTMLInputTypeAttribute | "textarea";
-    component?: React.FC<{
-        store: RxStore<FormState<TModel, TPrimaryKey>>;
+    type?: React__default.HTMLInputTypeAttribute | "textarea";
+    component?: React__default.FC<{
+        store: Store<FormState<TModel, TPrimaryKey>>;
         property: string;
     }>;
-    options?: React.FC;
+    options?: React__default.FC;
 };
 type FormColumns<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = Partial<{
     [K in keyof TModel]: FormColumnValue<TModel, TPrimaryKey>;
 }>;
-declare const FormContext: React.Context<{}>;
+declare const FormContext: React__default.Context<{}>;
 declare function useFormContext<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>(): {
     name: string;
     item?: TModel;
-    store: RxStore<FormState<TModel, TPrimaryKey>>;
+    store: Store<FormState<TModel, TPrimaryKey>>;
     submit: () => Promise<void>;
     delete: () => Promise<void>;
     columns: FormColumns<TModel, TPrimaryKey>;
@@ -31,8 +31,8 @@ type CrudFormProps<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof
     prefix: string;
     item?: TModel;
     columns?: FormColumns<TModel, TPrimaryKey>;
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
 };
-declare function CrudFormProvider<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>({ primaryKey, name, prefix, item, columns, children, }: CrudFormProps<TModel, TPrimaryKey>): React.JSX.Element;
+declare function CrudFormProvider<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>({ primaryKey, name, prefix, item, columns, children, }: CrudFormProps<TModel, TPrimaryKey>): React__default.JSX.Element;
 
 export { type CrudFormProps, type FormColumnValue, type FormColumns, FormContext, type FormState, CrudFormProvider as default, useFormContext };

package/dist/crud/crud_form_provider.d.ts

@@ -1,26 +1,26 @@
-import { RxStore } from 'dn-react-toolkit/store';
-import React from 'react';
+import { Store } from 'react-store-input';
+import React__default from 'react';
 
 type FormState<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = Omit<TModel, TPrimaryKey> & {
     [K in TPrimaryKey]?: TModel[K];
 };
 type FormColumnValue<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = {
     label: string;
-    type?: React.HTMLInputTypeAttribute | "textarea";
-    component?: React.FC<{
-        store: RxStore<FormState<TModel, TPrimaryKey>>;
+    type?: React__default.HTMLInputTypeAttribute | "textarea";
+    component?: React__default.FC<{
+        store: Store<FormState<TModel, TPrimaryKey>>;
         property: string;
     }>;
-    options?: React.FC;
+    options?: React__default.FC;
 };
 type FormColumns<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = Partial<{
     [K in keyof TModel]: FormColumnValue<TModel, TPrimaryKey>;
 }>;
-declare const FormContext: React.Context<{}>;
+declare const FormContext: React__default.Context<{}>;
 declare function useFormContext<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>(): {
     name: string;
     item?: TModel;
-    store: RxStore<FormState<TModel, TPrimaryKey>>;
+    store: Store<FormState<TModel, TPrimaryKey>>;
     submit: () => Promise<void>;
     delete: () => Promise<void>;
     columns: FormColumns<TModel, TPrimaryKey>;
@@ -31,8 +31,8 @@ type CrudFormProps<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof
     prefix: string;
     item?: TModel;
     columns?: FormColumns<TModel, TPrimaryKey>;
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
 };
-declare function CrudFormProvider<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>({ primaryKey, name, prefix, item, columns, children, }: CrudFormProps<TModel, TPrimaryKey>): React.JSX.Element;
+declare function CrudFormProvider<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>({ primaryKey, name, prefix, item, columns, children, }: CrudFormProps<TModel, TPrimaryKey>): React__default.JSX.Element;
 
 export { type CrudFormProps, type FormColumnValue, type FormColumns, FormContext, type FormState, CrudFormProvider as default, useFormContext };

package/dist/crud/crud_form_provider.js

@@ -36,7 +36,7 @@ __export(crud_form_provider_exports, {
 });
 module.exports = __toCommonJS(crud_form_provider_exports);
 var import_react_router = require("react-router");
-var import_store = require("dn-react-toolkit/store");
+var import_react_store_input = require("react-store-input");
 var import_react = require("react");
 var import_react2 = __toESM(require("react"));
 var FormContext = (0, import_react.createContext)({});
@@ -52,7 +52,7 @@ function CrudFormProvider({
   children
 }) {
   const apiPrefix = `/api${prefix}`;
-  const store = (0, import_store.useStore)({
+  const store = (0, import_react_store_input.useStore)({
     ...item || {}
   });
   const navigate = (0, import_react_router.useNavigate)();
@@ -102,10 +102,9 @@ function CrudFormProvider({
               return value2.map((v) => converter(v));
             }
             if (typeof value2 === "object") {
-              return Object.entries(value2).reduce(
-                reducer,
-                {}
-              );
+              return Object.entries(
+                value2
+              ).reduce(reducer, {});
             }
           };
           return {

package/dist/crud/crud_form_provider.mjs

@@ -1,6 +1,6 @@
 // src/crud/crud_form_provider.tsx
 import { useNavigate } from "react-router";
-import { useStore } from "dn-react-toolkit/store";
+import { useStore } from "react-store-input";
 import { createContext, useContext } from "react";
 import React from "react";
 var FormContext = createContext({});
@@ -66,10 +66,9 @@ function CrudFormProvider({
               return value2.map((v) => converter(v));
             }
             if (typeof value2 === "object") {
-              return Object.entries(value2).reduce(
-                reducer,
-                {}
-              );
+              return Object.entries(
+                value2
+              ).reduce(reducer, {});
             }
           };
           return {

package/dist/crud/crud_page.d.mts

@@ -1,24 +1,24 @@
 import { CrudFormProps } from './crud_form_provider.mjs';
 import { TablePageOptions } from '../table/page.mjs';
-import React from 'react';
-import 'dn-react-toolkit/store';
+import React__default from 'react';
+import 'react-store-input';
 import '../table/table.mjs';
 
 type CrudPageOptions<TModel, TPrimaryKey extends keyof TModel> = {
     name: string;
     tablePageOptions: Omit<TablePageOptions<TModel>, "name">;
     formOptions: {
-        form?: React.FC;
+        form?: React__default.FC;
         columns: CrudFormProps<TModel, TPrimaryKey>["columns"];
     };
-    AdminLayout: React.FC<{
+    AdminHeader: React__default.FC<{
         title: string;
-        actions?: React.ReactNode;
+        actions?: React__default.ReactNode;
         className?: string;
-        children?: React.ReactNode;
+        children?: React__default.ReactNode;
     }>;
 };
-type CrudPage = (prefix: string) => React.FC;
-declare function crudPage<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>({ name, tablePageOptions, formOptions, AdminLayout, }: CrudPageOptions<TModel, TPrimaryKey>): CrudPage;
+type CrudPage = (prefix: string) => React__default.FC;
+declare function crudPage<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>({ name, tablePageOptions, formOptions, AdminHeader, }: CrudPageOptions<TModel, TPrimaryKey>): CrudPage;
 
 export { type CrudPage, type CrudPageOptions, crudPage };

package/dist/crud/crud_page.d.ts

@@ -1,24 +1,24 @@
 import { CrudFormProps } from './crud_form_provider.js';
 import { TablePageOptions } from '../table/page.js';
-import React from 'react';
-import 'dn-react-toolkit/store';
+import React__default from 'react';
+import 'react-store-input';
 import '../table/table.js';
 
 type CrudPageOptions<TModel, TPrimaryKey extends keyof TModel> = {
     name: string;
     tablePageOptions: Omit<TablePageOptions<TModel>, "name">;
     formOptions: {
-        form?: React.FC;
+        form?: React__default.FC;
         columns: CrudFormProps<TModel, TPrimaryKey>["columns"];
     };
-    AdminLayout: React.FC<{
+    AdminHeader: React__default.FC<{
         title: string;
-        actions?: React.ReactNode;
+        actions?: React__default.ReactNode;
         className?: string;
-        children?: React.ReactNode;
+        children?: React__default.ReactNode;
     }>;
 };
-type CrudPage = (prefix: string) => React.FC;
-declare function crudPage<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>({ name, tablePageOptions, formOptions, AdminLayout, }: CrudPageOptions<TModel, TPrimaryKey>): CrudPage;
+type CrudPage = (prefix: string) => React__default.FC;
+declare function crudPage<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>({ name, tablePageOptions, formOptions, AdminHeader, }: CrudPageOptions<TModel, TPrimaryKey>): CrudPage;
 
 export { type CrudPage, type CrudPageOptions, crudPage };

package/dist/crud/crud_page.js

@@ -33,11 +33,11 @@ __export(crud_page_exports, {
   crudPage: () => crudPage
 });
 module.exports = __toCommonJS(crud_page_exports);
-var import_react_router5 = require("react-router");
+var import_react_router7 = require("react-router");
 
 // src/crud/crud_form_provider.tsx
 var import_react_router = require("react-router");
-var import_store = require("dn-react-toolkit/store");
+var import_react_store_input = require("react-store-input");
 var import_react = require("react");
 var import_react2 = __toESM(require("react"));
 var FormContext = (0, import_react.createContext)({});
@@ -53,7 +53,7 @@ function CrudFormProvider({
   children
 }) {
   const apiPrefix = `/api${prefix}`;
-  const store = (0, import_store.useStore)({
+  const store = (0, import_react_store_input.useStore)({
     ...item || {}
   });
   const navigate = (0, import_react_router.useNavigate)();
@@ -103,10 +103,9 @@ function CrudFormProvider({
               return value2.map((v) => converter(v));
             }
             if (typeof value2 === "object") {
-              return Object.entries(value2).reduce(
-                reducer,
-                {}
-              );
+              return Object.entries(
+                value2
+              ).reduce(reducer, {});
             }
           };
           return {
@@ -487,7 +486,7 @@ function createTablePage({
   primaryKey = "id"
 }) {
   return function TablePage({
-    AdminLayout
+    AdminHeader
   }) {
     const { pathname } = (0, import_react_router4.useLocation)();
     const { table } = (0, import_react_router4.useLoaderData)();
@@ -500,198 +499,242 @@ function createTablePage({
       navigate(`${pathname}?${searchParams2.toString()}`);
     };
     const [searchParams] = (0, import_react_router4.useSearchParams)();
-    return /* @__PURE__ */ import_react7.default.createElement(
-      AdminLayout,
+    return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(
+      AdminHeader,
       {
         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" }, 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);
+        }
       },
-      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",
-          {
-            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") ?? ""
-          }
-        )
-      ),
       /* @__PURE__ */ import_react7.default.createElement(
-        Table,
+        "button",
         {
-          data: items,
-          columns,
-          getLink: primaryKey ? (item) => `${pathname}/${item[primaryKey]}` : void 0,
-          limit,
-          offset,
-          orderBy,
-          direction
-        }
+          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(
-        TablePageButtons,
+        "input",
         {
-          total,
-          limit,
-          offset,
-          MAX_PAGES_TO_SHOW: 10
+          className: "outline-none h-full flex-1",
+          placeholder: "\uC5EC\uAE30\uC5D0 \uAC80\uC0C9\uD558\uC138\uC694...",
+          name: "query",
+          defaultValue: searchParams.get("query") ?? ""
         }
       )
-    );
+    ), /* @__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
+      }
+    )));
   };
 }
 
 // src/crud/crud_form.tsx
-var import_store2 = require("dn-react-toolkit/store");
+var import_react13 = __toESM(require("react"));
+var import_dn_react_text_editor2 = require("dn-react-text-editor");
+var import_react_store_input3 = require("react-store-input");
+
+// src/client/env_loader.tsx
 var import_react8 = __toESM(require("react"));
+var import_react_router5 = require("react-router");
+
+// src/client/file_input.tsx
+var import_react9 = require("react");
+var import_react10 = __toESM(require("react"));
+
+// src/client/use_user_agent.tsx
+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_react11 = __toESM(require("react"));
+function createStoreTextEditor(TextEditor2) {
+  function StoreComponent({
+    store,
+    name,
+    defaultValue,
+    ...props
+  }) {
+    const { ref, onChange } = (0, import_react_store_input2.useStoreController)(
+      store,
+      {
+        ref: props.ref,
+        onSubscribe: (state, element) => {
+          const result = (props.getter ? props.getter(state) : name ? state[name] : "") || "";
+          if (element.value !== result) {
+            element.value = result;
+          }
+        },
+        onDispatch: (state, element) => {
+          if (props.setter) {
+            props.setter(state, element.value);
+            return;
+          }
+          if (name) {
+            state[name] = element.value;
+          }
+        }
+      }
+    );
+    const getDefaultValue = () => {
+      if (props.getter) {
+        return props.getter(store.state);
+      }
+      if (name) {
+        return store.state[name];
+      }
+      return void 0;
+    };
+    return /* @__PURE__ */ import_react11.default.createElement(
+      TextEditor2,
+      {
+        ...props,
+        ref,
+        defaultValue: defaultValue ?? getDefaultValue(),
+        onChange: (e) => {
+          onChange();
+          props.onChange?.(e);
+        }
+      }
+    );
+  }
+  return StoreComponent;
+}
+
+// src/form/create_form_component.tsx
 var import_utils3 = require("dn-react-toolkit/utils");
-var import_text_editor = require("dn-react-toolkit/text_editor");
-var textarea = (0, import_text_editor.createTextEditor)();
-function CrudForm({ AdminLayout }) {
+var import_react12 = __toESM(require("react"));
+function createComponent(tag, options) {
+  return function FormComponent({ className, ...props }) {
+    const Tag = tag;
+    return /* @__PURE__ */ import_react12.default.createElement(Tag, { ...props, className: (0, import_utils3.cn)(options.className, className) });
+  };
+}
+
+// src/form/form_components.tsx
+var FormEntry = createComponent("div", {
+  className: "flex-1"
+});
+var FormRow = createComponent("div", {
+  className: "flex-1 flex gap-4 mb-6"
+});
+var FormLabel = createComponent("label", {
+  className: "flex-1 font-semibold mb-2.5 block"
+});
+
+// src/crud/crud_form.tsx
+var TextEditor = createStoreTextEditor((0, import_dn_react_text_editor2.createTextEditor)());
+function CrudForm({ AdminHeader }) {
   const form = useFormContext();
-  return /* @__PURE__ */ import_react8.default.createElement(
-    AdminLayout,
+  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_react8.default.createElement("button", { type: "button", className: "button-primary", onClick: form.submit }, "\uC800\uC7A5\uD558\uAE30"),
-      className: "max-w-3xl mx-auto"
-    },
-    Object.keys(form.columns).length > 0 && /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, Object.entries(
-      form.columns
-    ).map(([key, value]) => {
-      const createComponent = () => {
-        if (value.component) {
-          return /* @__PURE__ */ import_react8.default.createElement(value.component, { store: form.store, property: key });
-        }
-        if (value.type === "checkbox") {
-          return /* @__PURE__ */ import_react8.default.createElement(import_store2.SyncSwitch, { store: form.store, property: key });
-        }
-        if (value.type === "number") {
-          return /* @__PURE__ */ import_react8.default.createElement(
-            import_store2.SyncInput,
-            {
-              store: form.store,
-              property: key,
-              className: "input-form",
-              type: "number",
-              serializer: (value2) => {
-                if (value2 === void 0 || value2 === null) {
-                  return "";
-                }
-                return String(value2);
-              },
-              deserializer: (value2) => {
-                const parsed = Number(value2);
-                if (isNaN(parsed)) {
-                  return void 0;
-                }
-                return parsed;
-              }
-            }
-          );
-        }
-        if (value.type === "datetime") {
-          return /* @__PURE__ */ import_react8.default.createElement(
-            import_store2.SyncInput,
-            {
-              store: form.store,
-              property: key,
-              className: "input-form",
-              type: "datetime-local",
-              serializer: (value2) => {
-                if (value2 instanceof Date) {
-                  return (0, import_utils3.moment)(value2).toISOString(true).slice(0, 16);
-                }
-                return String(value2);
-              },
-              deserializer: (value2) => {
-                if (!value2) {
-                  return void 0;
-                }
-                return (0, import_utils3.moment)(value2).toDate();
-              }
-            }
-          );
-        }
-        if (value.type === "textarea") {
-          const Editor = (0, import_store2.useSyncTextEditor)(textarea);
-          return /* @__PURE__ */ import_react8.default.createElement(
-            Editor.Component,
-            {
-              store: form.store,
-              property: key
-            }
-          );
-        }
-        if (value.options) {
-          const Component = value.options;
-          return /* @__PURE__ */ import_react8.default.createElement(import_store2.SyncSelect, { store: form.store, property: key }, /* @__PURE__ */ import_react8.default.createElement(Component, null));
-        }
-        return /* @__PURE__ */ import_react8.default.createElement(
-          import_store2.SyncInput,
+      actions: /* @__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(([key, value]) => {
+    function InputComponent() {
+      if (value.type === "textarea") {
+        return /* @__PURE__ */ import_react13.default.createElement(TextEditor, { store: form.store, name: key });
+      }
+      if (value.options) {
+        const Component = value.options;
+        return /* @__PURE__ */ import_react13.default.createElement(
+          import_react_store_input3.Select,
           {
             store: form.store,
-            property: key,
-            type: value.type,
-            className: "input-form"
-          }
+            name: key,
+            className: "select-form"
+          },
+          /* @__PURE__ */ import_react13.default.createElement(Component, null)
         );
-      };
-      return /* @__PURE__ */ import_react8.default.createElement("label", { key }, value.label, createComponent());
-    })),
-    form.item && /* @__PURE__ */ import_react8.default.createElement(
-      "button",
-      {
-        className: "button-dangerous mt-8",
-        onClick: () => {
-          form.delete();
+      }
+      return /* @__PURE__ */ import_react13.default.createElement(
+        import_react_store_input3.Input,
+        {
+          store: form.store,
+          name: key,
+          type: value.type,
+          className: "input-form"
         }
-      },
-      "\uC0AD\uC81C\uD558\uAE30"
-    )
-  );
+      );
+    }
+    const v = form.store.state[key];
+    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__ */ import_react13.default.createElement(FormRow, null, /* @__PURE__ */ import_react13.default.createElement(FormEntry, null, /* @__PURE__ */ import_react13.default.createElement(FormLabel, { key }, value.label), /* @__PURE__ */ import_react13.default.createElement(InputComponent, null)));
+  })), form.item && /* @__PURE__ */ import_react13.default.createElement(
+    "button",
+    {
+      className: "button-dangerous mt-8",
+      onClick: () => {
+        form.delete();
+      }
+    },
+    "\uC0AD\uC81C\uD558\uAE30"
+  )));
 }
 
 // src/crud/crud_page.tsx
-var import_react9 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 function crudPage({
   name,
   tablePageOptions,
   formOptions,
-  AdminLayout
+  AdminHeader
 }) {
   return (prefix) => {
     return function Page() {
-      const data = (0, import_react_router5.useLoaderData)();
-      const { pathname } = (0, import_react_router5.useLocation)();
+      const data = (0, import_react_router7.useLoaderData)();
+      const { pathname } = (0, import_react_router7.useLocation)();
       if (pathname === prefix) {
         const Component = createTablePage({
           ...tablePageOptions,
           name
         });
-        return /* @__PURE__ */ import_react9.default.createElement(Component, { AdminLayout });
+        return /* @__PURE__ */ import_react14.default.createElement(Component, { AdminHeader });
       }
       if (pathname.startsWith(prefix)) {
-        return /* @__PURE__ */ import_react9.default.createElement(
+        return /* @__PURE__ */ import_react14.default.createElement(
           CrudFormProvider,
           {
             item: data?.item,
@@ -699,7 +742,7 @@ function crudPage({
             name,
             columns: formOptions.columns
           },
-          formOptions.form ? /* @__PURE__ */ import_react9.default.createElement(formOptions.form, null) : /* @__PURE__ */ import_react9.default.createElement(CrudForm, { AdminLayout })
+          formOptions.form ? /* @__PURE__ */ import_react14.default.createElement(formOptions.form, null) : /* @__PURE__ */ import_react14.default.createElement(CrudForm, { AdminHeader })
         );
       }
     };