@akanjs/ui 0.0.149 → 0.0.151

package/esm/System/SelectLanguage.js

@@ -0,0 +1,39 @@
+"use client";
+import { router } from "@akanjs/client";
+import { usePage } from "@akanjs/next";
+import { useState } from "react";
+const languageNames = {
+  en: "English",
+  ko: "\uD55C\uAD6D\uC5B4",
+  zhChs: "\u7B80\u4F53\u4E2D\u6587",
+  zhCht: "\u7E41\u9AD4\u4E2D\u6587"
+};
+const SelectLanguage = ({ className, languages = ["en", "ko"] }) => {
+  const { l, lang } = usePage();
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      id: "select-language",
+      onClick: () => {
+        setOpen(!open);
+      },
+      className: "mx-2 my-auto cursor-pointer rounded-3xl border bg-black/50 px-3 text-xs font-light text-white md:mx-4"
+    },
+    languageNames[lang]
+  ), open ? /* @__PURE__ */ React.createElement("div", { className: "absolute top-6 -left-4 w-28 rounded-xl border bg-slate-900/90 py-2 text-center text-white" }, languages.filter((lang2) => !!languageNames[lang2]).map((lang2) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: lang2,
+      onClick: () => {
+        router.setLang(lang2);
+        setOpen(false);
+      },
+      className: "cursor-pointer py-1 hover:bg-white/20"
+    },
+    languageNames[lang2]
+  ))) : null);
+};
+export {
+  SelectLanguage
+};

package/esm/System/ThemeToggle.js

@@ -0,0 +1,21 @@
+"use client";
+import { capitalize } from "@akanjs/common";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+const ThemeToggle = () => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme, themes } = useTheme();
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const handleTheme = (e) => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  };
+  if (!mounted) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: "form-control" }, /* @__PURE__ */ React.createElement("label", { className: "label cursor-pointer" }, /* @__PURE__ */ React.createElement("span", { className: "label-text mr-2 text-sm whitespace-nowrap" }, capitalize(theme ?? "")), /* @__PURE__ */ React.createElement("input", { type: "checkbox", className: "toggle toggle-sm", checked: theme === "dark", onChange: handleTheme })));
+};
+export {
+  ThemeToggle
+};

package/esm/System/index.js

@@ -0,0 +1,26 @@
+import { baseClientEnv } from "@akanjs/base";
+import { default as CSR } from "./CSR";
+import { DevModeToggle } from "./DevModeToggle";
+import { Reconnect } from "./Reconnect";
+import { Root } from "./Root";
+import { SelectLanguage } from "./SelectLanguage";
+import { default as SSR } from "./SSR";
+import { ThemeToggle } from "./ThemeToggle";
+const Provider = (props) => {
+  if (baseClientEnv.renderMode === "csr")
+    return /* @__PURE__ */ React.createElement(CSR, { ...props });
+  else
+    return /* @__PURE__ */ React.createElement(SSR, { ...props });
+};
+const System = {
+  Provider,
+  ThemeToggle,
+  Root,
+  SelectLanguage,
+  Reconnect,
+  DevModeToggle
+};
+export {
+  Provider,
+  System
+};

package/esm/Tab/Menu.js

@@ -0,0 +1,51 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { useContext, useEffect } from "react";
+import { TabContext } from "./context";
+const Menu = ({
+  className,
+  activeClassName = "",
+  disabledClassName = "",
+  disabled = false,
+  menu,
+  children,
+  scrollToTop,
+  tooltip
+}) => {
+  const { menu: currentMenu, setMenu, menuSet } = useContext(TabContext);
+  useEffect(() => {
+    if (!menuSet.current)
+      return;
+    menuSet.current.add(menu);
+  }, [menu]);
+  useEffect(() => {
+    if (!disabled || !menuSet.current)
+      return;
+    if (currentMenu === menu)
+      setMenu([...menuSet.current.values()].find((m) => m !== menu) ?? null);
+  }, [disabled]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-tip": tooltip,
+      className: clsx(className, {
+        "cursor-pointer": menu !== currentMenu && !disabled,
+        "cursor-not-allowed": disabled,
+        tooltip: !!tooltip,
+        [activeClassName]: menu === currentMenu,
+        [disabledClassName]: disabled
+      }),
+      onClick: () => {
+        if (disabled)
+          return;
+        setMenu(menu);
+        if (scrollToTop)
+          window.scrollTo({ top: 0, behavior: "smooth" });
+      }
+    },
+    children
+  );
+};
+export {
+  Menu
+};

