@akanjs/ui 0.9.5 → 0.9.7

package/DraggableList.d.ts

@@ -8,6 +8,7 @@ interface DragListProps<V> {
         newIdx: number;
         idxChanged: boolean;
     }) => void;
+    onRemove: (value: V, idx: number) => void;
 }
 interface Cursor {
     className?: string;
@@ -18,8 +19,8 @@ interface ItemProps {
     children: ReactNode;
 }
 export declare const DraggableList: {
-    <V>({ className, mode, children, onChange }: DragListProps<V>): import("react/jsx-runtime").JSX.Element;
+    <V>({ className, mode, children, onChange, onRemove }: DragListProps<V>): import("react/jsx-runtime").JSX.Element;
     Cursor({ className, children }: Cursor): import("react/jsx-runtime").JSX.Element;
-    Item: ({ value, children }: ItemProps) => ReactNode;
+    Item: ({ value, children }: ItemProps) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/Input.d.ts

@@ -10,7 +10,7 @@ export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "
     inputClassName?: string;
     inputWrapperClassName?: string;
     onPressEnter?: (value: any, event: KeyboardEvent<HTMLInputElement>) => void;
-    validate: (value: string) => boolean | string;
+    validate?: (value: string) => boolean | string;
     onChange?: (value: string, e?: ChangeEvent<HTMLInputElement>) => void;
     onPressEscape?: (e: KeyboardEvent<HTMLInputElement>) => void;
 };

package/Select.d.ts

@@ -4,15 +4,18 @@ type Options<T> = T[] | {
     label: string | boolean | number;
     value: T;
 }[] | Enum<T>;
-interface SelectProps<T, Multiple extends boolean = false> {
+interface SelectProps<T, Multiple extends boolean = false, Searchable extends boolean = false> {
     label?: string;
     desc?: string;
     labelClassName?: string;
     className?: string;
     value: Multiple extends true ? T[] : T | null;
-    options: Options<T>;
+    options: Searchable extends true ? T extends string ? Options<T> : {
+        label: string | boolean | number;
+        value: T;
+    }[] : Options<T>;
     multiple?: Multiple;
-    searchable?: boolean;
+    searchable?: Searchable;
     placeholder?: string;
     selectClassName?: string;
     selectorClassName?: string;
@@ -25,5 +28,5 @@ interface SelectProps<T, Multiple extends boolean = false> {
     renderOption?: (value: T) => ReactNode;
     renderSelected?: (value: T) => ReactNode;
 }
-export declare const Select: <T, Multiple extends boolean = false>({ label, desc, labelClassName, className, value, options, nullable, disabled, multiple, searchable, placeholder, selectClassName, selectorClassName, selectedClassName, onOpen, onChange, onSearch, renderOption, renderSelected, }: SelectProps<T, Multiple>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <T, Multiple extends boolean = false, Searchable extends boolean = false>({ label, desc, labelClassName, className, value, options, nullable, disabled, multiple, searchable, placeholder, selectClassName, selectorClassName, selectedClassName, onOpen, onChange, onSearch, renderOption, renderSelected, }: SelectProps<T, Multiple, Searchable>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/cjs/DraggableList.js

@@ -38,9 +38,11 @@ var import_react = require("@use-gesture/react");
 var import_lodash = __toESM(require("lodash.clamp"));
 var import_lodash_move = __toESM(require("lodash-move"));
 var import_react2 = require("react");
+var import_bi = require("react-icons/bi");
+var import_md = require("react-icons/md");
 const dragListContext = (0, import_react2.createContext)({});
 const useDragList = () => (0, import_react2.useContext)(dragListContext);
-const DragList = ({ className, mode = "vertical", children, onChange }) => {
+const DragList = ({ className, mode = "vertical", children, onChange, onRemove }) => {
   const refs = (0, import_react2.useRef)([]);
   const order = (0, import_react2.useRef)(children.map((_, index) => index));
   const clientLengths = (0, import_react2.useRef)(children.map((_, index) => 0));
@@ -103,7 +105,18 @@ const DragList = ({ className, mode = "vertical", children, onChange }) => {
         ...mode === "vertical" ? { y: movement } : { x: movement }
         // cursor: "grab",
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(dragListContext.Provider, { value: { bind: () => bind(i) }, children: children[i] })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        dragListContext.Provider,
+        {
+          value: {
+            bind: () => bind(i),
+            onRemove: () => {
+              onRemove(children[i].props.value, i);
+            }
+          },
+          children: children[i]
+        }
+      )
     },
     i
   )) });
@@ -120,7 +133,21 @@ DragList.Cursor = ({ className, children }) => {
   );
 };
 const Item = ({ value, children }) => {
-  return children;
+  const { onRemove } = useDragList();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DraggableList.Cursor, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_md.MdDragIndicator, { className: "text-xl" }) }),
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        className: "btn btn-xs btn-error btn-square btn-outline",
+        onClick: () => {
+          onRemove(value);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bi.BiTrash, {})
+      }
+    )
+  ] }) });
 };
 DragList.Item = Item;
 const fn = (order, heights, newHeights, active = false, originalIndex = 0, movement = 0, finished = false) => (index) => {

package/cjs/Field.js

@@ -401,45 +401,55 @@ const TextList = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
     label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable: !minlength, label, desc }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-5 h-full gap-2 rounded-md border border-gray-300 p-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DraggableList.DraggableList, { className: "h-full gap-2", onChange, children: value.map((text, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DraggableList.DraggableList.Item, { value: text, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DraggableList.DraggableList.Cursor, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_md.MdDragIndicator, { className: "text-xl" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full items-center justify-center gap-5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_Input.Input,
-            {
-              value: text,
-              cacheKey: cache ? `${label}-${desc}-textList-[${idx}]` : void 0,
-              onChange: (text2) => {
-                const newValue = [...value];
-                newValue[idx] = transform(text2);
-                onChange(newValue);
-              },
-              validate: (text2) => {
-                if (text2.length < minlength)
-                  return l("shared.textTooShortError", { minlength: minTextlength });
-                else if (text2.length > maxlength)
-                  return l("shared.textTooLongError", { maxlength: maxTextlength });
-                else
-                  return validate?.(text2) ?? true;
-              },
-              className: (0, import_client.clsx)("w-full", inputClassName),
-              inputClassName: "w-full input-sm",
-              placeholder,
-              disabled
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              className: "btn btn-xs btn-error btn-square btn-outline",
-              onClick: () => {
-                onChange(value.filter((_, i) => i !== idx));
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bi.BiTrash, {})
-            }
-          )
-        ] })
-      ] }) }, idx)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_DraggableList.DraggableList,
+        {
+          className: "h-full gap-2",
+          onChange,
+          onRemove: (_, idx) => {
+            onChange(value.filter((_2, i) => i !== idx));
+          },
+          children: value.map((text, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DraggableList.DraggableList.Item, { value: text, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DraggableList.DraggableList.Cursor, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_md.MdDragIndicator, { className: "text-xl" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full items-center justify-center gap-5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_Input.Input,
+                {
+                  value: text,
+                  cacheKey: cache ? `${label}-${desc}-textList-[${idx}]` : void 0,
+                  onChange: (text2) => {
+                    const newValue = [...value];
+                    newValue[idx] = transform(text2);
+                    onChange(newValue);
+                  },
+                  validate: (text2) => {
+                    if (text2.length < minlength)
+                      return l("shared.textTooShortError", { minlength: minTextlength });
+                    else if (text2.length > maxlength)
+                      return l("shared.textTooLongError", { maxlength: maxTextlength });
+                    else
+                      return validate?.(text2) ?? true;
+                  },
+                  className: (0, import_client.clsx)("w-full", inputClassName),
+                  inputClassName: "w-full input-sm",
+                  placeholder,
+                  disabled
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  className: "btn btn-xs btn-error btn-square btn-outline",
+                  onClick: () => {
+                    onChange(value.filter((_, i) => i !== idx));
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bi.BiTrash, {})
+                }
+              )
+            ] })
+          ] }) }, idx))
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-base-content/20 my-5 h-[0.5px]" }),
       value.length <= maxTextlength ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "button",
