@akanjs/ui 0.0.150 → 0.0.152

package/esm/Model/View.js

@@ -0,0 +1,35 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { AiOutlineMeh } from "react-icons/ai";
+function View({
+  className,
+  model,
+  modelLoading = true,
+  render,
+  loadingWrapper,
+  loading,
+  empty
+}) {
+  const RenderLoadingWrapper = useMemo(
+    () => loadingWrapper === null ? ({ children, className: className2 }) => children : loadingWrapper ?? (({ children, className: className2 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      children,
+      modelLoading ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0 animate-pulse" }) : null
+    ] })),
+    [modelLoading]
+  );
+  const RenderModel = useMemo(
+    () => modelLoading ? loading === null ? () => null : loading ?? (() => /* @__PURE__ */ jsxs("div", { className: "flex size-full flex-col items-center justify-center gap-3 pt-6 pb-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "loading loading-dots loading-lg" }),
+      "Loading"
+    ] })) : model ? () => render(model) : empty === null ? () => null : empty ?? (() => /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center justify-center gap-3 pt-6 pb-3", children: [
+      /* @__PURE__ */ jsx(AiOutlineMeh, { className: "scale-150 text-4xl" }),
+      " Empty"
+    ] })),
+    [model, modelLoading]
+  );
+  return /* @__PURE__ */ jsx(RenderLoadingWrapper, { className, children: /* @__PURE__ */ jsx(RenderModel, {}) });
+}
+export {
+  View as default
+};

package/esm/Model/ViewEditModal.js

@@ -0,0 +1,100 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { capitalize } from "@akanjs/common";
+import { usePage } from "@akanjs/next";
+import { st } from "@akanjs/store";
+import { AiOutlineEdit, AiOutlineSave } from "react-icons/ai";
+import { BiDotsVertical } from "react-icons/bi";
+import { Modal } from "../Modal";
+import Remove from "./Remove";
+import View from "./View";
+function ViewEditModal({
+  modalClassName,
+  viewClassName,
+  sliceName,
+  renderTitle,
+  renderView,
+  renderTemplate
+}) {
+  const { l } = usePage();
+  const storeUse = st.use;
+  const storeDo = st.do;
+  const storeSel = st.sel;
+  const refName = st.slice[sliceName].refName;
+  const [modelName, ModelName] = [refName, capitalize(refName)];
+  const names = {
+    model: modelName,
+    Model: ModelName,
+    viewModel: `view${ModelName}`,
+    modelLoading: `${modelName}Loading`,
+    modelModal: `${modelName}Modal`,
+    resetModel: `reset${ModelName}`,
+    editModel: `edit${ModelName}`,
+    submitModel: `submit${ModelName}`,
+    modelForm: `${modelName}Form`
+  };
+  const model = storeUse[names.model]();
+  const modelModal = storeUse[names.modelModal]();
+  const modelLoading = storeUse[names.modelLoading]();
+  const modelFormId = storeSel((state) => state[names.modelForm].id);
+  const isModalOpen = modelModal === "view" || modelModal === "edit" && !!modelFormId;
+  const Title = () => {
+    if (!model || modelLoading || !renderTitle)
+      return /* @__PURE__ */ jsx(Fragment, {});
+    const render = renderTitle(model);
+    if (typeof render === "string")
+      return /* @__PURE__ */ jsx("h2", { className: "flex items-center text-sm md:text-base lg:text-lg xl:text-2xl", children: render });
+    else
+      return render;
+  };
+  const Template = renderTemplate;
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      open: isModalOpen,
+      onCancel: () => {
+        storeDo[names.resetModel]();
+      },
+      className: modalClassName,
+      title: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
+        /* @__PURE__ */ jsx(Title, {}),
+        /* @__PURE__ */ jsxs("div", { className: "dropdown dropdown-end", children: [
+          /* @__PURE__ */ jsx("label", { tabIndex: 0, className: "btn btn-square m-1", children: /* @__PURE__ */ jsx(BiDotsVertical, {}) }),
+          /* @__PURE__ */ jsx("ul", { tabIndex: 0, className: "dropdown-content menu bg-base-100 rounded-box z-[1] p-2 shadow-sm", children: model ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Remove, { sliceName, modelId: model.id, modal: null }) }) : null })
+        ] })
+      ] }),
+      action: modelModal === "view" ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "btn btn-primary w-full",
+          onClick: () => {
+            if (model)
+              storeDo[names.editModel](model.id);
+          },
+          children: [
+            /* @__PURE__ */ jsx(AiOutlineEdit, {}),
+            " ",
+            l("shared.edit")
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "btn btn-primary w-full",
+          onClick: () => {
+            storeDo[names.submitModel]({ sliceName, modal: "view" });
+          },
+          children: [
+            /* @__PURE__ */ jsx(AiOutlineSave, {}),
+            " ",
+            l("shared.save")
+          ]
+        }
+      ),
+      children: modelModal === "view" ? /* @__PURE__ */ jsx(View, { className: viewClassName, model, modelLoading, render: renderView }) : modelModal === "edit" ? /* @__PURE__ */ jsx(Template, {}) : null
+    }
+  );
+}
+export {
+  ViewEditModal as default
+};