package/esm/Tab/Menus.js

@@ -0,0 +1,7 @@
+"use client";
+const Menus = ({ className, children }) => {
+  return /* @__PURE__ */ React.createElement("div", { className }, children);
+};
+export {
+  Menus
+};

package/esm/Tab/Panel.js

@@ -0,0 +1,23 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { useContext, useEffect, useState } from "react";
+import { TabContext } from "./context";
+const Panel = ({ className, menu, children, loading = "eager" }) => {
+  const { menu: currentMenu } = useContext(TabContext);
+  const [loaded, setLoaded] = useState(menu === currentMenu);
+  useEffect(() => {
+    if (loading === "eager")
+      setLoaded(true);
+    else if (loading === "lazy" && !loaded && currentMenu === menu)
+      setLoaded(true);
+    else if (loading === "every")
+      setLoaded(currentMenu === menu);
+  }, [currentMenu]);
+  if (loading === "eager")
+    return /* @__PURE__ */ React.createElement("div", { className: clsx(className, { hidden: currentMenu !== menu }) }, children);
+  else
+    return loaded ? /* @__PURE__ */ React.createElement("div", { className: clsx(className, { hidden: currentMenu !== menu }) }, children) : null;
+};
+export {
+  Panel
+};

package/esm/Tab/Provider.js

@@ -0,0 +1,12 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { useRef, useState } from "react";
+import { TabContext } from "./context";
+const Provider = ({ className, defaultMenu = null, children }) => {
+  const menuSet = useRef(/* @__PURE__ */ new Set());
+  const [menu, setMenu] = useState(defaultMenu);
+  return /* @__PURE__ */ React.createElement(TabContext.Provider, { value: { defaultMenu, menu, setMenu, menuSet } }, /* @__PURE__ */ React.createElement("div", { "data-menu": menu, className: clsx(className, "group/tab") }, children));
+};
+export {
+  Provider
+};

package/esm/Tab/context.js

@@ -0,0 +1,11 @@
+"use client";
+import { createContext } from "react";
+const TabContext = createContext({
+  defaultMenu: null,
+  menu: null,
+  setMenu: (value) => null,
+  menuSet: null
+});
+export {
+  TabContext
+};

package/esm/Tab/index.js

@@ -0,0 +1,13 @@
+import { Menu } from "./Menu";
+import { Menus } from "./Menus";
+import { Panel } from "./Panel";
+import { Provider } from "./Provider";
+const Tab = (props) => {
+  return /* @__PURE__ */ React.createElement(Provider, { ...props });
+};
+Tab.Menu = Menu;
+Tab.Menus = Menus;
+Tab.Panel = Panel;
+export {
+  Tab
+};

package/esm/Table.js

