@akanjs/ui 0.0.150 → 0.0.152

package/cjs/Field.js

@@ -0,0 +1,1231 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Field_exports = {};
+__export(Field_exports, {
+  Field: () => Field
+});
+module.exports = __toCommonJS(Field_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_base = require("@akanjs/base");
+var import_client = require("@akanjs/client");
+var import_common = require("@akanjs/common");
+var import_next = require("@akanjs/next");
+var import_store = require("@akanjs/store");
+var import_react = require("react");
+var import_ai = require("react-icons/ai");
+var import_bi = require("react-icons/bi");
+var import_md = require("react-icons/md");
+var import_DraggableList = require("./DraggableList");
+var import_Input = require("./Input");
+var import_Select = require("./Select");
+var import_ToggleSelect = require("./ToggleSelect");
+const Label = ({ className, label, desc, unit, nullable, mode = "edit" }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: (0, import_client.clsx)("flex shrink-0 items-center gap-1", className), children: [
+    (0, import_common.capitalize)(label),
+    unit ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "animate-fadeIn", children: [
+      " (",
+      unit,
+      ")"
+    ] }) : null,
+    desc ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tooltip tooltip-info tooltip-right", "data-tip": desc, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bi.BiHelpCircle, {}) }) : null,
+    nullable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-gray-400", children: "(optional)" }) : null
+  ] });
+};
+const Field = ({
+  className,
+  containerClassName,
+  labelClassName,
+  label,
+  desc,
+  nullable,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("w-full", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_client.clsx)("mt-2 flex w-full flex-col gap-4 px-4", containerClassName), children })
+  ] });
+};
+Field.Label = Label;
+const List = ({
+  className,
+  labelClassName,
+  label,
+  desc,
+  value,
+  onChange,
+  onAdd,
+  nullable,
+  renderItem
+}) => {
+  const { l } = (0, import_next.usePage)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex w-full flex-col", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { className: labelClassName, nullable, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 flex w-full flex-col gap-2 rounded-md border border-gray-300 p-2", children: [
+      value.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-full w-full items-center justify-between gap-2", children: [
+          renderItem(item, idx),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex gap-2 border-l border-gray-300 pl-2", children: /* @__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: "h-[0.5px] w-full bg-gray-300 px-2 last:h-0" })
+      ] })),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          className: "btn btn-outline",
+          onClick: () => {
+            onAdd();
+          },
+          children: [
+            "+ ",
+            l("shared.addModel", { model: l("appSubRoute.modelName") })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+Field.List = List;
+const Text = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  placeholder,
+  nullable,
+  disabled,
+  minlength = nullable ? 0 : 2,
+  maxlength = 200,
+  transform = (v) => v,
+  validate,
+  onPressEnter,
+  cache,
+  inputClassName,
+  inputStyleType = "bordered"
+}) => {
+  const { l } = (0, import_next.usePage)();
+  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, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Input.Input,
+      {
+        cacheKey: cache ? `${label}-${desc}-text` : void 0,
+        inputStyleType,
+        value: value ?? "",
+        nullable,
+        placeholder,
+        onChange: (value2) => {
+          onChange(transform(value2));
+        },
+        disabled,
+        className: (0, import_client.clsx)("w-full", ""),
+        inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
+        validate: (text) => {
+          if (text.length < minlength)
+            return l("shared.textTooShortError", { minlength });
+          else if (text.length > maxlength)
+            return l("shared.textTooLongError", { maxlength });
+          else
+            return validate?.(text) ?? true;
+        },
+        onPressEnter
+      }
+    )
+  ] });
+};
+Field.Text = (0, import_react.memo)(Text);
+//! 삭제
+const Price = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  placeholder,
+  nullable,
+  disabled,
+  minlength = nullable ? 0 : 2,
+  maxlength = 80,
+  transform = (v) => v,
+  validate,
+  onPressEnter,
+  inputClassName,
+  inputStyleType = "bordered"
+}) => {
+  const { l } = (0, import_next.usePage)();
+  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, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Input.Input,
+      {
+        inputStyleType,
+        value: value ?? "",
+        nullable,
+        placeholder: placeholder ?? `~ ${l("shared.priceUnit")}`,
+        onChange: (value2) => {
+          const withoutComma = value2.replace(/,/g, "").replace(/ /g, "");
+          onChange(transform(withoutComma));
+        },
+        disabled,
+        className: (0, import_client.clsx)("w-full", ""),
+        inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
+        validate: (text) => {
+          if (text.length < minlength)
+            return l("shared.textTooShortError", { minlength });
+          else if (text.length > maxlength)
+            return l("shared.textTooLongError", { maxlength });
+          else
+            return validate?.(text) ?? true;
+        },
+        onPressEnter
+      }
+    )
+  ] });
+};
+Field.Price = (0, import_react.memo)(Price);
+const TextArea = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  placeholder,
+  nullable,
+  disabled,
+  rows = 3,
+  minlength = nullable ? 0 : 2,
+  maxlength = 1e3,
+  transform = (v) => v,
+  validate,
+  onPressEnter,
+  cache,
+  inputClassName
+}) => {
+  const { l } = (0, import_next.usePage)();
+  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, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Input.Input.TextArea,
+      {
+        value: value ?? "",
+        cacheKey: cache ? `${label}-${desc}-textArea` : void 0,
+        nullable,
+        placeholder,
+        onChange: (value2) => {
+          onChange(transform(value2));
+        },
+        disabled,
+        rows,
+        className: (0, import_client.clsx)("h-full w-full"),
+        inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
+        validate: (text) => {
+          if (text.length < minlength)
+            return l("shared.textTooShortError", { minlength });
+          else if (text.length > maxlength)
+            return l("shared.textTooLongError", { maxlength });
+          else
+            return validate?.(text) ?? true;
+        },
+        onPressEnter
+      }
+    )
+  ] });
+};
+Field.TextArea = (0, import_react.memo)(TextArea);
+const Switch = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  disabled,
+  inputClassName,
+  onDesc,
+  offDesc
+}) => {
+  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: true, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          disabled,
+          className: (0, import_client.clsx)("toggle toggle-accent", inputClassName),
+          checked: value,
+          onChange: (e) => {
+            onChange(e.target.checked);
+          }
+        }
+      ),
+      onDesc ?? offDesc ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-info text-sm", children: value ? onDesc : offDesc }) : null
+    ] })
+  ] });
+};
+Field.Switch = Switch;
+const ToggleSelect = ({
+  className,
+  labelClassName,
+  label,
+  desc,
+  model,
+  field,
+  items,
+  value,
+  validate,
+  onChange,
+  nullable,
+  disabled,
+  btnClassName
+}) => {
+  const { l } = (0, import_next.usePage)();
+  const isEnum = items instanceof import_base.Enum;
+  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, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ToggleSelect.ToggleSelect,
+      {
+        className: "mt-2",
+        nullable: !!nullable,
+        btnClassName,
+        items: model && field ? (isEnum ? items.values : items).map((item) => ({
+          label: l.enum(model, field, item),
+          value: item
+        })) : isEnum ? items.values : items,
+        value,
+        onChange: (value2, idx) => {
+          onChange(value2);
+        },
+        disabled,
+        validate: (value2) => {
+          return validate?.(value2) ?? true;
+        }
+      }
+    )
+  ] });
+};
+Field.ToggleSelect = ToggleSelect;
+const MultiToggleSelect = ({
+  className,
+  labelClassName,
+  label,
+  desc,
+  model,
+  field,
+  items,
+  value,
+  minlength,
+  maxlength,
+  validate,
+  onChange,
+  disabled
+}) => {
+  const { l } = (0, import_next.usePage)();
+  const isEnum = items instanceof import_base.Enum;
+  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.jsx)(
+      import_ToggleSelect.ToggleSelect.Multi,
+      {
+        nullable: !minlength,
+        items: model && field ? (isEnum ? items.values : items).map((item) => ({
+          label: l.enum(model, field, item),
+          value: item
+        })) : isEnum ? items.values : items,
+        value,
+        onChange: (values) => {
+          onChange(values);
+        },
+        disabled,
+        validate: (value2) => {
+          if (minlength && value2.length < minlength)
+            return l("shared.selectTooShortError", { minlength });
+          else if (maxlength && value2.length > maxlength)
+            return l("shared.selectTooLongError", { maxlength });
+          else
+            return validate?.(value2) ?? true;
+        }
+      }
+    )
+  ] });
+};
+Field.MultiToggleSelect = MultiToggleSelect;
+const TextList = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  transform = (v) => v,
+  minlength = 0,
+  maxlength = 50,
+  minTextlength = 2,
+  maxTextlength = 200,
+  cache,
+  validate,
+  inputClassName
+}) => {
+  const { l } = (0, import_next.usePage)();
+  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)("div", { className: "bg-base-content/20 my-5 h-[0.5px]" }),
+      value.length <= maxTextlength ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          className: "btn btn-outline w-full",
+          onClick: () => {
+            onChange([...value, ""]);
+          },
+          children: "+ New"
+        }
+      ) : null
+    ] })
+  ] });
+};
+Field.TextList = TextList;
+const Tags = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  transform = (v) => v,
+  minlength = 0,
+  maxlength = 50,
+  minTextlength = 2,
+  maxTextlength = 10,
+  validate,
+  inputClassName
+}) => {
+  const { l } = (0, import_next.usePage)();
+  const [inputVisible, setInputVisible] = (0, import_react.useState)(false);
+  const [tag, setTag] = (0, import_react.useState)("");
+  const addTag = () => {
+    if (!tag.length)
+      return;
+    onChange([...value, tag]);
+    setInputVisible(false);
+    setTag("");
+  };
+  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: "border-base-content/20 flex w-full flex-wrap items-center gap-1 rounded-md border p-2", children: [
+      value.map((val, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "badge badge-outline items-center rounded-full text-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs italic", children: "#" }),
+        val,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_bi.BiX,
+          {
+            className: "ml-1 cursor-pointer opacity-50 duration-200 hover:opacity-100",
+            onClick: () => {
+              if (!disabled)
+                onChange(value.filter((v, i) => i !== idx));
+            }
+          }
+        )
+      ] }, idx)),
+      inputVisible ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Input.Input,
+        {
+          autoFocus: true,
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs italic", children: "#" }),
+          className: "h-6 w-24 items-center justify-start rounded-full border px-4",
+          inputClassName: "focus:border-0 border-0 bg-transparent text-xs h-full w-full",
+          placeholder,
+          value: tag,
+          onChange: (value2) => {
+            if (value2.length > maxTextlength)
+              return;
+            setTag(transform(value2));
+          },
+          onBlur: addTag,
+          onPressEnter: addTag,
+          onPressEscape: () => {
+            setInputVisible(false);
+            setTag("");
+          },
+          validate: (text) => {
+            if (text.length < minTextlength)
+              return l("shared.textTooShortError", { minlength: minTextlength });
+            else if (text.length > maxTextlength)
+              return l("shared.textTooLongError", { maxlength: maxTextlength });
+            else
+              return validate?.(text) ?? true;
+          }
+        }
+      ) : !disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: "bg-success text-success-content flex items-center gap-2 rounded-full px-2 py-1 text-xs duration-200 hover:cursor-pointer hover:opacity-80",
+          onClick: () => {
+            setInputVisible(true);
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlinePlus, {}),
+            "New Tag"
+          ]
+        }
+      ) : null
+    ] })
+  ] });
+};
+Field.Tags = Tags;
+const Date = ({
+  className,
+  labelClassName,
+  nullable,
+  label,
+  desc,
+  value,
+  min,
+  max,
+  onChange,
+  showTime,
+  dateClassName
+}) => {
+  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, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        type: showTime ? "datetime-local" : "date",
+        className: (0, import_client.clsx)(
+          "input validator text-xs duration-200 outline-none focus-within:outline-none focus:outline-none",
+          dateClassName
+        ),
+        min: min ? showTime ? (0, import_base.dayjs)(min).format("YYYY-MM-DDTHH:mm") : (0, import_base.dayjs)(min).format("YYYY-MM-DD") : void 0,
+        max: max ? showTime ? (0, import_base.dayjs)(max).format("YYYY-MM-DDTHH:mm") : (0, import_base.dayjs)(max).format("YYYY-MM-DD") : void 0,
+        value: value ? showTime ? (0, import_base.dayjs)(value).format("YYYY-MM-DDTHH:mm") : (0, import_base.dayjs)(value).format("YYYY-MM-DD") : "",
+        onChange: (e) => {
+          onChange((0, import_base.dayjs)(e.target.value));
+        }
+      }
+    )
+  ] });
+};
+Field.Date = Date;
+const DateRange = ({
+  className,
+  labelClassName,
+  nullable,
+  label,
+  desc,
+  from,
+  to,
+  min,
+  max,
+  onChangeFrom,
+  onChangeTo,
+  onChange,
+  showTime
+}) => {
+  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, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex w-full flex-col items-start gap-2 pt-2 text-center md:flex-row md:items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex w-full flex-col items-start justify-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-base-100 absolute -top-2 left-2 z-10 px-2 text-xs font-light", children: "From" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Date,
+          {
+            className: "w-full",
+            dateClassName: "w-full",
+            showTime,
+            value: from,
+            max,
+            min,
+            onChange: (value) => {
+              onChangeFrom(value);
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex w-full flex-col items-start gap-2 text-center md:flex-row md:items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-base-100 absolute -top-2 left-2 z-10 px-2 text-xs font-light", children: "To" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Date,
+          {
+            className: "w-full",
+            dateClassName: "w-full",
+            showTime,
+            value: to,
+            max,
+            min,
+            onChange: (value) => {
+              onChangeTo(value);
+            }
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+Field.DateRange = DateRange;
+const Number = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  placeholder,
+  nullable,
+  disabled,
+  min,
+  max,
+  cache,
+  transform = (v) => v,
+  validate,
+  onPressEnter,
+  inputClassName,
+  unit,
+  formatter,
+  parser
+}) => {
+  const { l } = (0, import_next.usePage)();
+  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, label, desc, unit }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Input.Input.Number,
+      {
+        min,
+        max,
+        cacheKey: cache ? `${label}-${desc}-number` : void 0,
+        value,
+        nullable,
+        formatter,
+        parser,
+        placeholder,
+        onChange: (value2) => {
+          onChange(transform(value2 ?? 0));
+        },
+        disabled,
+        className: (0, import_client.clsx)("w-full", ""),
+        inputClassName: (0, import_client.clsx)(" w-full", inputClassName),
+        validate: (value2) => {
+          if (min !== void 0 && value2 < min)
+            return l("shared.numberTooSmallError", { min });
+          else if (max !== void 0 && value2 > max)
+            return l("shared.numberTooBigError", { max });
+          else
+            return validate?.(value2) ?? true;
+        },
+        onPressEnter
+      }
+    )
+  ] });
+};
+Field.Number = Number;
+const DoubleNumber = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  placeholder,
+  nullable,
+  disabled,
+  min,
+  max,
+  inputClassName,
+  cache,
+  separator,
+  onChange,
+  transform = (v) => v,
+  validate,
+  onPressEnter
+}) => {
+  const { l } = (0, import_next.usePage)();
+  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, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Input.Input.Number,
+        {
+          value: value ? value[0] : 0,
+          nullable,
+          cacheKey: cache ? `${label}-${desc}-number-[0]` : void 0,
+          placeholder,
+          onChange: (num) => {
+            if (num === null)
+              return;
+            onChange([transform(num), value ? value[1] : 0]);
+          },
+          disabled,
+          className: (0, import_client.clsx)("w-full", ""),
+          inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
+          validate: (value2) => {
+            if (min && value2 < min[0])
+              return l("shared.numberTooSmallError", { min: min[0] });
+            else if (max && value2 > max[0])
+              return l("shared.numberTooBigError", { max: max[0] });
+            else
+              return validate?.(value2) ?? true;
+          },
+          onPressEnter
+        }
+      ),
+      separator,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Input.Input.Number,
+        {
+          cacheKey: cache ? `${label}-${desc}-number-[1]` : void 0,
+          value: value ? value[1] : 0,
+          nullable,
+          placeholder,
+          onChange: (num) => {
+            onChange([value ? value[0] : 0, transform(num ?? 0)]);
+          },
+          disabled,
+          className: (0, import_client.clsx)("w-full", ""),
+          inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
+          validate: (value2) => {
+            if (min && value2 < min[1])
+              return l("shared.numberTooSmallError", { min: min[1] });
+            else if (max && value2 > max[1])
+              return l("shared.numberTooBigError", { max: max[1] });
+            else
+              return validate?.(value2) ?? true;
+          },
+          onPressEnter
+        }
+      )
+    ] })
+  ] });
+};
+Field.DoubleNumber = DoubleNumber;
+const Email = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  cache,
+  placeholder = "example@email.com",
+  nullable,
+  disabled,
+  minlength = nullable ? 0 : 2,
+  maxlength = 80,
+  transform = (v) => v,
+  validate,
+  onPressEnter,
+  inputClassName,
+  inputStyleType
+}) => {
+  const { l } = (0, import_next.usePage)();
+  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, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Input.Input.Email,
+      {
+        value: value ?? "",
+        cacheKey: cache ? `${label}-${desc}-email` : void 0,
+        nullable,
+        placeholder,
+        onChange: (value2) => {
+          onChange(transform(value2));
+        },
+        disabled,
+        className: (0, import_client.clsx)("w-full", ""),
+        inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
+        inputStyleType,
+        validate: (text) => {
+          if (text.length < minlength)
+            return l("shared.textTooShortError", { minlength });
+          else if (text.length > maxlength)
+            return l("shared.textTooLongError", { maxlength });
+          else
+            return validate?.(text) ?? true;
+        },
+        onPressEnter
+      }
+    )
+  ] });
+};
+Field.Email = Email;
+const Phone = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  placeholder,
+  nullable,
+  disabled,
+  maxlength = 13,
+  cache,
+  transform = (v) => (0, import_common.formatPhone)(v),
+  validate,
+  onPressEnter,
+  inputClassName
+}) => {
+  const { l } = (0, import_next.usePage)();
+  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, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Input.Input,
+      {
+        value: value ?? "",
+        cacheKey: cache ? `${label}-${desc}-phone` : void 0,
+        nullable,
+        placeholder,
+        onChange: (value2) => {
+          onChange(transform(value2));
+        },
+        disabled,
+        maxLength: maxlength,
+        className: (0, import_client.clsx)("w-full", ""),
+        inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
+        validate: (text) => {
+          if (!(0, import_common.isPhoneNumber)(text))
+            return l("util.phoneInvalidError");
+          else
+            return validate?.(text) ?? true;
+        },
+        onPressEnter
+      }
+    )
+  ] });
+};
+Field.Phone = Phone;
+const Password = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  onChange,
+  cache,
+  confirmValue,
+  onChangeConfirm,
+  placeholder,
+  nullable,
+  disabled,
+  minlength = nullable ? 0 : 8,
+  maxlength = 20,
+  transform = (v) => v,
+  validate,
+  onPressEnter,
+  inputClassName,
+  showConfirm
+}) => {
+  const { l } = (0, import_next.usePage)();
+  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, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Input.Input.Password,
+        {
+          cacheKey: cache ? `${label}-${desc}-password` : void 0,
+          value: value ?? "",
+          nullable,
+          placeholder: placeholder ?? l("user.password"),
+          onChange: (value2) => {
+            onChange(transform(value2));
+          },
+          disabled,
+          className: (0, import_client.clsx)("w-full", ""),
+          inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
+          validate: (text) => {
+            if (text.length < minlength)
+              return l("shared.textTooShortError", { minlength });
+            else if (text.length > maxlength)
+              return l("shared.textTooLongError", { maxlength });
+            else
+              return validate?.(text) ?? true;
+          },
+          onPressEnter
+        }
+      ),
+      showConfirm ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Input.Input.Password,
+        {
+          value: confirmValue ?? "",
+          nullable,
+          placeholder: l("user.passwordConfirm"),
+          onChange: (value2) => onChangeConfirm?.(transform(value2)),
+          disabled,
+          className: (0, import_client.clsx)("w-full", ""),
+          inputClassName: (0, import_client.clsx)("focus:border-primary w-full", inputClassName),
+          validate: (text) => {
+            if (value && text !== value)
+              return l("shared.passwordNotMatchError");
+            else
+              return true;
+          },
+          onPressEnter
+        }
+      ) : null
+    ] })
+  ] });
+};
+Field.Password = Password;
+const Parent = ({
+  label,
+  desc,
+  labelClassName,
+  selectClassName,
+  className,
+  nullable,
+  disabled,
+  initArgs,
+  sliceName,
+  value,
+  onChange,
+  onSearch,
+  sortOption,
+  renderOption,
+  renderSelected = renderOption
+}) => {
+  const refName = import_store.st.slice[sliceName].refName;
+  const [modelName, ModelName] = [(0, import_common.lowerlize)(refName), (0, import_common.capitalize)(refName)];
+  const storeUse = import_store.st.use;
+  const storeDo = import_store.st.do;
+  const storeGet = import_store.st.get;
+  const names = {
+    model: modelName,
+    modelList: `${modelName}List`,
+    modelListLoading: `${modelName}ListLoading`,
+    initModel: `init${ModelName}`
+  };
+  const namesOfSlice = {
+    modelList: sliceName.replace(names.model, names.modelList),
+    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+    initModel: sliceName.replace(names.model, names.initModel)
+  };
+  const modelList = storeUse[namesOfSlice.modelList]();
+  const modelListLoading = storeUse[namesOfSlice.modelListLoading]();
+  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, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Select.Select,
+      {
+        label,
+        desc,
+        labelClassName,
+        selectClassName,
+        value: value?.id,
+        searchable: true,
+        options: modelList.map((model) => model.id),
+        renderOption: (modelId) => {
+          const model = modelList.get(modelId);
+          if (!model)
+            return null;
+          return renderOption(model);
+        },
+        renderSelected: (modelId) => {
+          const model = modelList.get(modelId);
+          if (!model)
+            return null;
+          return renderSelected(model);
+        },
+        onChange: (modelId) => {
+          onChange(modelList.get(modelId));
+        },
+        onOpen: () => {
+          if (!disabled)
+            void storeDo[namesOfSlice.initModel](...initArgs ?? []);
+        },
+        onSearch: (text) => {
+          if (text) {
+            onSearch?.(text);
+          }
+        }
+      }
+    )
+  ] });
+};
+Field.Parent = Parent;
+const ParentId = ({
+  label,
+  desc,
+  className,
+  selectClassName,
+  labelClassName,
+  nullable,
+  disabled,
+  initArgs,
+  sliceName,
+  value,
+  onChange,
+  onSearch,
+  sortOption,
+  renderOption,
+  renderSelected = renderOption
+}) => {
+  const refName = import_store.st.slice[sliceName].refName;
+  const [modelName, ModelName] = [(0, import_common.lowerlize)(refName), (0, import_common.capitalize)(refName)];
+  const storeUse = import_store.st.use;
+  const storeDo = import_store.st.do;
+  const storeGet = import_store.st.get;
+  const names = {
+    model: modelName,
+    modelList: `${modelName}List`,
+    modelListLoading: `${modelName}ListLoading`,
+    initModel: `init${ModelName}`
+  };
+  const namesOfSlice = {
+    modelList: sliceName.replace(names.model, names.modelList),
+    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+    initModel: sliceName.replace(names.model, names.initModel)
+  };
+  const modelList = storeUse[namesOfSlice.modelList]();
+  const modelListLoading = storeUse[namesOfSlice.modelListLoading]();
+  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, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Select.Select,
+      {
+        searchable: true,
+        desc,
+        label,
+        labelClassName,
+        selectClassName,
+        value,
+        options: modelList.map((model) => ({ label: model.id, value: model.id })),
+        renderOption: (renderId) => {
+          const model = modelList.get(renderId);
+          if (!model)
+            return null;
+          return renderOption?.(model);
+        },
+        renderSelected: (renderId) => {
+          const model = modelList.get(renderId);
+          if (!model)
+            return null;
+          return renderSelected?.(model);
+        },
+        onOpen: () => {
+          if (!disabled)
+            void storeDo[namesOfSlice.initModel](...initArgs ?? []);
+        },
+        onChange: (modelId) => {
+          onChange(modelId, modelList.get(modelId));
+        },
+        onSearch: (text) => {
+          if (text) {
+            onSearch?.(text);
+          }
+        }
+      }
+    )
+  ] });
+};
+Field.ParentId = ParentId;
+const Children = ({
+  label,
+  desc,
+  labelClassName,
+  selectClassName,
+  className,
+  nullable,
+  disabled,
+  initArgs,
+  sliceName,
+  value,
+  onChange,
+  onSearch,
+  sortOption,
+  renderOption,
+  renderSelected = renderOption
+}) => {
+  const refName = import_store.st.slice[sliceName].refName;
+  const [modelName, ModelName] = [(0, import_common.lowerlize)(refName), (0, import_common.capitalize)(refName)];
+  const storeUse = import_store.st.use;
+  const storeDo = import_store.st.do;
+  const storeGet = import_store.st.get;
+  const names = {
+    model: modelName,
+    modelList: `${modelName}List`,
+    modelListLoading: `${modelName}ListLoading`,
+    initModel: `init${ModelName}`
+  };
+  const namesOfSlice = {
+    modelList: sliceName.replace(names.model, names.modelList),
+    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+    initModel: sliceName.replace(names.model, names.initModel)
+  };
+  const modelList = storeUse[namesOfSlice.modelList]();
+  const modelListLoading = storeUse[namesOfSlice.modelListLoading]();
+  (0, import_react.useEffect)(() => {
+    if (!disabled)
+      void storeDo[namesOfSlice.initModel](...initArgs ?? []);
+  }, []);
+  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, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Select.Select,
+      {
+        searchable: true,
+        desc,
+        label,
+        labelClassName,
+        selectClassName,
+        multiple: true,
+        value: value.map((model) => model.id),
+        options: modelList.map((model) => model.id),
+        renderOption: (modelId) => {
+          const model = modelList.get(modelId);
+          if (!model)
+            return null;
+          return renderOption(model);
+        },
+        renderSelected: (modelId) => {
+          const model = modelList.get(modelId);
+          if (!model)
+            return null;
+          return renderSelected(model);
+        },
+        onChange: (modelIds) => {
+          onChange(modelIds.map((id) => modelList.get(id)).filter((model) => model !== void 0));
+        },
+        onSearch: (text) => {
+          if (text) {
+            onSearch?.(text);
+          }
+        }
+      }
+    )
+  ] });
+};
+Field.Children = Children;
+const ChildrenId = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  nullable,
+  disabled,
+  initArgs,
+  sliceName,
+  value,
+  onChange,
+  onSearch,
+  sortOption,
+  renderOption
+}) => {
+  const refName = import_store.st.slice[sliceName].refName;
+  const [modelName, ModelName] = [(0, import_common.lowerlize)(refName), (0, import_common.capitalize)(refName)];
+  const storeUse = import_store.st.use;
+  const storeDo = import_store.st.do;
+  const storeGet = import_store.st.get;
+  const names = {
+    model: modelName,
+    modelList: `${modelName}List`,
+    modelListLoading: `${modelName}ListLoading`,
+    initModel: `init${ModelName}`
+  };
+  const namesOfSlice = {
+    modelList: sliceName.replace(names.model, names.modelList),
+    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+    initModel: sliceName.replace(names.model, names.initModel)
+  };
+  const modelList = storeUse[namesOfSlice.modelList]();
+  const modelListLoading = storeUse[namesOfSlice.modelListLoading]();
+  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, label, desc }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Select.Select,
+      {
+        searchable: true,
+        desc,
+        label,
+        labelClassName,
+        multiple: true,
+        value,
+        options: modelList.map((model) => ({ label: model.id, value: model.id })),
+        renderOption: (renderId) => {
+          const model = modelList.get(renderId);
+          if (!model)
+            return null;
+          return renderOption(model);
+        },
+        onChange: (modelIds) => {
+          onChange(modelIds);
+        },
+        onSearch: (text) => {
+          if (text) {
+            onSearch?.(text);
+          }
+        }
+      }
+    )
+  ] });
+};
+Field.ChildrenId = ChildrenId;