@@ -982,7 +992,10 @@ const Parent = ({
         selectClassName,
         value: value?.id,
         searchable: true,
-        options: modelList.map((model) => model.id),
+        options: modelList.map((model) => {
+          const render = renderOption(model);
+          return { label: typeof render === "string" ? render : model.id, value: model.id };
+        }),
         renderOption: (modelId) => {
           const model = modelList.get(modelId);
           if (!model)
@@ -1002,11 +1015,7 @@ const Parent = ({
           if (!disabled)
             void storeDo[namesOfSlice.initModel](...initArgs ?? []);
         },
-        onSearch: (text) => {
-          if (text) {
-            onSearch?.(text);
-          }
-        }
+        onSearch
       }
     )
   ] });
@@ -1058,18 +1067,21 @@ const ParentId = ({
         labelClassName,
         selectClassName,
         value,
-        options: modelList.map((model) => ({ label: model.id, value: model.id })),
+        options: modelList.map((model) => {
+          const label2 = renderOption?.(model) ?? model.id;
+          return { label: typeof label2 === "string" ? label2 : model.id, value: model.id };
+        }),
         renderOption: (renderId) => {
           const model = modelList.get(renderId);
           if (!model)
             return null;
-          return renderOption?.(model);
+          return renderOption?.(model) ?? null;
         },
         renderSelected: (renderId) => {
           const model = modelList.get(renderId);
           if (!model)
             return null;
-          return renderSelected?.(model);
+          return renderSelected?.(model) ?? null;
         },
         onOpen: () => {
           if (!disabled)
@@ -1078,11 +1090,7 @@ const ParentId = ({
         onChange: (modelId) => {
           onChange(modelId, modelList.get(modelId));
         },
-        onSearch: (text) => {
-          if (text) {
-            onSearch?.(text);
-          }
-        }
+        onSearch
       }
     )
   ] });
@@ -1139,7 +1147,10 @@ const Children = ({
         selectClassName,
         multiple: true,
         value: value.map((model) => model.id),
-        options: modelList.map((model) => model.id),
+        options: modelList.map((model) => {
+          const label2 = renderOption(model);
+          return { label: typeof label2 === "string" ? label2 : model.id, value: model.id };
+        }),
         renderOption: (modelId) => {
           const model = modelList.get(modelId);
           if (!model)
@@ -1155,11 +1166,7 @@ const Children = ({
         onChange: (modelIds) => {
           onChange(modelIds.map((id) => modelList.get(id)).filter((model) => model !== void 0));
         },
-        onSearch: (text) => {
-          if (text) {
-            onSearch?.(text);
-          }
-        }
+        onSearch
       }
     )
   ] });