@@ -0,0 +1,56 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { st } from "@akanjs/store";
+import React, { useMemo } from "react";
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
+import { Empty } from "./Empty";
+import { Pagination } from "./Pagination";
+const Table = ({
+  columns,
+  dataSource,
+  loading,
+  size,
+  bordered,
+  pagination,
+  showHeader = true,
+  onRow,
+  rowClassName,
+  rowKey
+}) => {
+  const sizeClassName = size === "small" ? "table-compact" : "";
+  const loadingClassName = loading ? "opacity-30" : "";
+  const borderedClassName = bordered ? "border border-gray-200 rounded-xl" : "";
+  const responsive = st.use.responsive();
+  const renderedColumns = useMemo(() => {
+    return columns.filter((c) => !c.responsive || c.responsive.includes(responsive)).map((column, idx) => /* @__PURE__ */ React.createElement("th", { key: idx, className: "whitespace-nowrap" }, column.title));
+  }, [columns, responsive]);
+  const renderedRows = useMemo(() => {
+    return dataSource.map((rowData, rowIndex) => {
+      const renderedCells = columns.filter((c) => !c.responsive || c.responsive.includes(responsive)).map((column, idx) => /* @__PURE__ */ React.createElement(
+        "td",
+        {
+          key: idx,
+          className: clsx(
+            "whitespace-nowrap",
+            rowClassName ? typeof rowClassName === "string" ? rowClassName : rowClassName(rowData, rowIndex) : ""
+          ),
+          ...onRow?.(rowData, rowIndex)
+        },
+        column.render ? column.render(rowData[column.dataIndex], rowData, rowIndex) : column.dataIndex ? rowData[column.dataIndex] : null
+      ));
+      return /* @__PURE__ */ React.createElement("tr", { key: rowIndex }, renderedCells);
+    });
+  }, [columns, dataSource, responsive]);
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("relative w-full", loadingClassName, borderedClassName) }, loading && /* @__PURE__ */ React.createElement("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" }, /* @__PURE__ */ React.createElement(AiOutlineLoading3Quarters, { className: "animate-spin text-3xl" })), /* @__PURE__ */ React.createElement("table", { className: clsx("table w-full", sizeClassName) }, showHeader === true || Array.isArray(showHeader) && showHeader.includes(responsive) ? /* @__PURE__ */ React.createElement("thead", { className: "normal-case" }, /* @__PURE__ */ React.createElement("tr", null, renderedColumns)) : null, !!dataSource.length && /* @__PURE__ */ React.createElement("tbody", null, renderedRows)), !dataSource.length && /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement(Empty, null)), pagination && /* @__PURE__ */ React.createElement("div", { className: "mt-3 flex justify-center" }, /* @__PURE__ */ React.createElement(
+    Pagination,
+    {
+      currentPage: pagination.currentPage,
+      total: pagination.total,
+      onPageSelect: pagination.onPageSelect,
+      itemsPerPage: pagination.itemsPerPage
+    }
+  )));
+};
+export {
+  Table
+};

package/esm/ToggleSelect.js

@@ -0,0 +1,99 @@
+import { clsx } from "@akanjs/client";
+import { usePage } from "@akanjs/next";
+const ToggleSelect = ({
+  className,
+  btnClassName,
+  items,
+  nullable,
+  validate,
+  value,
+  onChange,
+  disabled
+}) => {
+  const { l } = usePage();
+  const validateResult = validate(value ?? "");
+  const invalidMessage = !value?.length || validateResult === true ? null : validateResult === false ? l("util.invalidValueError") : validateResult;
+  const options = items.map(
+    (item) => typeof item === "string" ? { label: item, value: item } : item
+  );
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(
+        "border-base-content/20 relative flex w-full flex-wrap items-center gap-1 rounded-md border p-2",
+        className
+      )
+    },
+    options.map((option, idx) => {
+      const isSelected = value === option.value;
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: idx,
+          disabled,
+          className: clsx(
+            "btn btn-sm",
+            { "bg-success/70 text-success-content": isSelected },
+            // {
+            //   "btn-error": status === "error",
+            //   "btn-warning": status === "warning",
+            // },
+            btnClassName
+          ),
+          onClick: () => {
+            onChange(option.value, idx);
+          }
+        },
+        option.label
+      );
+    }),
+    invalidMessage ? /* @__PURE__ */ React.createElement("div", { className: "text-error animate-fadeIn absolute -bottom-4 text-xs" }, invalidMessage) : null
+  );
+};
+const Multi = ({ className, btnClassName, items, nullable, validate, value, onChange, disabled }) => {
+  const { l } = usePage();
+  const validateResult = validate(value);
+  const invalidMessage = !value.length || validateResult === true ? null : validateResult === false ? l("util.invalidValueError") : validateResult;
+  const options = items.map(
+    (item) => typeof item === "string" ? { label: item, value: item } : item
+  );
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(
+        "border-base-content/20 relative flex w-full flex-wrap items-center gap-1 rounded-md border p-2",
+        className
+      )
+    },
+    options.map((option, idx) => {
+      const isSelected = value.includes(option.value);
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: idx,
+          disabled,
+          className: clsx(
+            "btn btn-sm",
+            {
+              "bg-success/70 text-success-content": isSelected
+            },
+            btnClassName
+          ),
+          onClick: () => {
+            onChange(
+              isSelected ? value.filter((i) => i !== option.value) : [...value, option.value].sort(
+                (a, b) => options.findIndex((o) => o.value === a) - items.findIndex((o) => o.value === b)
+              )
+            );
+          }
+        },
+        option.label
+      );
+    }),
+    invalidMessage ? /* @__PURE__ */ React.createElement("div", { className: "text-error animate-fadeIn absolute -bottom-4 text-xs" }, invalidMessage) : null
+  );
+};
+ToggleSelect.Multi = Multi;
+export {
+  ToggleSelect
+};

