@akanjs/ui 0.0.149 → 0.0.151

package/cjs/FontFace.js

@@ -0,0 +1,77 @@
+"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 FontFace_exports = {};
+__export(FontFace_exports, {
+  FontFace: () => FontFace
+});
+module.exports = __toCommonJS(FontFace_exports);
+var import_react = require("react");
+const fontStyleMap = {
+  thin: 100,
+  extralight: 200,
+  light: 300,
+  regular: 400,
+  medium: 500,
+  extrabold: 600,
+  semibold: 700,
+  bold: 800,
+  black: 900
+};
+const fontWeightMap = {
+  100: "thin",
+  200: "extralight",
+  300: "light",
+  400: "regular",
+  500: "medium",
+  600: "extrabold",
+  700: "semibold",
+  800: "bold",
+  900: "black"
+};
+const FontFace = ({ font }) => {
+  const getWeight = (style) => {
+    const findWeight = font.paths.find((path) => fontWeightMap[path.weight] === style);
+    if (!findWeight) {
+      const findWeight2 = font.paths.reduce((prev, curr) => {
+        return Math.abs(fontStyleMap[style] - curr.weight) < Math.abs(fontStyleMap[style] - prev.weight) ? curr : prev;
+      }, font.paths[0]);
+      return findWeight2.weight;
+    }
+    return findWeight.weight;
+  };
+  (0, import_react.useEffect)(() => {
+    const styles = ["thin", "extralight", "light", "regular", "medium", "extrabold", "semibold", "bold", "black"];
+    const fontFace = `:root { --font-${font.name}: ${font.name}} ${styles.map(
+      (style2) => `@font-face {
+      font-family: '${font.name}';
+      src: url('${font.paths.find((path) => getWeight(style2) === path.weight)?.src}');
+      font-weight: ${getWeight(style2)};
+      font-style: ${style2};
+      }`
+    )}`;
+    const fontText = fontFace.replace(/,/g, " ");
+    const style = document.createElement("style");
+    style.appendChild(document.createTextNode(fontText));
+    document.head.appendChild(style);
+    return () => {
+      document.head.removeChild(style);
+    };
+  }, [font.name, font.paths]);
+  return null;
+};

package/cjs/Image.js

@@ -0,0 +1,61 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Image_exports = {};
+__export(Image_exports, {
+  Image: () => Image
+});
+module.exports = __toCommonJS(Image_exports);
+var import_base = require("@akanjs/base");
+var import_client = require("@akanjs/client");
+var import_image = __toESM(require("next/image"));
+var import_CsrImage = require("./CsrImage");
+const Image = ({
+  src,
+  file,
+  className,
+  abstractData,
+  alt,
+  ...props
+}) => {
+  const url = src ?? file?.url ?? "/empty.png";
+  const [width, height] = [props.width ?? file?.imageSize[0], props.height ?? file?.imageSize[1]];
+  const blurDataURL = abstractData ?? file?.abstractData;
+  return import_base.baseClientEnv.renderMode === "csr" ? /* @__PURE__ */ React.createElement(import_CsrImage.CsrImage, { src, file, abstractData, className, ...props }) : /* @__PURE__ */ React.createElement(
+    import_image.default,
+    {
+      src: url,
+      fill: props.fill ?? (!width && !height),
+      width,
+      height,
+      className: (0, import_client.clsx)("object-cover", className),
+      alt: alt ?? "image",
+      ...blurDataURL ? { placeholder: "blur", blurDataURL } : {},
+      ...props
+    }
+  );
+};

package/cjs/InfiniteScroll.js