package/esm/Model/ViewModal.js

@@ -0,0 +1,64 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { capitalize } from "@akanjs/common";
+import { st } from "@akanjs/store";
+import { Modal } from "../Modal";
+import View from "./View";
+function ViewModal({
+  id,
+  modal,
+  modalClassName,
+  viewClassName,
+  sliceName,
+  renderTitle,
+  renderAction,
+  renderView
+}) {
+  const storeUse = st.use;
+  const storeDo = st.do;
+  const refName = st.slice[sliceName].refName;
+  const [modelName, ModelName] = [refName, capitalize(refName)];
+  const names = {
+    model: modelName,
+    Model: ModelName,
+    viewModel: `view${ModelName}`,
+    modelLoading: `${modelName}Loading`,
+    modelModal: `${modelName}Modal`,
+    resetModel: `reset${ModelName}`
+  };
+  const model = storeUse[names.model]();
+  const modelModal = storeUse[names.modelModal]();
+  const modelLoading = storeUse[names.modelLoading]();
+  const isModalOpen = modelModal === (modal ?? "view") && (modelLoading === id || model?.id === id);
+  const Title = () => {
+    if (!model || modelLoading || !renderTitle)
+      return /* @__PURE__ */ jsx(Fragment, {});
+    const render = renderTitle(model);
+    if (typeof render === "string")
+      return /* @__PURE__ */ jsx("h2", { className: "flex items-center text-2xl", children: render });
+    else
+      return render;
+  };
+  const Action = () => {
+    if (!model || modelLoading || !renderAction)
+      return /* @__PURE__ */ jsx(Fragment, {});
+    const render = renderAction(model);
+    return render;
+  };
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      open: isModalOpen,
+      onCancel: () => {
+        storeDo[names.resetModel]();
+      },
+      className: modalClassName,
+      title: /* @__PURE__ */ jsx(Title, {}),
+      action: /* @__PURE__ */ jsx(Action, {}),
+      children: /* @__PURE__ */ jsx(View, { className: viewClassName, model, modelLoading, render: renderView })
+    }
+  );
+}
+export {
+  ViewModal as default
+};

package/esm/Model/ViewWrapper.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "@akanjs/client";
+import { capitalize } from "@akanjs/common";
+import { st } from "@akanjs/store";
+function ViewWrapper({ children, sliceName, modelId, className, modal, resets }) {
+  const refName = st.slice[sliceName].refName;
+  const modelName = refName;
+  const names = {
+    viewModel: `view${capitalize(modelName)}`
+  };
+  const storeDo = st.do;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx("cursor-pointer", className),
+      onClick: (e) => {
+        e.stopPropagation();
+        void storeDo[names.viewModel](modelId, { modal });
+        resets?.forEach((reset) => {
+          void storeDo[`reset${capitalize(reset)}`]();
+        });
+      },
+      children
+    }
+  );
+}
+export {
+  ViewWrapper as default
+};

package/esm/Model/index.js

@@ -0,0 +1,33 @@
+import {
+  Edit,
+  EditModal,
+  EditWrapper,
+  LoadInit,
+  New,
+  NewWrapper,
+  Remove,
+  RemoveWrapper,
+  SureToRemove,
+  View,
+  ViewEditModal,
+  ViewModal,
+  ViewWrapper
+} from "./index_";
+const Model = {
+  ViewModal,
+  View,
+  EditModal,
+  EditWrapper,
+  NewWrapper,
+  SureToRemove,
+  Remove,
+  RemoveWrapper,
+  LoadInit,
+  ViewWrapper,
+  ViewEditModal,
+  Edit,
+  New
+};
+export {
+  Model
+};

