@akanjs/ui 0.0.150 → 0.0.151

package/esm/Model/ViewModal.js

@@ -0,0 +1,63 @@
+"use client";
+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__ */ React.createElement(React.Fragment, null);
+    const render = renderTitle(model);
+    if (typeof render === "string")
+      return /* @__PURE__ */ React.createElement("h2", { className: "flex items-center text-2xl" }, render);
+    else
+      return render;
+  };
+  const Action = () => {
+    if (!model || modelLoading || !renderAction)
+      return /* @__PURE__ */ React.createElement(React.Fragment, null);
+    const render = renderAction(model);
+    return render;
+  };
+  return /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      open: isModalOpen,
+      onCancel: () => {
+        storeDo[names.resetModel]();
+      },
+      className: modalClassName,
+      title: /* @__PURE__ */ React.createElement(Title, null),
+      action: /* @__PURE__ */ React.createElement(Action, null)
+    },
+    /* @__PURE__ */ React.createElement(View, { className: viewClassName, model, modelLoading, render: renderView })
+  );
+}
+export {
+  ViewModal as default
+};

package/esm/Model/ViewWrapper.js

@@ -0,0 +1,29 @@
+"use client";
+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__ */ React.createElement(
+    "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,38 @@
+"use client";
+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__ */ React.createElement(React.Fragment, null, children);
+  }
+  if (isMobile) {
+    return /* @__PURE__ */ React.createElement(
+      InfiniteScroll,
+      {
+        total,
+        currentPage,
+        itemsPerPage,
+        onAddPage,
+        onPageSelect,
+        reverse
+      },
+      children
+    );
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children, /* @__PURE__ */ React.createElement("div", { className: clsx("mt-4 flex w-full flex-wrap justify-center", className) }, /* @__PURE__ */ React.createElement(Pagination, { currentPage, total, itemsPerPage, onPageSelect })));
+};
+export {
+  More
+};

package/esm/ObjectId.js

@@ -0,0 +1,18 @@
+"use client";
+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__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "tooltip tooltip-primary", "data-tip": id }, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-semibold" }, shortenedId)), /* @__PURE__ */ React.createElement("button", { className: "btn btn-circle btn-xs", onClick: handleCopyClick }, isCopied ? /* @__PURE__ */ React.createElement(AiOutlineCheck, null) : /* @__PURE__ */ React.createElement(AiOutlineCopy, null)));
+};
+export {
+  ObjectId
+};

package/esm/Pagination.js

@@ -0,0 +1,91 @@
+"use client";
+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__ */ React.createElement("div", { className: "flex items-center justify-center" }, total > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: clsx(
+        "btn btn-ghost btn-square duration-200",
+        currentPage > 1 ? "opacity-100" : "opacity-0 hover:cursor-default hover:opacity-0"
+      ),
+      onClick: handleLeftClick
+    },
+    /* @__PURE__ */ React.createElement(BiChevronLeft, null)
+  ), displayNumbers.map((pageNum, index) => {
+    if (pageNum === "...") {
+      return /* @__PURE__ */ React.createElement("button", { key: index, className: "btn btn-ghost btn-square text-primary/40" }, /* @__PURE__ */ React.createElement(BiDotsHorizontalRounded, null));
+    }
+    if (Number(pageNum) === currentPage) {
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: index,
+          className: clsx("btn btn-ghost btn-square text-primary", classNames?.activePageNumClassName)
+        },
+        pageNum
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        key: index,
+        className: clsx("btn btn-ghost btn-square text-primary/40", classNames?.pageNumClassName),
+        onClick: () => {
+          onPageSelect(Number(pageNum));
+        }
+      },
+      pageNum
+    );
+  }), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: clsx(
+        "btn btn-ghost btn-square duration-200",
+        currentPage < totalPages ? "opacity-100" : "opacity-0 hover:cursor-default hover:opacity-0"
+      ),
+      onClick: handleRightClick
+    },
+    /* @__PURE__ */ React.createElement(BiChevronRight, null)
+  )));
+};
+export {
+  Pagination
+};