@@ -1209,7 +1216,10 @@ const ChildrenId = ({
         labelClassName,
         multiple: true,
         value,
-        options: modelList.map((model) => ({ label: model.id, value: model.id })),
+        options: modelList.map((model) => {
+          const label2 = renderOption(model);
+          return { label: typeof label2 === "string" ? label2 : model.id, value: model.id };
+        }),
         renderOption: (renderId) => {
           const model = modelList.get(renderId);
           if (!model)
@@ -1219,11 +1229,7 @@ const ChildrenId = ({
         onChange: (modelIds) => {
           onChange(modelIds);
         },
-        onSearch: (text) => {
-          if (text) {
-            onSearch?.(text);
-          }
-        }
+        onSearch
       }
     )
   ] });

package/cjs/Input.js

@@ -46,7 +46,7 @@ const Input = ({
 }) => {
   const { l } = (0, import_next.usePage)();
   const [firstFocus, setFirstFocus] = (0, import_react.useState)(true);
-  const validateResult = validate(value);
+  const validateResult = validate ? validate(value) : void 0;
   const status = !nullable && !value ? null : !value.length ? "warning" : validateResult === true ? "success" : "error";
   const invalidMessage = value && !value.length || validateResult === true || firstFocus ? null : validateResult === false ? l("util.invalidValueError") : validateResult;
   const statusClass = inputStyleType === "bordered" ? status === "error" ? "input-error" : !firstFocus && status === "warning" ? "input-warning" : status === "success" ? "input-success" : "" : "";
@@ -407,7 +407,7 @@ const Number = ({
   (0, import_react.useEffect)(() => {
     setFormatValue(generateFormat());
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("relative isolate mb-2", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("relative isolate", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex items-center", inputWrapperClassName), children: [
       icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_client.clsx)("absolute inset-y-0 left-4 z-10 flex items-center justify-center", iconClassName), children: icon }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/cjs/Layout/Template.js

@@ -23,5 +23,5 @@ module.exports = __toCommonJS(Template_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
 const Template = ({ className, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_client.clsx)("flex w-full max-w-[100vw] flex-col gap-6 p-2 lg:max-w-screen-md", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_client.clsx)("flex w-full max-w-[100vw] flex-col gap-6 p-2", className), children });
 };

package/cjs/Link/CsrLink.js

@@ -38,19 +38,21 @@ function CsrLink({
   const prefix = import_store.st.use.prefix();
   const currentPath = import_store.st.use.path();
   const { lang } = (0, import_next.usePage)();
-  const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
-  const { path } = (0, import_client.getPathInfo)(href, lang, prefix ?? "");
+  const { path, hash } = (0, import_client.getPathInfo)(href, lang, prefix ?? "");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "a",
     {
       className: (0, import_client.clsx)("cursor-pointer", className, { [activeClassName ?? ""]: currentPath === path }),
       onClick: () => {
+        const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
+        const isHash = href.startsWith("#");
+        const url = isHash ? `${window.location.pathname}#${hash}` : href;
         if (isExternal)
           void import_browser.Browser.open({ url: href, presentationStyle: "popover" });
         else if (replace)
-          import_client.router.replace(href, { scrollToTop });
+          import_client.router.replace(url, { scrollToTop });
         else
-          import_client.router.push(href, { scrollToTop });
+          import_client.router.push(url, { scrollToTop });
       },
       children
     }

package/cjs/Link/NextLink.js

@@ -49,19 +49,22 @@ function NextLink({
 }) {
   const prefix = import_store.st.use.prefix();
   const { lang } = (0, import_next.usePage)();
-  const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
-  const { path, pathname } = (0, import_client.getPathInfo)(href, lang, prefix ?? "");
   const currentPath = import_store.st.use.path();
+  const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
+  const { href: requestHref, path } = (0, import_client.getPathInfo)(href, lang, prefix ?? "");
+  if (href.startsWith("#")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: (0, import_client.clsx)(className, { [activeClassName ?? ""]: currentPath === path }), href, children });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_link.default,
     {
       className: (0, import_client.clsx)(className, { [activeClassName ?? ""]: currentPath === path }),
-      href: isExternal ? href : pathname,
+      href: isExternal ? href : href.startsWith("#") ? href : requestHref,
       passHref: true,
       replace,
       onClick: () => {
-        import_common.Logger.log(`pathChange-start:${path}`);
-        window.parent.postMessage({ type: "pathChange", path, pathname }, "*");
+        import_common.Logger.log(`pathChange-start:${requestHref}`);
+        window.parent.postMessage({ type: "pathChange", href: requestHref }, "*");
         if (scrollToTop)
           window.scrollTo(0, 0);
       },

package/cjs/Model/SureToRemove.js

@@ -50,76 +50,82 @@ function SureToRemove({
     }),
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "inline size-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "div",
-      {
-        className: (0, import_client.clsx)(
-          "text-error flex size-full cursor-pointer flex-nowrap items-center justify-center gap-2 whitespace-nowrap",
-          className
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: "inline size-full",
+      onClick: (e) => {
+        e.stopPropagation();
+        setModalOpen(true);
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: (0, import_client.clsx)(
+              "text-error flex size-full cursor-pointer flex-nowrap items-center justify-center gap-2 whitespace-nowrap",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineDelete, {}),
+              " ",
+              l("shared.remove")
+            ]
+          }
         ),
-        onClick: (e) => {
-          e.stopPropagation();
-          setModalOpen(true);
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineDelete, {}),
-          " ",
-          l("shared.remove")
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_Modal.Modal,
-      {
-        open: modalOpen,
-        onCancel: () => {
-          setModalOpen(false);
-        },
-        title: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-error text-lg font-bold", children: l("shared.removeModel", { model: l(`${modelName}.modelName`) }) }),
-        bodyClassName: "border-error",
-        action: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_Modal.Modal,
           {
-            className: "btn btn-error w-full",
-            disabled: typeNameToRemove && repeatName !== name,
-            onClick: async () => {
-              await storeDo[names.removeModel](modelId);
-              import_dictionary.msg.success("shared.removeSuccess", { data: { model: l(`${modelName}.modelName`) } });
+            open: modalOpen,
+            onCancel: () => {
               setModalOpen(false);
-              if (!redirect)
-                return;
-              if (redirect === "back")
-                import_client.router.back();
-              else
-                import_client.router.push(redirect);
             },
-            children: l("shared.removeModel", { model: l(`${modelName}.modelName`) })
-          }
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "py-4", children: [
-            l("shared.sureToRemove", { model: l(`${modelName}.modelName`), name }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
-            l("shared.irreversibleOps"),
-            typeNameToRemove ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
-              l("shared.typeNameToRemove", { model: l(`${modelName}.modelName`), name })
-            ] }) : null
-          ] }),
-          typeNameToRemove ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "input",
-            {
-              className: "input w-full text-center",
-              placeholder: `${l(`${modelName}.modelName`)} name`,
-              value: repeatName,
-              onChange: (e) => {
-                setRepeatName(e.target.value);
+            title: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-error text-lg font-bold", children: l("shared.removeModel", { model: l(`${modelName}.modelName`) }) }),
+            bodyClassName: "border-error",
+            action: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                className: "btn btn-error w-full",
+                disabled: typeNameToRemove && repeatName !== name,
+                onClick: async () => {
+                  await storeDo[names.removeModel](modelId);
+                  import_dictionary.msg.success("shared.removeSuccess", { data: { model: l(`${modelName}.modelName`) } });
+                  setModalOpen(false);
+                  if (!redirect)
+                    return;
+                  if (redirect === "back")
+                    import_client.router.back();
+                  else
+                    import_client.router.push(redirect);
+                },
+                children: l("shared.removeModel", { model: l(`${modelName}.modelName`) })
               }
-            }
-          ) : null
-        ]
-      }
-    )
-  ] });
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "py-4", children: [
+                l("shared.sureToRemove", { model: l(`${modelName}.modelName`), name }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+                l("shared.irreversibleOps"),
+                typeNameToRemove ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+                  l("shared.typeNameToRemove", { model: l(`${modelName}.modelName`), name })
+                ] }) : null
+              ] }),
+              typeNameToRemove ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  className: "input w-full text-center",
+                  placeholder: `${l(`${modelName}.modelName`)} name`,
+                  value: repeatName,
+                  onChange: (e) => {
+                    setRepeatName(e.target.value);
+                  }
+                }
+              ) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
 }