package/esm/Model/index_.js

@@ -0,0 +1,29 @@
+import { lazy } from "@akanjs/next";
+const ViewModal = lazy(() => import("./ViewModal"));
+const EditModal = lazy(() => import("./EditModal"));
+const View = lazy(() => import("./View"));
+const SureToRemove = lazy(() => import("./SureToRemove"));
+const Remove = lazy(() => import("./Remove"));
+const NewWrapper = lazy(() => import("./NewWrapper"));
+const EditWrapper = lazy(() => import("./EditWrapper"));
+const RemoveWrapper = lazy(() => import("./RemoveWrapper"));
+const LoadInit = lazy(() => import("./LoadInit"));
+const ViewWrapper = lazy(() => import("./ViewWrapper"));
+const ViewEditModal = lazy(() => import("./ViewEditModal"));
+const Edit = lazy(() => import("./Edit"));
+const New = lazy(() => import("./New"));
+export {
+  Edit,
+  EditModal,
+  EditWrapper,
+  LoadInit,
+  New,
+  NewWrapper,
+  Remove,
+  RemoveWrapper,
+  SureToRemove,
+  View,
+  ViewEditModal,
+  ViewModal,
+  ViewWrapper
+};

package/esm/More.js

@@ -0,0 +1,42 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "@akanjs/client";
+import dynamic from "next/dynamic";
+import { isMobile } from "react-device-detect";
+import { Pagination } from "./Pagination";
+const InfiniteScroll = dynamic(() => import("./InfiniteScroll").then((mod) => mod.InfiniteScroll), { ssr: false });
+const More = ({
+  total,
+  itemsPerPage,
+  currentPage,
+  onAddPage,
+  onPageSelect,
+  children,
+  className,
+  reverse
+}) => {
+  if (total <= itemsPerPage) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(
+      InfiniteScroll,
+      {
+        total,
+        currentPage,
+        itemsPerPage,
+        onAddPage,
+        onPageSelect,
+        reverse,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx("div", { className: clsx("mt-4 flex w-full flex-wrap justify-center", className), children: /* @__PURE__ */ jsx(Pagination, { currentPage, total, itemsPerPage, onPageSelect }) })
+  ] });
+};
+export {
+  More
+};

package/esm/ObjectId.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AiOutlineCheck, AiOutlineCopy } from "react-icons/ai";
+const ObjectId = ({ id }) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const shortenedId = `${id.substring(0, 4)}...${id.substring(id.length - 5)}`;
+  const handleCopyClick = () => {
+    void navigator.clipboard.writeText(id);
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 2e3);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "tooltip tooltip-primary", "data-tip": id, children: /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold", children: shortenedId }) }),
+    /* @__PURE__ */ jsx("button", { className: "btn btn-circle btn-xs", onClick: handleCopyClick, children: isCopied ? /* @__PURE__ */ jsx(AiOutlineCheck, {}) : /* @__PURE__ */ jsx(AiOutlineCopy, {}) })
+  ] });
+};
+export {
+  ObjectId
+};

package/esm/Pagination.js