package/esm/Popconfirm.js

@@ -0,0 +1,87 @@
+"use client";
+//! 디자인 수정, 테마 적용 안됨
+import { clsx } from "@akanjs/client";
+import { usePage } from "@akanjs/next";
+import { animated, useSpring } from "@react-spring/web";
+import React, { 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__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "relative inline-block" }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx("trigger", triggerClassName),
+      onClick: (e) => {
+        e.stopPropagation();
+        setIsConfirming(true);
+      }
+    },
+    children
+  ), isConfirming && /* @__PURE__ */ React.createElement(
+    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
+    },
+    /* @__PURE__ */ React.createElement(
+      "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__ */ React.createElement("div", { className: "flex gap-1" }, /* @__PURE__ */ React.createElement(BiMessageRoundedError, { className: "text-orange-500" }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "mb-2 font-bold whitespace-nowrap" }, title), /* @__PURE__ */ React.createElement("div", { className: "mb-2 whitespace-nowrap" }, description))),
+    /* @__PURE__ */ React.createElement("div", { className: "flex justify-end gap-2" }, /* @__PURE__ */ React.createElement("button", { className: "btn btn-xs btn-outline", onClick: handleCancel, ...cancelButtonProps }, cancelText ?? l("util.cancel")), /* @__PURE__ */ React.createElement("button", { className: "btn btn-xs", onClick: handleConfirm, ...okButtonProps }, okText ?? l("util.ok")))
+  )), isConfirming && /* @__PURE__ */ React.createElement(
+    "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,34 @@
+"use client";
+import { clsx } from "@akanjs/client";
+const Radio = ({ value, children, disabled, className, onChange }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: clsx(`flex gap-2`, className) }, children.map((child, idx) => {
+    return /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center gap-1", key: idx }, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "radio",
+        disabled,
+        className: "radio radio-primary radio-sm",
+        checked: value === child.props.value || value === idx,
+        onChange: () => {
+          onChange(child.props.value, idx);
+        }
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "bg-transparent",
+        onClick: () => {
+          onChange(child.props.value, idx);
+        }
+      },
+      child
+    ));
+  }));
+};
+const Item = ({ value, className, children }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("", className) }, children);
+};
+Radio.Item = Item;
+export {
+  Radio
+};

package/esm/RecentTime.js

@@ -0,0 +1,57 @@
+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__ */ React.createElement("span", null, "--:--");
+  if (breakUnit === "second")
+    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm:ss") }, datejs.format(dateFormat));
+  if (Math.abs(diffSecs) < 60)
+    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.fromNow());
+  else if (breakUnit === "minute")
+    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.format(dateFormat));
+  const diffMins = Math.floor(diff / (1e3 * 60));
+  if (Math.abs(diffMins) < 60)
+    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.fromNow());
+  else if (breakUnit === "hour")
+    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.format(dateFormat));
+  const diffHours = Math.floor(diff / (1e3 * 3600));
+  if (Math.abs(diffHours) < 24)
+    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.fromNow());
+  else if (breakUnit === "day")
+    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.format(dateFormat));
+  const diffDays = Math.floor(diff / (1e3 * 3600 * 24));
+  if (Math.abs(diffDays) < 7)
+    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.fromNow());
+  else if (breakUnit === "week")
+    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.format(dateFormat));
+  const diffWeeks = Math.floor(diff / (1e3 * 3600 * 24 * 7));
+  if (Math.abs(diffWeeks) < 4)
+    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.fromNow());
+  else if (breakUnit === "month")
+    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.format(dateFormat));
+  const diffMonths = Math.floor(diff / (1e3 * 3600 * 24 * 30));
+  if (Math.abs(diffMonths) < 12)
+    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.fromNow());
+  else if (breakUnit === "year")
+    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.format(dateFormat));
+  return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.fromNow());
+};
+export {
+  RecentTime
+};

package/esm/Refresh.js