package/cjs/Select.js

@@ -90,7 +90,8 @@ const Select = ({
   };
   const debouncedOnSearch = (0, import_next.useDebounce)(
     (text) => {
-      onSearch?.(text);
+      if (text)
+        onSearch?.(text);
     },
     [searchText],
     300
@@ -166,7 +167,7 @@ const Select = ({
                 return null;
               return renderSelected ? renderSelected(optionValue.value) : optionValue.label;
             })() }) : "" }),
-            searchable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            searchable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "input",
               {
                 type: "text",
@@ -176,12 +177,13 @@ const Select = ({
                 onChange: (e) => {
                   if (!isOpen)
                     setIsOpen(true);
-                  if (!onSearch)
+                  if (!onSearch) {
                     setSearchOptions(
                       labeledOptions.filter(
                         (option) => option.label.toString().toLowerCase().includes(e.target.value.toLowerCase())
                       )
                     );
+                  }
                   setSearchText(e.target.value);
                   debouncedOnSearch(e.target.value);
                 },
@@ -191,7 +193,7 @@ const Select = ({
                   setIsOpen(!isOpen);
                 }
               }
-            )
+            ) : null
           ] }),
           multiple && selectedValues.length || !multiple && selectedValues[0] !== void 0 && selectedValues[0] !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_ti.TiDelete,

package/cjs/System/CSR.js