@@ -0,0 +1,96 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "@akanjs/client";
+import { BiChevronLeft, BiChevronRight, BiDotsHorizontalRounded } from "react-icons/bi";
+const Pagination = ({
+  currentPage,
+  total,
+  onPageSelect,
+  itemsPerPage,
+  renderEmpty,
+  classNames
+}) => {
+  const totalPages = Math.ceil(total / (itemsPerPage || 1));
+  const handleLeftClick = () => {
+    if (currentPage <= 1)
+      return;
+    onPageSelect(currentPage - 1);
+  };
+  const handleRightClick = () => {
+    if (currentPage >= totalPages)
+      return;
+    onPageSelect(currentPage + 1);
+  };
+  const pageNumbers = new Array(totalPages).fill("").map((_, i) => {
+    return String(i + 1);
+  });
+  let displayNumbers = pageNumbers;
+  if (totalPages > 10) {
+    if (currentPage < 5) {
+      displayNumbers = pageNumbers.slice(0, 5).concat(["...", String(totalPages)]);
+    } else if (currentPage >= 5 && currentPage <= totalPages - 4) {
+      displayNumbers = [
+        "1",
+        "...",
+        ...pageNumbers.slice(Number(currentPage) - 3, Number(currentPage) + 2),
+        "...",
+        String(totalPages)
+      ];
+    } else {
+      displayNumbers = ["1", "...", ...pageNumbers.slice(-5)];
+    }
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: total > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: clsx(
+          "btn btn-ghost btn-square duration-200",
+          currentPage > 1 ? "opacity-100" : "opacity-0 hover:cursor-default hover:opacity-0"
+        ),
+        onClick: handleLeftClick,
+        children: /* @__PURE__ */ jsx(BiChevronLeft, {})
+      }
+    ),
+    displayNumbers.map((pageNum, index) => {
+      if (pageNum === "...") {
+        return /* @__PURE__ */ jsx("button", { className: "btn btn-ghost btn-square text-primary/40", children: /* @__PURE__ */ jsx(BiDotsHorizontalRounded, {}) }, index);
+      }
+      if (Number(pageNum) === currentPage) {
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: clsx("btn btn-ghost btn-square text-primary", classNames?.activePageNumClassName),
+            children: pageNum
+          },
+          index
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: clsx("btn btn-ghost btn-square text-primary/40", classNames?.pageNumClassName),
+          onClick: () => {
+            onPageSelect(Number(pageNum));
+          },
+          children: pageNum
+        },
+        index
+      );
+    }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: clsx(
+          "btn btn-ghost btn-square duration-200",
+          currentPage < totalPages ? "opacity-100" : "opacity-0 hover:cursor-default hover:opacity-0"
+        ),
+        onClick: handleRightClick,
+        children: /* @__PURE__ */ jsx(BiChevronRight, {})
+      }
+    )
+  ] }) });
+};
+export {
+  Pagination
+};

package/esm/Popconfirm.js

@@ -0,0 +1,105 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//! 디자인 수정, 테마 적용 안됨
+import { clsx } from "@akanjs/client";
+import { usePage } from "@akanjs/next";
+import { animated, useSpring } from "@react-spring/web";
+import { useEffect, useState } from "react";
+import { BiMessageRoundedError } from "react-icons/bi";
+const Popconfirm = ({
+  title,
+  description,
+  onConfirm,
+  okButtonProps,
+  cancelButtonProps,
+  okText,
+  cancelText,
+  children,
+  triggerClassName,
+  decoClassName
+}) => {
+  const { l } = usePage();
+  const [isConfirming, setIsConfirming] = useState(false);
+  const popconfirmProps = useSpring({
+    opacity: isConfirming ? 1 : 0,
+    from: {
+      opacity: 0
+    }
+  });
+  useEffect(() => {
+    const popconfirm = document.querySelector(".popconfirm");
+    const popconfirmRect = popconfirm?.getBoundingClientRect();
+    const popconfirmDeco = document.querySelector(".popconfirm-deco");
+    if (popconfirmRect && popconfirmRect.x < 0) {
+      popconfirm?.classList.add("left-0", "right-auto");
+      popconfirmDeco?.classList.add("left-10", "left-auto");
+    }
+    if (popconfirmRect && popconfirmRect.x + popconfirmRect.width > window.innerWidth) {
+      popconfirm?.classList.add("left-auto", "right-0");
+    }
+  }, [isConfirming]);
+  const handleConfirm = () => {
+    setIsConfirming(false);
+    onConfirm?.();
+  };
+  const handleCancel = () => {
+    setIsConfirming(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative inline-block", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx("trigger", triggerClassName),
+          onClick: (e) => {
+            e.stopPropagation();
+            setIsConfirming(true);
+          },
+          children
+        }
+      ),
+      isConfirming && /* @__PURE__ */ jsxs(
+        animated.div,
+        {
+          className: "popconfirm border-base-300 bg-base-100 absolute -right-2 bottom-0 z-10 translate-y-[106%] rounded-lg border p-4 shadow-xl",
+          style: popconfirmProps,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  "bg-base-100 border-base-300 popconfirm-deco absolute -top-2 size-4 rotate-45 rounded-sm border-t border-l",
+                  { "right-10": !decoClassName },
+                  decoClassName
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+              /* @__PURE__ */ jsx(BiMessageRoundedError, { className: "text-orange-500" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "mb-2 font-bold whitespace-nowrap", children: title }),
+                /* @__PURE__ */ jsx("div", { className: "mb-2 whitespace-nowrap", children: description })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+              /* @__PURE__ */ jsx("button", { className: "btn btn-xs btn-outline", onClick: handleCancel, ...cancelButtonProps, children: cancelText ?? l("util.cancel") }),
+              /* @__PURE__ */ jsx("button", { className: "btn btn-xs", onClick: handleConfirm, ...okButtonProps, children: okText ?? l("util.ok") })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    isConfirming && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute top-0 left-0 h-screen w-full",
+        onClick: () => {
+          setIsConfirming(false);
+        }
+      }
+    )
+  ] });
+};
+export {
+  Popconfirm
+};