package/esm/Unauthorized.js

@@ -0,0 +1,21 @@
+import { clsx } from "@akanjs/client";
+import { usePage } from "@akanjs/next";
+import React from "react";
+import { AiOutlineBlock } from "react-icons/ai";
+const Unauthorized = ({ className = "", description, children, minHeight = 300 }) => {
+  const { l } = usePage();
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(
+        `min-h-[ w-full${minHeight}px] text-base-content/30 flex flex-col items-center justify-center gap-3 pt-6 pb-3`,
+        className
+      )
+    },
+    /* @__PURE__ */ React.createElement(AiOutlineBlock, { className: "scale-150 text-4xl" }),
+    /* @__PURE__ */ React.createElement("p", null, description ?? l("util.unauthorized"))
+  ), children);
+};
+export {
+  Unauthorized
+};

package/esm/index.js

@@ -1 +1,84 @@
-export * from "./src";
+import { Data } from "./Data";
+import { Dialog } from "./Dialog";
+import { Layout } from "./Layout";
+import { Link } from "./Link";
+import { Load } from "./Load";
+import { Loading } from "./Loading";
+import { Model } from "./Model";
+import { Signal } from "./Signal";
+import { System } from "./System";
+import { Tab } from "./Tab";
+import { BottomSheet } from "./BottomSheet";
+import { Button } from "./Button";
+import { ClientSide } from "./ClientSide";
+import { Copy } from "./Copy";
+import { CsrImage } from "./CsrImage";
+import { DatePicker } from "./DatePicker";
+import { DragAction } from "./DragAction";
+import { DraggableList } from "./DraggableList";
+import { Dropdown } from "./Dropdown";
+import { Empty } from "./Empty";
+import { Field } from "./Field";
+import { FontFace } from "./FontFace";
+import { Image } from "./Image";
+import { InfiniteScroll } from "./InfiniteScroll";
+import { Input } from "./Input";
+import { KeyboardAvoiding } from "./KeyboardAvoiding";
+import { Menu } from "./Menu";
+import { Modal } from "./Modal";
+import { More } from "./More";
+import { ObjectId } from "./ObjectId";
+import { Pagination } from "./Pagination";
+import { Popconfirm } from "./Popconfirm";
+import { Portal } from "./Portal";
+import { Radio } from "./Radio";
+import { RecentTime } from "./RecentTime";
+import { Refresh } from "./Refresh";
+import { ScreenNavigator } from "./ScreenNavigator";
+import { Select } from "./Select";
+import { Table } from "./Table";
+import { ToggleSelect } from "./ToggleSelect";
+import { Unauthorized } from "./Unauthorized";
+export {
+  BottomSheet,
+  Button,
+  ClientSide,
+  Copy,
+  CsrImage,
+  Data,
+  DatePicker,
+  Dialog,
+  DragAction,
+  DraggableList,
+  Dropdown,
+  Empty,
+  Field,
+  FontFace,
+  Image,
+  InfiniteScroll,
+  Input,
+  KeyboardAvoiding,
+  Layout,
+  Link,
+  Load,
+  Loading,
+  Menu,
+  Modal,
+  Model,
+  More,
+  ObjectId,
+  Pagination,
+  Popconfirm,
+  Portal,
+  Radio,
+  RecentTime,
+  Refresh,
+  ScreenNavigator,
+  Select,
+  Signal,
+  System,
+  Tab,
+  Table,
+  ToggleSelect,
+  Unauthorized
+};