@@ -64,7 +64,7 @@ const CSRProvider = ({
         return { lang };
       },
       render: ({ lang }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Client.Client.Wrapper, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Client.Client.Wrapper, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           CSRWrapper,
           {
             className,
@@ -74,11 +74,7 @@ const CSRProvider = ({
             fonts,
             prefix,
             layoutStyle,
-            children: [
-              children,
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Client.Client.Inner, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CSRInner, {})
-            ]
+            children
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -90,6 +86,8 @@ const CSRProvider = ({
             fetchMe,
             fetchSelf,
             render: ({ mePromise, selfPromise }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Client.Client.Inner, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CSRInner, {}),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_Client.Client.Bridge,
                 {

package/cjs/System/Client.js

@@ -60,6 +60,8 @@ const ClientPathWrapper = ({
   layoutStyle = "web",
   ...props
 }) => {
+  const href = location?.href ?? (typeof window !== "undefined" ? window.location.href : "");
+  const hash = location?.hash ?? (typeof window !== "undefined" ? window.location.hash : "");
   const pathname = location?.pathname ?? (0, import_navigation.usePathname)();
   const params = location?.params ?? (0, import_navigation.useParams)();
   const searchParams = location?.searchParams ?? Object.fromEntries((0, import_navigation.useSearchParams)());
@@ -80,7 +82,7 @@ const ClientPathWrapper = ({
     {
       value: {
         pageType,
-        location: { pathname, params, searchParams, search, pathRoute },
+        location: { href, hash, pathname, params, searchParams, search, pathRoute },
         gestureEnabled,
         setGestureEnabled
       },

package/esm/DraggableList.js

@@ -1,14 +1,16 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 import { animated, config, useSprings } from "@react-spring/web";
 import { useGesture } from "@use-gesture/react";
 import clamp from "lodash.clamp";
 import swap from "lodash-move";
 import { createContext, useContext, useRef } from "react";
+import { BiTrash } from "react-icons/bi";
+import { MdDragIndicator } from "react-icons/md";
 const dragListContext = createContext({});
 const useDragList = () => useContext(dragListContext);
-const DragList = ({ className, mode = "vertical", children, onChange }) => {
+const DragList = ({ className, mode = "vertical", children, onChange, onRemove }) => {
   const refs = useRef([]);
   const order = useRef(children.map((_, index) => index));
   const clientLengths = useRef(children.map((_, index) => 0));
@@ -71,7 +73,18 @@ const DragList = ({ className, mode = "vertical", children, onChange }) => {
         ...mode === "vertical" ? { y: movement } : { x: movement }
         // cursor: "grab",
       },
-      children: /* @__PURE__ */ jsx(dragListContext.Provider, { value: { bind: () => bind(i) }, children: children[i] })
+      children: /* @__PURE__ */ jsx(
+        dragListContext.Provider,
+        {
+          value: {
+            bind: () => bind(i),
+            onRemove: () => {
+              onRemove(children[i].props.value, i);
+            }
+          },
+          children: children[i]
+        }
+      )
     },
     i
   )) });
@@ -88,7 +101,21 @@ DragList.Cursor = ({ className, children }) => {
   );
 };
 const Item = ({ value, children }) => {
-  return children;
+  const { onRemove } = useDragList();
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
+    /* @__PURE__ */ jsx(DraggableList.Cursor, { children: /* @__PURE__ */ jsx(MdDragIndicator, { className: "text-xl" }) }),
+    children,
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "btn btn-xs btn-error btn-square btn-outline",
+        onClick: () => {
+          onRemove(value);
+        },
+        children: /* @__PURE__ */ jsx(BiTrash, {})
+      }
+    )
+  ] }) });
 };
 DragList.Item = Item;
 const fn = (order, heights, newHeights, active = false, originalIndex = 0, movement = 0, finished = false) => (index) => {

package/esm/Field.js

@@ -379,45 +379,55 @@ const TextList = ({
   return /* @__PURE__ */ jsxs("div", { className: clsx("flex flex-col", className), children: [
     label ? /* @__PURE__ */ jsx(Label, { className: labelClassName, nullable: !minlength, label, desc }) : null,
     /* @__PURE__ */ jsxs("div", { className: "mb-5 h-full gap-2 rounded-md border border-gray-300 p-2", children: [
-      /* @__PURE__ */ jsx(DraggableList, { className: "h-full gap-2", onChange, children: value.map((text, idx) => /* @__PURE__ */ jsx(DraggableList.Item, { value: text, children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center", children: [
-        /* @__PURE__ */ jsx(DraggableList.Cursor, { children: /* @__PURE__ */ jsx(MdDragIndicator, { className: "text-xl" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-center gap-5", children: [
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              value: text,
-              cacheKey: cache ? `${label}-${desc}-textList-[${idx}]` : void 0,
-              onChange: (text2) => {
-                const newValue = [...value];
-                newValue[idx] = transform(text2);
-                onChange(newValue);
-              },
-              validate: (text2) => {
-                if (text2.length < minlength)
-                  return l("shared.textTooShortError", { minlength: minTextlength });
-                else if (text2.length > maxlength)
-                  return l("shared.textTooLongError", { maxlength: maxTextlength });
-                else
-                  return validate?.(text2) ?? true;
-              },
-              className: clsx("w-full", inputClassName),
-              inputClassName: "w-full input-sm",
-              placeholder,
-              disabled
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "btn btn-xs btn-error btn-square btn-outline",
-              onClick: () => {
-                onChange(value.filter((_, i) => i !== idx));
-              },
-              children: /* @__PURE__ */ jsx(BiTrash, {})
-            }
-          )
-        ] })
-      ] }) }, idx)) }),
+      /* @__PURE__ */ jsx(
+        DraggableList,
+        {
+          className: "h-full gap-2",
+          onChange,
+          onRemove: (_, idx) => {
+            onChange(value.filter((_2, i) => i !== idx));
+          },
+          children: value.map((text, idx) => /* @__PURE__ */ jsx(DraggableList.Item, { value: text, children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center", children: [
+            /* @__PURE__ */ jsx(DraggableList.Cursor, { children: /* @__PURE__ */ jsx(MdDragIndicator, { className: "text-xl" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-center gap-5", children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  value: text,
+                  cacheKey: cache ? `${label}-${desc}-textList-[${idx}]` : void 0,
+                  onChange: (text2) => {
+                    const newValue = [...value];
+                    newValue[idx] = transform(text2);
+                    onChange(newValue);
+                  },
+                  validate: (text2) => {
+                    if (text2.length < minlength)
+                      return l("shared.textTooShortError", { minlength: minTextlength });
+                    else if (text2.length > maxlength)
+                      return l("shared.textTooLongError", { maxlength: maxTextlength });
+                    else
+                      return validate?.(text2) ?? true;
+                  },
+                  className: clsx("w-full", inputClassName),
+                  inputClassName: "w-full input-sm",
+                  placeholder,
+                  disabled
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "btn btn-xs btn-error btn-square btn-outline",
+                  onClick: () => {
+                    onChange(value.filter((_, i) => i !== idx));
+                  },
+                  children: /* @__PURE__ */ jsx(BiTrash, {})
+                }
+              )
+            ] })
+          ] }) }, idx))
+        }
+      ),
       /* @__PURE__ */ jsx("div", { className: "bg-base-content/20 my-5 h-[0.5px]" }),
       value.length <= maxTextlength ? /* @__PURE__ */ jsx(
         "button",
@@ -960,7 +970,10 @@ const Parent = ({
         selectClassName,
         value: value?.id,
         searchable: true,
-        options: modelList.map((model) => model.id),
+        options: modelList.map((model) => {
+          const render = renderOption(model);
+          return { label: typeof render === "string" ? render : model.id, value: model.id };
+        }),
         renderOption: (modelId) => {
           const model = modelList.get(modelId);
           if (!model)
@@ -980,11 +993,7 @@ const Parent = ({
           if (!disabled)
             void storeDo[namesOfSlice.initModel](...initArgs ?? []);
         },
-        onSearch: (text) => {
-          if (text) {
-            onSearch?.(text);
-          }
-        }
+        onSearch
       }
     )
   ] });
@@ -1036,18 +1045,21 @@ const ParentId = ({
         labelClassName,
         selectClassName,
         value,
-        options: modelList.map((model) => ({ label: model.id, value: model.id })),
+        options: modelList.map((model) => {
+          const label2 = renderOption?.(model) ?? model.id;
+          return { label: typeof label2 === "string" ? label2 : model.id, value: model.id };
+        }),
         renderOption: (renderId) => {
           const model = modelList.get(renderId);
           if (!model)
             return null;
-          return renderOption?.(model);
+          return renderOption?.(model) ?? null;
         },
         renderSelected: (renderId) => {
           const model = modelList.get(renderId);
           if (!model)
             return null;
-          return renderSelected?.(model);
+          return renderSelected?.(model) ?? null;
         },
         onOpen: () => {
           if (!disabled)
@@ -1056,11 +1068,7 @@ const ParentId = ({
         onChange: (modelId) => {
           onChange(modelId, modelList.get(modelId));
         },
-        onSearch: (text) => {
-          if (text) {
-            onSearch?.(text);
-          }
-        }
+        onSearch
       }
     )
   ] });
@@ -1117,7 +1125,10 @@ const Children = ({
         selectClassName,
         multiple: true,
         value: value.map((model) => model.id),
-        options: modelList.map((model) => model.id),
+        options: modelList.map((model) => {
+          const label2 = renderOption(model);
+          return { label: typeof label2 === "string" ? label2 : model.id, value: model.id };
+        }),
         renderOption: (modelId) => {
           const model = modelList.get(modelId);
           if (!model)
@@ -1133,11 +1144,7 @@ const Children = ({
         onChange: (modelIds) => {
           onChange(modelIds.map((id) => modelList.get(id)).filter((model) => model !== void 0));
         },
-        onSearch: (text) => {
-          if (text) {
-            onSearch?.(text);
-          }
-        }
+        onSearch
       }
     )
   ] });
@@ -1187,7 +1194,10 @@ const ChildrenId = ({
         labelClassName,
         multiple: true,
         value,
-        options: modelList.map((model) => ({ label: model.id, value: model.id })),
+        options: modelList.map((model) => {
+          const label2 = renderOption(model);
+          return { label: typeof label2 === "string" ? label2 : model.id, value: model.id };
+        }),
         renderOption: (renderId) => {
           const model = modelList.get(renderId);
           if (!model)
@@ -1197,11 +1207,7 @@ const ChildrenId = ({
         onChange: (modelIds) => {
           onChange(modelIds);
         },
-        onSearch: (text) => {
-          if (text) {
-            onSearch?.(text);
-          }
-        }
+        onSearch
       }
     )
   ] });

package/esm/Input.js

@@ -28,7 +28,7 @@ const Input = ({
 }) => {
   const { l } = usePage();
   const [firstFocus, setFirstFocus] = useState(true);
-  const validateResult = validate(value);
+  const validateResult = validate ? validate(value) : void 0;
   const status = !nullable && !value ? null : !value.length ? "warning" : validateResult === true ? "success" : "error";
   const invalidMessage = value && !value.length || validateResult === true || firstFocus ? null : validateResult === false ? l("util.invalidValueError") : validateResult;
   const statusClass = inputStyleType === "bordered" ? status === "error" ? "input-error" : !firstFocus && status === "warning" ? "input-warning" : status === "success" ? "input-success" : "" : "";
@@ -389,7 +389,7 @@ const Number = ({
   useEffect(() => {
     setFormatValue(generateFormat());
   }, [value]);
-  return /* @__PURE__ */ jsxs("div", { className: clsx("relative isolate mb-2", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx("relative isolate", className), children: [
     /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center", inputWrapperClassName), children: [
       icon ? /* @__PURE__ */ jsx("div", { className: clsx("absolute inset-y-0 left-4 z-10 flex items-center justify-center", iconClassName), children: icon }) : null,
       /* @__PURE__ */ jsx(

package/esm/Layout/Template.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 const Template = ({ className, children }) => {
-  return /* @__PURE__ */ jsx("div", { className: clsx("flex w-full max-w-[100vw] flex-col gap-6 p-2 lg:max-w-screen-md", className), children });
+  return /* @__PURE__ */ jsx("div", { className: clsx("flex w-full max-w-[100vw] flex-col gap-6 p-2", className), children });
 };
 export {
   Template

package/esm/Link/CsrLink.js

@@ -16,19 +16,21 @@ function CsrLink({
   const prefix = st.use.prefix();
   const currentPath = st.use.path();
   const { lang } = usePage();
-  const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
-  const { path } = getPathInfo(href, lang, prefix ?? "");
+  const { path, hash } = getPathInfo(href, lang, prefix ?? "");
   return /* @__PURE__ */ jsx(
     "a",
     {
       className: clsx("cursor-pointer", className, { [activeClassName ?? ""]: currentPath === path }),
       onClick: () => {
+        const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
+        const isHash = href.startsWith("#");
+        const url = isHash ? `${window.location.pathname}#${hash}` : href;
         if (isExternal)
           void Browser.open({ url: href, presentationStyle: "popover" });
         else if (replace)
-          router.replace(href, { scrollToTop });
+          router.replace(url, { scrollToTop });
         else
-          router.push(href, { scrollToTop });
+          router.push(url, { scrollToTop });
       },
       children
     }

package/esm/Link/NextLink.js

@@ -17,19 +17,22 @@ function NextLink({
 }) {
   const prefix = st.use.prefix();
   const { lang } = usePage();
-  const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
-  const { path, pathname } = getPathInfo(href, lang, prefix ?? "");
   const currentPath = st.use.path();
+  const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
+  const { href: requestHref, path } = getPathInfo(href, lang, prefix ?? "");
+  if (href.startsWith("#")) {
+    return /* @__PURE__ */ jsx("a", { className: clsx(className, { [activeClassName ?? ""]: currentPath === path }), href, children });
+  }
   return /* @__PURE__ */ jsx(
     NextjsLink,
     {
       className: clsx(className, { [activeClassName ?? ""]: currentPath === path }),
-      href: isExternal ? href : pathname,
+      href: isExternal ? href : href.startsWith("#") ? href : requestHref,
       passHref: true,
       replace,
       onClick: () => {
-        Logger.log(`pathChange-start:${path}`);
-        window.parent.postMessage({ type: "pathChange", path, pathname }, "*");
+        Logger.log(`pathChange-start:${requestHref}`);
+        window.parent.postMessage({ type: "pathChange", href: requestHref }, "*");
         if (scrollToTop)
           window.scrollTo(0, 0);
       },

package/esm/Model/SureToRemove.js

@@ -28,78 +28,84 @@ function SureToRemove({
     }),
     []
   );
-  return /* @__PURE__ */ jsxs("div", { className: "inline size-full", children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: clsx(
-          "text-error flex size-full cursor-pointer flex-nowrap items-center justify-center gap-2 whitespace-nowrap",
-          className
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "inline size-full",
+      onClick: (e) => {
+        e.stopPropagation();
+        setModalOpen(true);
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx(
+              "text-error flex size-full cursor-pointer flex-nowrap items-center justify-center gap-2 whitespace-nowrap",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsx(AiOutlineDelete, {}),
+              " ",
+              l("shared.remove")
+            ]
+          }
         ),
-        onClick: (e) => {
-          e.stopPropagation();
-          setModalOpen(true);
-        },
-        children: [
-          /* @__PURE__ */ jsx(AiOutlineDelete, {}),
-          " ",
-          l("shared.remove")
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      Modal,
-      {
-        open: modalOpen,
-        onCancel: () => {
-          setModalOpen(false);
-        },
-        title: /* @__PURE__ */ jsx("div", { className: "text-error text-lg font-bold", children: l("shared.removeModel", { model: l(`${modelName}.modelName`) }) }),
-        bodyClassName: "border-error",
-        action: /* @__PURE__ */ jsx(
-          "button",
+        /* @__PURE__ */ jsxs(
+          Modal,
           {
-            className: "btn btn-error w-full",
-            disabled: typeNameToRemove && repeatName !== name,
-            onClick: async () => {
-              await storeDo[names.removeModel](modelId);
-              msg.success("shared.removeSuccess", { data: { model: l(`${modelName}.modelName`) } });
+            open: modalOpen,
+            onCancel: () => {
               setModalOpen(false);
-              if (!redirect)
-                return;
-              if (redirect === "back")
-                router.back();
-              else
-                router.push(redirect);
             },
-            children: l("shared.removeModel", { model: l(`${modelName}.modelName`) })
-          }
-        ),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "py-4", children: [
-            l("shared.sureToRemove", { model: l(`${modelName}.modelName`), name }),
-            /* @__PURE__ */ jsx("br", {}),
-            l("shared.irreversibleOps"),
-            typeNameToRemove ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("br", {}),
-              l("shared.typeNameToRemove", { model: l(`${modelName}.modelName`), name })
-            ] }) : null
-          ] }),
-          typeNameToRemove ? /* @__PURE__ */ jsx(
-            "input",
-            {
-              className: "input w-full text-center",
-              placeholder: `${l(`${modelName}.modelName`)} name`,
-              value: repeatName,
-              onChange: (e) => {
-                setRepeatName(e.target.value);
+            title: /* @__PURE__ */ jsx("div", { className: "text-error text-lg font-bold", children: l("shared.removeModel", { model: l(`${modelName}.modelName`) }) }),
+            bodyClassName: "border-error",
+            action: /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "btn btn-error w-full",
+                disabled: typeNameToRemove && repeatName !== name,
+                onClick: async () => {
+                  await storeDo[names.removeModel](modelId);
+                  msg.success("shared.removeSuccess", { data: { model: l(`${modelName}.modelName`) } });
+                  setModalOpen(false);
+                  if (!redirect)
+                    return;
+                  if (redirect === "back")
+                    router.back();
+                  else
+                    router.push(redirect);
+                },
+                children: l("shared.removeModel", { model: l(`${modelName}.modelName`) })
               }
-            }
-          ) : null
-        ]
-      }
-    )
-  ] });
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "py-4", children: [
+                l("shared.sureToRemove", { model: l(`${modelName}.modelName`), name }),
+                /* @__PURE__ */ jsx("br", {}),
+                l("shared.irreversibleOps"),
+                typeNameToRemove ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("br", {}),
+                  l("shared.typeNameToRemove", { model: l(`${modelName}.modelName`), name })
+                ] }) : null
+              ] }),
+              typeNameToRemove ? /* @__PURE__ */ jsx(
+                "input",
+                {
+                  className: "input w-full text-center",
+                  placeholder: `${l(`${modelName}.modelName`)} name`,
+                  value: repeatName,
+                  onChange: (e) => {
+                    setRepeatName(e.target.value);
+                  }
+                }
+              ) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   SureToRemove as default

package/esm/Select.js

@@ -68,7 +68,8 @@ const Select = ({
   };
   const debouncedOnSearch = useDebounce(
     (text) => {
-      onSearch?.(text);
+      if (text)
+        onSearch?.(text);
     },
     [searchText],
     300
@@ -144,7 +145,7 @@ const Select = ({
                 return null;
               return renderSelected ? renderSelected(optionValue.value) : optionValue.label;
             })() }) : "" }),
-            searchable && /* @__PURE__ */ jsx(
+            searchable ? /* @__PURE__ */ jsx(
               "input",
               {
                 type: "text",
@@ -154,12 +155,13 @@ const Select = ({
                 onChange: (e) => {
                   if (!isOpen)
                     setIsOpen(true);
-                  if (!onSearch)
+                  if (!onSearch) {
                     setSearchOptions(
                       labeledOptions.filter(
                         (option) => option.label.toString().toLowerCase().includes(e.target.value.toLowerCase())
                       )
                     );
+                  }
                   setSearchText(e.target.value);
                   debouncedOnSearch(e.target.value);
                 },
@@ -169,7 +171,7 @@ const Select = ({
                   setIsOpen(!isOpen);
                 }
               }
-            )
+            ) : null
           ] }),
           multiple && selectedValues.length || !multiple && selectedValues[0] !== void 0 && selectedValues[0] !== null ? /* @__PURE__ */ jsx(
             TiDelete,

package/esm/System/CSR.js

@@ -41,7 +41,7 @@ const CSRProvider = ({
         return { lang };
       },
       render: ({ lang }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Client.Wrapper, { theme, children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(Client.Wrapper, { theme, children: /* @__PURE__ */ jsx(
           CSRWrapper,
           {
             className,
@@ -51,11 +51,7 @@ const CSRProvider = ({
             fonts,
             prefix,
             layoutStyle,
-            children: [
-              children,
-              /* @__PURE__ */ jsx(Client.Inner, {}),
-              /* @__PURE__ */ jsx(CSRInner, {})
-            ]
+            children
           }
         ) }),
         /* @__PURE__ */ jsx(
@@ -67,6 +63,8 @@ const CSRProvider = ({
             fetchMe,
             fetchSelf,
             render: ({ mePromise, selfPromise }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Client.Inner, {}),
+              /* @__PURE__ */ jsx(CSRInner, {}),
               /* @__PURE__ */ jsx(
                 Client.Bridge,
                 {

package/esm/System/Client.js

@@ -43,6 +43,8 @@ const ClientPathWrapper = ({
   layoutStyle = "web",
   ...props
 }) => {
+  const href = location?.href ?? (typeof window !== "undefined" ? window.location.href : "");
+  const hash = location?.hash ?? (typeof window !== "undefined" ? window.location.hash : "");
   const pathname = location?.pathname ?? usePathname();
   const params = location?.params ?? useParams();
   const searchParams = location?.searchParams ?? Object.fromEntries(useSearchParams());
@@ -63,7 +65,7 @@ const ClientPathWrapper = ({
     {
       value: {
         pageType,
-        location: { pathname, params, searchParams, search, pathRoute },
+        location: { href, hash, pathname, params, searchParams, search, pathRoute },
         gestureEnabled,
         setGestureEnabled
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akanjs/ui",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "sourceType": "module",
   "publishConfig": {
     "access": "public"