@@ -0,0 +1,65 @@
+"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 InfiniteScroll_exports = {};
+__export(InfiniteScroll_exports, {
+  InfiniteScroll: () => InfiniteScroll
+});
+module.exports = __toCommonJS(InfiniteScroll_exports);
+var import_react = require("react");
+var import_bi = require("react-icons/bi");
+const InfiniteScroll = ({
+  itemsPerPage,
+  currentPage,
+  total,
+  onPageSelect,
+  onAddPage,
+  children,
+  reverse
+}) => {
+  const [isFetching, setIsFetching] = (0, import_react.useState)(false);
+  const target = (0, import_react.useRef)(null);
+  const page = (0, import_react.useRef)(currentPage);
+  const totalPages = Math.ceil(total / (itemsPerPage || 1));
+  (0, import_react.useEffect)(() => {
+    const observer = new IntersectionObserver((entries) => {
+      const [entry] = entries;
+      if (entry.isIntersecting)
+        void fetchMoreItems();
+    });
+    if (target.current)
+      observer.observe(target.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  const fetchMoreItems = async () => {
+    if (isFetching)
+      return;
+    const nextPage = page.current + 1;
+    if (nextPage > totalPages)
+      return;
+    setIsFetching(true);
+    await onAddPage(nextPage);
+    void onAddPage(nextPage);
+    onPageSelect(nextPage);
+    setIsFetching(false);
+    page.current = nextPage;
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, reverse ? /* @__PURE__ */ React.createElement("div", { ref: target, className: "flex w-full items-end justify-center" }, isFetching && /* @__PURE__ */ React.createElement(import_bi.BiLoaderAlt, { className: "h-10 animate-spin pb-4 text-2xl" })) : null, children, !reverse ? /* @__PURE__ */ React.createElement("div", { ref: target, className: "flex h-32 w-full justify-center pt-4" }, isFetching && /* @__PURE__ */ React.createElement(import_bi.BiLoaderAlt, { className: "animate-spin text-2xl" })) : null);
+};

package/cjs/Input.js

@@ -0,0 +1,440 @@
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Input_exports = {};
+__export(Input_exports, {
+  Input: () => Input
+});
+module.exports = __toCommonJS(Input_exports);
+var import_client = require("@akanjs/client");
+var import_common = require("@akanjs/common");
+var import_next = require("@akanjs/next");
+var import_react = __toESM(require("react"));
+var import_ai = require("react-icons/ai");
+const Input = ({
+  className,
+  nullable,
+  inputRef,
+  value,
+  cacheKey,
+  inputStyleType = "bordered",
+  icon,
+  iconClassName,
+  inputClassName,
+  inputWrapperClassName,
+  onPressEnter,
+  onPressEscape,
+  onChange,
+  validate,
+  ...rest
+}) => {
+  const { l } = (0, import_next.usePage)();
+  const [firstFocus, setFirstFocus] = (0, import_react.useState)(true);
+  const validateResult = validate(value);
+  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" : "" : "";
+  const inputType = inputStyleType === "bordered" ? "input" : inputStyleType === "borderless" ? "input-ghost" : "border-0  border-b rounded-none";
+  const handleKeyDown = (e) => {
+    if (onPressEnter && e.key === "Enter")
+      onPressEnter(e.currentTarget.value, e);
+    if (e.key === "Escape") {
+      e.currentTarget.blur();
+      onPressEscape?.(e);
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    if (!cacheKey)
+      return;
+    sessionStorage.setItem(cacheKey, value);
+  }, [value]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)("relative isolate flex items-center", className) }, icon ? /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)("flex items-center justify-center", iconClassName) }, icon) : null, /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      ...rest,
+      ref: inputRef,
+      value,
+      onChange: (e) => {
+        if (cacheKey) {
+          sessionStorage.setItem(cacheKey, e.target.value);
+        }
+        onChange?.(e.target.value, e);
+      },
+      onBlur: (e) => {
+        if (firstFocus && value)
+          setFirstFocus(false);
+      },
+      onKeyDown: handleKeyDown,
+      className: (0, import_client.clsx)(
+        `b-5 focus:border-primary text-base-content outline-hidden duration-300 focus:outline-hidden ${icon && ""}`,
+        inputType,
+        // statusClass,
+        inputClassName
+      )
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      "data-validate": !!validateResult,
+      className: "text-error absolute -bottom-4 text-xs whitespace-nowrap duration-300"
+    },
+    invalidMessage
+  ));
+};
+const TextArea = ({
+  className,
+  nullable,
+  value,
+  inputClassName,
+  inputWrapperClassName,
+  cacheKey,
+  onPressEnter,
+  onPressEscape,
+  onChange,
+  validate,
+  ...rest
+}) => {
+  const { l } = (0, import_next.usePage)();
+  const inputRef = (0, import_react.useRef)(null);
+  const validateResult = validate(value);
+  const [firstFocus, setFirstFocus] = (0, import_react.useState)(true);
+  const status = !nullable && !value.length ? "warning" : validateResult === true ? "success" : "error";
+  const invalidMessage = !value.length || validateResult === true || firstFocus ? null : validateResult === false ? l("util.invalidValueError") : validateResult;
+  const statusClass = status === "error" ? "textarea-error" : !firstFocus && status === "warning" ? "textarea-warning" : status === "success" ? "textarea-success" : "";
+  const handleKeyDown = (e) => {
+    if (onPressEnter && e.key === "Enter")
+      onPressEnter(e.currentTarget.value, e);
+  };
+  (0, import_react.useEffect)(() => {
+    if (!cacheKey)
+      return;
+    const value2 = sessionStorage.getItem(cacheKey);
+    if (value2) {
+      onChange?.(value2);
+    }
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)("relative mb-5", className) }, /* @__PURE__ */ import_react.default.createElement(
+    "textarea",
+    {
+      ...rest,
+      ref: inputRef,
+      value,
+      onChange: (e) => {
+        if (cacheKey) {
+          sessionStorage.setItem(cacheKey, e.target.value);
+        }
+        onChange?.(e.target.value, e);
+      },
+      onKeyDown: handleKeyDown,
+      onBlur: (e) => {
+        if (firstFocus && value)
+          setFirstFocus(false);
+      },
+      className: (0, import_client.clsx)(
+        `textarea textarea-bordered focus:border-primary text-base-content resize-none outline-hidden duration-300 focus:outline-hidden`,
+        statusClass,
+        inputClassName
+      )
+    }
+  ), invalidMessage ? /* @__PURE__ */ import_react.default.createElement("div", { className: "text-error animate-fadeIn absolute -bottom-4 text-xs" }, invalidMessage) : null);
+};
+Input.TextArea = TextArea;
+const Password = ({
+  className,
+  nullable,
+  value,
+  icon,
+  iconClassName,
+  inputClassName,
+  inputWrapperClassName,
+  cacheKey,
+  onPressEnter,
+  onPressEscape,
+  onChange,
+  validate,
+  ...rest
+}) => {
+  const { l } = (0, import_next.usePage)();
+  const inputRef = (0, import_react.useRef)(null);
+  const validateResult = validate(value);
+  const [firstFocus, setFirstFocus] = (0, import_react.useState)(true);
+  const [showPassword, setShowPassword] = (0, import_react.useState)(false);
+  const status = !nullable && !value.length ? "warning" : validateResult === true ? "success" : "error";
+  const invalidMessage = !value.length || validateResult === true || firstFocus ? "" : validateResult === false ? l("util.invalidValueError") : validateResult;
+  const statusClass = status === "error" ? "input-error" : !firstFocus && status === "warning" ? "input-warning" : status === "success" ? "input-success" : "";
+  const handleKeyDown = (e) => {
+    if (onPressEnter && e.key === "Enter")
+      onPressEnter(e.currentTarget.value, e);
+    if (onPressEscape && e.key === "Escape")
+      onPressEscape(e);
+  };
+  (0, import_react.useEffect)(() => {
+    if (!cacheKey)
+      return;
+    const value2 = sessionStorage.getItem(cacheKey);
+    if (value2) {
+      onChange?.(value2);
+    }
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)("relative isolate pb-2", className) }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)("relative flex items-center justify-between", inputWrapperClassName) }, icon ? /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)("absolute inset-y-0 left-4 z-10 flex items-center justify-center", iconClassName) }, icon) : null, /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      ...rest,
+      type: showPassword ? "text" : "password",
+      ref: inputRef,
+      value,
+      onBlur: (e) => {
+        if (firstFocus && value)
+          setFirstFocus(false);
+      },
+      onKeyDown: handleKeyDown,
+      onChange: (e) => {
+        if (cacheKey) {
+          sessionStorage.setItem(cacheKey, e.target.value);
+        }
+        onChange?.(e.target.value, e);
+      },
+      className: (0, import_client.clsx)(
+        `input focus:border-primary text-base-content duration-300 focus:outline-hidden ${icon && "pl-12"}`,
+        statusClass,
+        inputClassName
+      )
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "absolute top-1/2 right-2 flex -translate-y-1/2 items-center justify-center" }, /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      onClick: () => {
+        setShowPassword(!showPassword);
+      }
+    },
+    showPassword ? /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineEye, null) : /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineEyeInvisible, null)
+  ))), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      "data-validate": !!invalidMessage.length,
+      className: "text-error h-2 text-xs duration-300 data-[validate=false]:opacity-0 data-[validate=true]:opacity-100"
+    },
+    invalidMessage
+  ));
+};
+Input.Password = Password;
+const Email = ({
+  inputStyleType = "bordered",
+  className,
+  nullable,
+  value,
+  cacheKey,
+  onPressEnter,
+  onPressEscape,
+  onChange,
+  validate,
+  icon,
+  iconClassName,
+  inputClassName,
+  inputWrapperClassName,
+  ...rest
+}) => {
+  const { l } = (0, import_next.usePage)();
+  const inputRef = (0, import_react.useRef)(null);
+  const isValidEmail = (0, import_common.isEmail)(value);
+  const [firstFocus, setFirstFocus] = (0, import_react.useState)(true);
+  const validateResult = !isValidEmail ? l("util.emailInvalidError") : validate(value);
+  const status = !nullable && !value.length ? "warning" : !isValidEmail ? "error" : validateResult === true ? "success" : "error";
+  const invalidMessage = !value.length || validateResult === true || firstFocus ? null : validateResult === false ? l("util.invalidValueError") : validateResult;
+  const statusClass = status === "error" ? "input-error" : !firstFocus && status === "warning" ? "input-warning" : status === "success" ? "input-success" : "";
+  const inputType = inputStyleType === "bordered" ? "input-bordered" : inputStyleType === "borderless" ? "input" : "input-bordered rounded-none";
+  const handleKeyDown = (e) => {
+    if (onPressEnter && e.key === "Enter")
+      onPressEnter(e.currentTarget.value, e);
+    if (e.key === "Escape") {
+      e.currentTarget.blur();
+      onPressEscape?.(e);
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    if (!cacheKey)
+      return;
+    const value2 = sessionStorage.getItem(cacheKey);
+    if (value2) {
+      onChange?.(value2);
+    }
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)("relative isolate mb-5", className) }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)("flex items-center", inputWrapperClassName) }, icon ? /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)("absolute inset-y-0 left-4 z-10 flex items-center justify-center", iconClassName) }, icon) : null, /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      ...rest,
+      type: "email",
+      value,
+      ref: inputRef,
+      onKeyDown: handleKeyDown,
+      onBlur: (e) => {
+        if (firstFocus && value)
+          setFirstFocus(false);
+      },
+      onChange: (e) => {
+        if (cacheKey) {
+          sessionStorage.setItem(cacheKey, e.target.value);
+        }
+        onChange?.(e.target.value, e);
+      },
+      className: (0, import_client.clsx)(
+        `input focus:border-primary text-base-content outline-hidden duration-300 focus:outline-hidden ${icon && "pl-12"}`,
+        inputType,
+        statusClass,
+        inputClassName
+      )
+    }
+  )), invalidMessage ? /* @__PURE__ */ import_react.default.createElement("div", { className: "text-error animate-fadeIn absolute -bottom-4 text-xs" }, invalidMessage) : null);
+};
+Input.Email = Email;
+const Number = ({
+  className,
+  nullable,
+  value,
+  icon,
+  cacheKey,
+  iconClassName,
+  inputClassName,
+  inputWrapperClassName,
+  numberFormat,
+  onPressEnter,
+  onPressEscape,
+  validate,
+  onChange,
+  formatter,
+  parser,
+  ...rest
+}) => {
+  const { l } = (0, import_next.usePage)();
+  const inputRef = (0, import_react.useRef)(null);
+  const validateResult = validate ? validate(value) : void 0;
+  const generateFormat = () => {
+    return isNaN(value ?? 0) ? "" : formatter ? formatter(value?.toString() ?? "") : value?.toString() ?? "";
+  };
+  const [firstFocus, setFirstFocus] = (0, import_react.useState)(true);
+  const [formatValue, setFormatValue] = (0, import_react.useState)(generateFormat());
+  const status = validate !== void 0 ? validateResult === true ? "success" : "error" : !nullable && value === null ? "warning" : "";
+  const invalidMessage = value === null || validateResult === true ? null : validateResult === false ? l("util.invalidValueError") : validateResult;
+  const statusClass = validate !== void 0 ? status === "error" ? "input-error" : !firstFocus && status === "warning" ? "input-warning" : status === "success" ? "input-success" : "input" : "input";
+  const handleKeyDown = (e) => {
+    const numberValue = parseFloat(e.currentTarget.value.replace(/[^\d-]/g, ""));
+    if (e.key === "Enter") {
+      if (isNaN(numberValue)) {
+        e.currentTarget.value = "";
+        setFormatValue("");
+        onChange(null);
+        return;
+      }
+      if (rest.max !== void 0 && numberValue > parseFloat(rest.max)) {
+        const maxValue = formatter ? formatter(String(rest.max)) : String(rest.max);
+        e.currentTarget.value = maxValue;
+        setFormatValue(maxValue);
+        onPressEnter?.(parseFloat(maxValue), e);
+        return;
+      } else if (rest.min !== void 0 && numberValue < parseFloat(rest.min)) {
+        const minValue = formatter ? formatter(String(rest.min)) : String(rest.min);
+        e.currentTarget.value = minValue;
+        setFormatValue(minValue);
+        onPressEnter?.(parseFloat(minValue), e);
+        return;
+      }
+      setFormatValue(formatter ? formatter(String(numberValue)) : String(numberValue));
+      onPressEnter?.(numberValue, e);
+    }
+    if (e.key === "Escape") {
+      if (isNaN(numberValue)) {
+        e.currentTarget.value = "";
+        setFormatValue("");
+        onChange(null);
+        return;
+      }
+      if (rest.max !== void 0 && numberValue > parseFloat(rest.max)) {
+        e.currentTarget.value = formatter ? formatter(String(rest.max)) : String(rest.max);
+      } else if (rest.min !== void 0 && numberValue < parseFloat(rest.min)) {
+        e.currentTarget.value = formatter ? formatter(String(rest.min)) : String(rest.min);
+      }
+      e.currentTarget.blur();
+      onPressEscape?.(e);
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    if (cacheKey) {
+      const value2 = sessionStorage.getItem(cacheKey);
+      if (value2) {
+        setFormatValue(value2);
+        onChange(parser ? parseFloat(value2) : parseFloat(value2));
+      }
+    } else {
+      setFormatValue(generateFormat());
+    }
+  }, []);
+  (0, import_react.useEffect)(() => {
+    setFormatValue(generateFormat());
+  }, [value]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)("relative isolate mb-2", className) }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)("flex items-center", inputWrapperClassName) }, icon ? /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)("absolute inset-y-0 left-4 z-10 flex items-center justify-center", iconClassName) }, icon) : null, /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      ...rest,
+      ref: inputRef,
+      value: formatValue,
+      onKeyDown: handleKeyDown,
+      onBlur: (e) => {
+        if (firstFocus && value)
+          setFirstFocus(false);
+      },
+      onChange: (e) => {
+        const parsedValue = parser ? parser(e.target.value) : e.target.value;
+        setFormatValue(formatter ? formatter(parsedValue) : e.target.value);
+        onChange(parser ? parseFloat(parsedValue) : parseFloat(e.target.value), e);
+        if (cacheKey)
+          sessionStorage.setItem(cacheKey, parsedValue);
+      },
+      className: (0, import_client.clsx)(
+        `input focus:border-primary text-base-content duration-300 focus:outline-hidden ${icon && "pl-12"}`,
+        statusClass,
+        inputClassName
+      )
+    }
+  )), invalidMessage ? /* @__PURE__ */ import_react.default.createElement("div", { className: "text-error animate-fadeIn absolute -bottom-4 text-xs" }, invalidMessage) : null);
+};
+Input.Number = Number;
+const Checkbox = ({ checked, onChange, className, ...rest }) => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      ...rest,
+      type: "checkbox",
+      checked,
+      className: (0, import_client.clsx)("checkbox", className),
+      onChange: (e) => {
+        onChange(e.target.checked, e);
+      }
+    }
+  );
+};
+Input.Checkbox = Checkbox;