package/index.d.ts

@@ -1 +1,41 @@
-export * from "./src";
+export { Data } from "./Data";
+export { Dialog } from "./Dialog";
+export { Layout } from "./Layout";
+export { Link } from "./Link";
+export { Load } from "./Load";
+export { Loading } from "./Loading";
+export { Model } from "./Model";
+export { Signal } from "./Signal";
+export { System } from "./System";
+export { Tab } from "./Tab";
+export { BottomSheet, type BottomSheetRef } from "./BottomSheet";
+export { Button } from "./Button";
+export { ClientSide } from "./ClientSide";
+export { Copy } from "./Copy";
+export { CsrImage } from "./CsrImage";
+export { DatePicker } from "./DatePicker";
+export { DragAction } from "./DragAction";
+export { DraggableList } from "./DraggableList";
+export { Dropdown } from "./Dropdown";
+export { Empty } from "./Empty";
+export { Field } from "./Field";
+export { FontFace } from "./FontFace";
+export { Image } from "./Image";
+export { InfiniteScroll } from "./InfiniteScroll";
+export { Input } from "./Input";
+export { KeyboardAvoiding } from "./KeyboardAvoiding";
+export { Menu } from "./Menu";
+export { Modal } from "./Modal";
+export { More } from "./More";
+export { ObjectId } from "./ObjectId";
+export { Pagination } from "./Pagination";
+export { Popconfirm } from "./Popconfirm";
+export { Portal } from "./Portal";
+export { Radio } from "./Radio";
+export { RecentTime } from "./RecentTime";
+export { Refresh } from "./Refresh";
+export { ScreenNavigator } from "./ScreenNavigator";
+export { Select } from "./Select";
+export { Table } from "./Table";
+export { ToggleSelect } from "./ToggleSelect";
+export { Unauthorized } from "./Unauthorized";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akanjs/ui",
-  "version": "0.0.149",
+  "version": "0.0.151",
   "sourceType": "module",
   "publishConfig": {
     "access": "public"
@@ -14,7 +14,28 @@
   "engines": {
     "node": ">=22"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@capacitor/browser": "7.0.1",
+    "@radix-ui/react-dialog": "1.1.4",
+    "@react-spring/web": "^9.7.5",
+    "@use-gesture/react": "^10.3.1",
+    "dayjs": "^1.11.13",
+    "file-saver": "^2.0.5",
+    "jsonwebtoken": "^9.0.2",
+    "lodash-move": "^1.1.1",
+    "lodash.clamp": "^4.0.3",
+    "next": "15.3.2",
+    "next-themes": "0.4.4",
+    "react": "18.3.1",
+    "react-copy-to-clipboard": "5.1.0",
+    "react-datepicker": "7.5.0",
+    "react-device-detect": "^2.2.3",
+    "react-dom": "18.3.1",
+    "react-easy-crop": "^5.2.0",
+    "react-icons": "^5.4.0",
+    "react-simple-pull-to-refresh": "^1.3.3",
+    "react-spring": "^9.7.5"
+  },
   "exports": {
     ".": {
       "require": "./cjs/index.js",

package/esm/src/index.js

@@ -1,4 +0,0 @@
-const a = 1;
-export {
-  a
-};

package/src/index.d.ts

@@ -1 +0,0 @@
-export declare const a = 1;