@akanjs/ui 0.0.150 → 0.0.151

package/cjs/Field.js

@@ -0,0 +1,1109 @@
+"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_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__ */ React.createElement("span", { className: (0, import_client.clsx)("flex shrink-0 items-center gap-1", className) }, (0, import_common.capitalize)(label), unit ? /* @__PURE__ */ React.createElement("span", { className: "animate-fadeIn" }, " (", unit, ")") : null, desc ? /* @__PURE__ */ React.createElement("span", { className: "tooltip tooltip-info tooltip-right", "data-tip": desc }, /* @__PURE__ */ React.createElement(import_bi.BiHelpCircle, null)) : null, nullable ? /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-400" }, "(optional)") : null);
+};
+const Field = ({
+  className,
+  containerClassName,
+  labelClassName,
+  label,
+  desc,
+  nullable,
+  children
+}) => {
+  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("w-full", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement("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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex w-full flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "mb-2 flex w-full flex-col gap-2 rounded-md border border-gray-300 p-2" }, value.map((item, idx) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { key: idx, className: "flex h-full w-full items-center justify-between gap-2" }, renderItem(item, idx), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 border-l border-gray-300 pl-2" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "btn btn-xs btn-error btn-square btn-outline",
+      onClick: () => {
+        onChange(value.filter((_, i) => i !== idx));
+      }
+    },
+    /* @__PURE__ */ React.createElement(import_bi.BiTrash, null)
+  ))), /* @__PURE__ */ React.createElement("div", { className: "h-[0.5px] w-full bg-gray-300 px-2 last:h-0" }))), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "btn btn-outline",
+      onClick: () => {
+        onAdd();
+      }
+    },
+    "+ ",
+    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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable: true, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "checkbox",
+      disabled,
+      className: (0, import_client.clsx)("toggle toggle-accent", inputClassName),
+      checked: value,
+      onChange: (e) => {
+        onChange(e.target.checked);
+      }
+    }
+  ), onDesc ?? offDesc ? /* @__PURE__ */ React.createElement("div", { className: "text-info text-sm" }, 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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable: !!minlength, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable: !minlength, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "mb-5 h-full gap-2 rounded-md border border-gray-300 p-2" }, /* @__PURE__ */ React.createElement(import_DraggableList.DraggableList, { className: "h-full gap-2", onChange }, value.map((text, idx) => /* @__PURE__ */ React.createElement(import_DraggableList.DraggableList.Item, { key: idx, value: text }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center" }, /* @__PURE__ */ React.createElement(import_DraggableList.DraggableList.Cursor, null, /* @__PURE__ */ React.createElement(import_md.MdDragIndicator, { className: "text-xl" })), /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center justify-center gap-5" }, /* @__PURE__ */ React.createElement(
+    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__ */ React.createElement(
+    "button",
+    {
+      className: "btn btn-xs btn-error btn-square btn-outline",
+      onClick: () => {
+        onChange(value.filter((_, i) => i !== idx));
+      }
+    },
+    /* @__PURE__ */ React.createElement(import_bi.BiTrash, null)
+  )))))), /* @__PURE__ */ React.createElement("div", { className: "bg-base-content/20 my-5 h-[0.5px]" }), value.length <= maxTextlength ? /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "btn btn-outline w-full",
+      onClick: () => {
+        onChange([...value, ""]);
+      }
+    },
+    "+ 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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable: !minlength, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "border-base-content/20 flex w-full flex-wrap items-center gap-1 rounded-md border p-2" }, value.map((val, idx) => /* @__PURE__ */ React.createElement("span", { className: "badge badge-outline items-center rounded-full text-xs", key: idx }, /* @__PURE__ */ React.createElement("div", { className: "text-xs italic" }, "#"), val, /* @__PURE__ */ React.createElement(
+    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));
+      }
+    }
+  ))), inputVisible ? /* @__PURE__ */ React.createElement(
+    import_Input.Input,
+    {
+      autoFocus: true,
+      icon: /* @__PURE__ */ React.createElement("div", { className: "text-xs italic" }, "#"),
+      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__ */ React.createElement(
+    "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);
+      }
+    },
+    /* @__PURE__ */ React.createElement(import_ai.AiOutlinePlus, null),
+    "New Tag"
+  ) : null));
+};
+Field.Tags = Tags;
+const Date = ({
+  className,
+  labelClassName,
+  nullable,
+  label,
+  desc,
+  value,
+  min,
+  max,
+  onChange,
+  showTime,
+  dateClassName
+}) => {
+  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    "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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "relative flex w-full flex-col items-start gap-2 pt-2 text-center md:flex-row md:items-center" }, /* @__PURE__ */ React.createElement("div", { className: "relative flex w-full flex-col items-start justify-start" }, /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 absolute -top-2 left-2 z-10 px-2 text-xs font-light" }, "From"), /* @__PURE__ */ React.createElement(
+    Date,
+    {
+      className: "w-full",
+      dateClassName: "w-full",
+      showTime,
+      value: from,
+      max,
+      min,
+      onChange: (value) => {
+        onChangeFrom(value);
+      }
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: "relative flex w-full flex-col items-start gap-2 text-center md:flex-row md:items-center" }, /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 absolute -top-2 left-2 z-10 px-2 text-xs font-light" }, "To"), /* @__PURE__ */ React.createElement(
+    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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc, unit }) : null, /* @__PURE__ */ React.createElement(
+    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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
+    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__ */ React.createElement(
+    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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React.createElement(
+    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__ */ React.createElement(
+    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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    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__ */ React.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, label ? /* @__PURE__ */ React.createElement(Label, { className: labelClassName, nullable, label, desc }) : null, /* @__PURE__ */ React.createElement(
+    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;