package/esm/Portal.js

@@ -0,0 +1,8 @@
+import { createPortal } from "react-dom";
+const Portal = ({ children, id }) => {
+  const targetElement = document.getElementById(id);
+  return targetElement ? createPortal(children, targetElement) : null;
+};
+export {
+  Portal
+};

package/esm/Radio.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "@akanjs/client";
+const Radio = ({ value, children, disabled, className, onChange }) => {
+  return /* @__PURE__ */ jsx("div", { className: clsx(`flex gap-2`, className), children: children.map((child, idx) => {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "radio",
+          disabled,
+          className: "radio radio-primary radio-sm",
+          checked: value === child.props.value || value === idx,
+          onChange: () => {
+            onChange(child.props.value, idx);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "bg-transparent",
+          onClick: () => {
+            onChange(child.props.value, idx);
+          },
+          children: child
+        }
+      )
+    ] }, idx);
+  }) });
+};
+const Item = ({ value, className, children }) => {
+  return /* @__PURE__ */ jsx("div", { className: clsx("", className), children });
+};
+Radio.Item = Item;
+export {
+  Radio
+};

package/esm/RecentTime.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { dayjs } from "@akanjs/base";
+import { clsx } from "@akanjs/client";
+import { usePage } from "@akanjs/next";
+import relativeTime from "dayjs/plugin/relativeTime";
+dayjs.extend(relativeTime);
+const RecentTime = ({
+  date,
+  breakUnit,
+  format = "auto",
+  className
+}) => {
+  const { lang } = usePage();
+  const now = dayjs();
+  const datejs = dayjs(date).locale(lang);
+  const diff = dayjs().diff(datejs);
+  const dateFormat = format === "full" ? "YY-MM-DD HH:mm" : now.year() !== datejs.year() ? "YYYY-MM-DD" : now.month() !== datejs.month() || now.date() !== datejs.date() ? "MM-DD" : "HH:mm";
+  const diffSecs = Math.floor(diff / 1e3);
+  if (!date)
+    return null;
+  if (dayjs(0).isSame(date) || dayjs(-1).isSame(date))
+    return /* @__PURE__ */ jsx("span", { children: "--:--" });
+  if (breakUnit === "second")
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm:ss"), children: datejs.format(dateFormat) });
+  if (Math.abs(diffSecs) < 60)
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.fromNow() });
+  else if (breakUnit === "minute")
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.format(dateFormat) });
+  const diffMins = Math.floor(diff / (1e3 * 60));
+  if (Math.abs(diffMins) < 60)
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.fromNow() });
+  else if (breakUnit === "hour")
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.format(dateFormat) });
+  const diffHours = Math.floor(diff / (1e3 * 3600));
+  if (Math.abs(diffHours) < 24)
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.fromNow() });
+  else if (breakUnit === "day")
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.format(dateFormat) });
+  const diffDays = Math.floor(diff / (1e3 * 3600 * 24));
+  if (Math.abs(diffDays) < 7)
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.fromNow() });
+  else if (breakUnit === "week")
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.format(dateFormat) });
+  const diffWeeks = Math.floor(diff / (1e3 * 3600 * 24 * 7));
+  if (Math.abs(diffWeeks) < 4)
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.fromNow() });
+  else if (breakUnit === "month")
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.format(dateFormat) });
+  const diffMonths = Math.floor(diff / (1e3 * 3600 * 24 * 30));
+  if (Math.abs(diffMonths) < 12)
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.fromNow() });
+  else if (breakUnit === "year")
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.format(dateFormat) });
+  return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.fromNow() });
+};
+export {
+  RecentTime
+};