@@ -0,0 +1,16 @@
+"use client";
+import { BiLoaderAlt } from "react-icons/bi";
+import PullToRefresh from "react-simple-pull-to-refresh";
+const Refresh = ({ children, onRefresh }) => {
+  return /* @__PURE__ */ React.createElement(
+    PullToRefresh,
+    {
+      onRefresh,
+      refreshingContent: /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 fixed left-1/2 flex size-10 -translate-x-1/2 items-center justify-center rounded-full shadow-sm" }, /* @__PURE__ */ React.createElement(BiLoaderAlt, { className: "animate-spin text-2xl" }))
+    },
+    children
+  );
+};
+export {
+  Refresh
+};

package/esm/ScreenNavigator.js

@@ -0,0 +1,102 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { useDrag } from "@use-gesture/react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { a, SpringValue, useSpringValue } from "react-spring";
+const ScreenNavigatorContext = createContext({
+  bind: () => ({}),
+  xValue: new SpringValue(0),
+  setMenu: null,
+  onClickMenu: null,
+  currentMenu: "",
+  menus: []
+});
+const ScreenNavigator = ({
+  children,
+  setMenu = () => {
+  },
+  menus
+}) => {
+  const [currentMenu, setCurrentMenu] = useState(menus[0]);
+  const xValue = useSpringValue(0, { config: { clamp: true } });
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current)
+      return;
+    const deviceWidth = ref.current.clientWidth / 2;
+    if (currentMenu === menus[1])
+      xValue.set(-deviceWidth);
+    else
+      xValue.set(0);
+  }, []);
+  const bind = useDrag(
+    ({ first, last, offset: [x], velocity: [vx], direction: [dx], movement: [mx], cancel }) => {
+      if (!ref.current)
+        return;
+      //! 메뉴가 3개 이상일 경우 고려해야함
+      const deviceWidth = ref.current.clientWidth / 2;
+      if (x > 0 || x < -deviceWidth)
+        return;
+      if (dx < 1) {
+        if (x > -deviceWidth / 2) {
+          void xValue.start(x);
+        } else {
+          void xValue.start(-deviceWidth);
+          setCurrentMenu(menus[1]);
+          setMenu(menus[1]);
+        }
+        if (last && x > -deviceWidth / 2) {
+          void xValue.start(0);
+        }
+      } else {
+        if (x > -deviceWidth / 2) {
+          void xValue.start(0);
+          setCurrentMenu(menus[0]);
+          setMenu(menus[0]);
+        } else {
+          void xValue.start(x);
+        }
+        if (last && x < -deviceWidth / 2) {
+          void xValue.start(-deviceWidth);
+        }
+      }
+    },
+    { axis: "x", filterTaps: true, threshold: 10 }
+  );
+  const onClickMenu = (menu) => {
+    if (!ref.current)
+      return;
+    const deviceWidth = ref.current.clientWidth / 2;
+    if (menu === menus[0]) {
+      void xValue.start(0);
+      setMenu(menus[0]);
+      setCurrentMenu(menus[0]);
+    } else {
+      void xValue.start(-deviceWidth);
+      setMenu(menus[1]);
+      setCurrentMenu(menus[1]);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(ScreenNavigatorContext.Provider, { value: { bind, xValue, onClickMenu, menus, currentMenu, setMenu } }, /* @__PURE__ */ React.createElement(a.div, { ...bind(), className: "flex h-full w-[200vw] overflow-x-scroll", style: { x: xValue }, ref }, children));
+};
+const NavbarItem = ({ menu, children, className }) => {
+  const { onClickMenu, currentMenu } = useContext(ScreenNavigatorContext);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(className, currentMenu === menu ? "opacity-100" : "opacity-40"),
+      onClick: () => {
+        onClickMenu(menu);
+      }
+    },
+    children
+  );
+};
+ScreenNavigator.NavbarItem = NavbarItem;
+const Screen = ({ children }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: "h-full w-screen overflow-scroll", style: { touchAction: "pan-y" } }, children);
+};
+ScreenNavigator.Screen = Screen;
+export {
+  ScreenNavigator
+};