@ztwoint/z-ui 0.1.27 → 0.1.29

package/dist/components/dropdown-menu/z2-dropdown-menu.js

@@ -0,0 +1,255 @@
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-dropdown-menu";
+import { CheckIcon as i, CircleIcon as u, ChevronRightIcon as l } from "lucide-react";
+import { cn as n } from "../../lib/utils.js";
+function b({ ...e }) {
+  return /* @__PURE__ */ t(o.Root, { "data-slot": "dropdown-menu", ...e });
+}
+function m({
+  ...e
+}) {
+  return /* @__PURE__ */ t(o.Portal, { "data-slot": "dropdown-menu-portal", ...e });
+}
+function f({
+  ...e
+}) {
+  return /* @__PURE__ */ t(o.Trigger, { "data-slot": "dropdown-menu-trigger", ...e });
+}
+function x({
+  className: e,
+  sideOffset: a = 8,
+  ...r
+}) {
+  return /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
+    o.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset: a,
+      className: n(
+        "bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-800",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[12rem]",
+        "origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
+        "rounded-xl p-2 shadow-2xl shadow-black/10 dark:shadow-black/30",
+        "backdrop-blur-xl bg-white/95 dark:bg-gray-950/95",
+        e
+      ),
+      ...r
+    }
+  ) });
+}
+function w({ ...e }) {
+  return /* @__PURE__ */ t(o.Group, { "data-slot": "dropdown-menu-group", ...e });
+}
+function k({
+  className: e,
+  inset: a,
+  variant: r = "default",
+  ...d
+}) {
+  return /* @__PURE__ */ t(
+    o.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": a,
+      "data-variant": r,
+      className: n(
+        "relative flex cursor-default items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium",
+        "outline-none select-none transition-all duration-150",
+        "hover:bg-gray-50 dark:hover:bg-gray-900/50",
+        "focus:bg-blue-50 dark:focus:bg-blue-950/30 focus:text-blue-700 dark:focus:text-blue-300",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
+        "data-[variant=destructive]:text-red-600 dark:data-[variant=destructive]:text-red-400",
+        "data-[variant=destructive]:hover:bg-red-50 dark:data-[variant=destructive]:hover:bg-red-950/20",
+        "data-[variant=destructive]:focus:bg-red-50 dark:data-[variant=destructive]:focus:bg-red-950/30",
+        "data-[inset]:pl-10",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "[&_svg:not([class*='text-'])]:text-gray-500 dark:[&_svg:not([class*='text-'])]:text-gray-400",
+        e
+      ),
+      ...d
+    }
+  );
+}
+function h({
+  className: e,
+  children: a,
+  checked: r,
+  ...d
+}) {
+  return /* @__PURE__ */ s(
+    o.CheckboxItem,
+    {
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: n(
+        "relative flex cursor-default items-center gap-3 rounded-lg py-2.5 pr-3 pl-10 text-sm font-medium",
+        "outline-none select-none transition-all duration-150",
+        "hover:bg-gray-50 dark:hover:bg-gray-900/50",
+        "focus:bg-blue-50 dark:focus:bg-blue-950/30 focus:text-blue-700 dark:focus:text-blue-300",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        e
+      ),
+      checked: r,
+      ...d,
+      children: [
+        /* @__PURE__ */ t("span", { className: "pointer-events-none absolute left-3 flex size-4 items-center justify-center", children: /* @__PURE__ */ t(o.ItemIndicator, { children: /* @__PURE__ */ t(i, { className: "size-3.5 text-blue-600 dark:text-blue-400" }) }) }),
+        a
+      ]
+    }
+  );
+}
+function v({
+  ...e
+}) {
+  return /* @__PURE__ */ t(o.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...e });
+}
+function y({
+  className: e,
+  children: a,
+  ...r
+}) {
+  return /* @__PURE__ */ s(
+    o.RadioItem,
+    {
+      "data-slot": "dropdown-menu-radio-item",
+      className: n(
+        "relative flex cursor-default items-center gap-3 rounded-lg py-2.5 pr-3 pl-10 text-sm font-medium",
+        "outline-none select-none transition-all duration-150",
+        "hover:bg-gray-50 dark:hover:bg-gray-900/50",
+        "focus:bg-blue-50 dark:focus:bg-blue-950/30 focus:text-blue-700 dark:focus:text-blue-300",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        e
+      ),
+      ...r,
+      children: [
+        /* @__PURE__ */ t("span", { className: "pointer-events-none absolute left-3 flex size-4 items-center justify-center", children: /* @__PURE__ */ t(o.ItemIndicator, { children: /* @__PURE__ */ t(u, { className: "size-2 fill-blue-600 dark:fill-blue-400 text-blue-600 dark:text-blue-400" }) }) }),
+        a
+      ]
+    }
+  );
+}
+function D({
+  className: e,
+  inset: a,
+  ...r
+}) {
+  return /* @__PURE__ */ t(
+    o.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": a,
+      className: n(
+        "px-3 py-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",
+        "data-[inset]:pl-10",
+        e
+      ),
+      ...r
+    }
+  );
+}
+function M({
+  className: e,
+  ...a
+}) {
+  return /* @__PURE__ */ t(
+    o.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: n("bg-gray-200 dark:bg-gray-800 my-2 h-px", e),
+      ...a
+    }
+  );
+}
+function z({ className: e, ...a }) {
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      "data-slot": "dropdown-menu-shortcut",
+      className: n(
+        "ml-auto text-xs font-mono text-gray-400 dark:text-gray-500 tracking-wider",
+        "bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded",
+        e
+      ),
+      ...a
+    }
+  );
+}
+function I({ ...e }) {
+  return /* @__PURE__ */ t(o.Sub, { "data-slot": "dropdown-menu-sub", ...e });
+}
+function Z({
+  className: e,
+  inset: a,
+  children: r,
+  ...d
+}) {
+  return /* @__PURE__ */ s(
+    o.SubTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": a,
+      className: n(
+        "flex cursor-default items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium",
+        "outline-none select-none transition-all duration-150",
+        "hover:bg-gray-50 dark:hover:bg-gray-900/50",
+        "focus:bg-blue-50 dark:focus:bg-blue-950/30 focus:text-blue-700 dark:focus:text-blue-300",
+        "data-[state=open]:bg-blue-50 dark:data-[state=open]:bg-blue-950/30",
+        "data-[state=open]:text-blue-700 dark:data-[state=open]:text-blue-300",
+        "data-[inset]:pl-10",
+        e
+      ),
+      ...d,
+      children: [
+        r,
+        /* @__PURE__ */ t(l, { className: "ml-auto size-4 text-gray-400 dark:text-gray-500" })
+      ]
+    }
+  );
+}
+function N({
+  className: e,
+  ...a
+}) {
+  return /* @__PURE__ */ t(
+    o.SubContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: n(
+        "bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-800",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin)",
+        "overflow-hidden rounded-xl p-2 shadow-2xl shadow-black/10 dark:shadow-black/30",
+        "backdrop-blur-xl bg-white/95 dark:bg-gray-950/95",
+        e
+      ),
+      ...a
+    }
+  );
+}
+export {
+  b as Z2DropdownMenu,
+  h as Z2DropdownMenuCheckboxItem,
+  x as Z2DropdownMenuContent,
+  w as Z2DropdownMenuGroup,
+  k as Z2DropdownMenuItem,
+  D as Z2DropdownMenuLabel,
+  m as Z2DropdownMenuPortal,
+  v as Z2DropdownMenuRadioGroup,
+  y as Z2DropdownMenuRadioItem,
+  M as Z2DropdownMenuSeparator,
+  z as Z2DropdownMenuShortcut,
+  I as Z2DropdownMenuSub,
+  N as Z2DropdownMenuSubContent,
+  Z as Z2DropdownMenuSubTrigger,
+  f as Z2DropdownMenuTrigger
+};

package/dist/components/nav-header/nav-header.js

@@ -1,19 +1,19 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import { createContext as d } from "react";
 import n from "../assets/icons/z2-icon.js";
-import { cn as s } from "../../lib/utils.js";
+import { cn as t } from "../../lib/utils.js";
 import { NavItem as c } from "./nav-item/nav-item.js";
-const N = d({}), i = ({ className: a, children: r, ...t }) => /* @__PURE__ */ e(N.Provider, { value: {}, children: /* @__PURE__ */ l(
+const N = d({}), i = ({ className: a, children: r, ...s }) => /* @__PURE__ */ e(N.Provider, { value: {}, children: /* @__PURE__ */ l(
   "header",
   {
-    className: s(
-      "flex items-center h-14 p-3",
+    className: t(
+      "flex items-center h-12 p-3",
       "gap-6",
       // space between icon/separator/list
       "bg-[#001534]",
       a
     ),
-    ...t,
+    ...s,
     children: [
       /* @__PURE__ */ e("div", { className: "flex items-center flex-shrink-0", children: /* @__PURE__ */ e(n, { className: "shrink-0" }) }),
       /* @__PURE__ */ e("div", { className: "h-4 w-px bg-white/20", "aria-hidden": "true" }),
@@ -22,12 +22,12 @@ const N = d({}), i = ({ className: a, children: r, ...t }) => /* @__PURE__ */ e(
   }
 ) });
 i.displayName = "NavHeader.Root";
-const m = ({ className: a, children: r, ...t }) => /* @__PURE__ */ e("nav", { className: s("flex flex-row gap-2 ml-0", a), ...t, children: r });
+const m = ({ className: a, children: r, ...s }) => /* @__PURE__ */ e("nav", { className: t("flex flex-row gap-2 ml-0", a), ...s, children: r });
 m.displayName = "NavHeader.List";
 const o = ({
   className: a,
   ...r
-}) => /* @__PURE__ */ e("div", { className: s("list-none", a), children: /* @__PURE__ */ e(c, { ...r }) });
+}) => /* @__PURE__ */ e("div", { className: "list-none", children: /* @__PURE__ */ e(c, { ...r, className: t(a) }) });
 o.displayName = "NavHeader.Item";
 const H = {
   Root: i,

package/dist/components/table/components/cell/boolean-cell.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { CellValue } from '../../table.type';
+interface BooleanCellProps {
+    value: CellValue;
+}
+export declare const BooleanCell: FC<BooleanCellProps>;
+export {};

package/dist/components/table/components/cell/boolean-cell.js

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+import o from "../../../../node_modules/@heroicons/react/24/solid/esm/CheckCircleIcon.js";
+import t from "../../../../node_modules/@heroicons/react/24/solid/esm/XCircleIcon.js";
+const l = ({ value: r }) => r == null ? null : r ? /* @__PURE__ */ e(o, { className: "text-green-500 w-4 h-4" }) : /* @__PURE__ */ e(t, { className: "text-red-500 w-4 h-4" });
+export {
+  l as BooleanCell
+};

package/dist/components/table/components/cell/index.d.ts

@@ -0,0 +1,3 @@
+export { TextCell } from './text-cell';
+export { NumberCell } from './number-cell';
+export { BooleanCell } from './boolean-cell';

package/dist/components/table/components/cell/number-cell.d.ts

@@ -0,0 +1,7 @@
+import { CellValue } from '../../table.type';
+import * as React from 'react';
+interface NumberCellProps {
+    value: CellValue;
+}
+export declare const NumberCell: React.FC<NumberCellProps>;
+export {};

package/dist/components/table/components/cell/number-cell.js

@@ -0,0 +1,5 @@
+import { jsx as t, Fragment as n } from "react/jsx-runtime";
+const o = ({ value: e }) => /* @__PURE__ */ t(n, { children: ((r) => r == null ? "" : typeof r == "number" ? new Intl.NumberFormat().format(r) : String(r))(e) });
+export {
+  o as NumberCell
+};

package/dist/components/table/components/cell/text-cell.d.ts

@@ -0,0 +1,7 @@
+import { CellValue } from '../../table.type';
+import * as React from 'react';
+interface TextCellProps {
+    value: CellValue;
+}
+export declare const TextCell: React.FC<TextCellProps>;
+export {};

package/dist/components/table/components/cell/text-cell.js

@@ -0,0 +1,5 @@
+import { jsx as e, Fragment as n } from "react/jsx-runtime";
+const i = ({ value: t }) => /* @__PURE__ */ e(n, { children: ((r) => r == null ? "" : String(r))(t) });
+export {
+  i as TextCell
+};

package/dist/components/table/components/index.d.ts

@@ -0,0 +1,11 @@
+export { TableCell } from './table-cell';
+export { TableHeader, TableSortIcon } from './table-header';
+export { TableRow } from './table-row';
+export { TableEmptyState } from './table-empty-state';
+export { TableLoadingState } from './table-loading-state';
+export { Pagination as TablePagination } from './pagination';
+export { TableHeaderWrapper } from './table-header-wrapper';
+export { TableHeaderContent } from './table-header-content';
+export { TableFooter } from './table-footer';
+export { TableFooterContent } from './table-footer-content';
+export * from './cell';

package/dist/components/table/components/pagination/components/index.d.ts

@@ -0,0 +1,3 @@
+export { PaginationInfo } from './pagination-info';
+export { PaginationQuickJumper } from './pagination-quick-jumper';
+export { usePaginationQuickJumper } from './pagination-quick-jumper.hook';

package/dist/components/table/components/pagination/components/pagination-info.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PaginationInfoProps } from '../pagination.type';
+export declare const PaginationInfo: React.FC<PaginationInfoProps>;
+export default PaginationInfo;

package/dist/components/table/components/pagination/components/pagination-info.js

@@ -0,0 +1,27 @@
+import { jsxs as t } from "react/jsx-runtime";
+import { calculateItemRange as s } from "../pagination.utils.js";
+import { PAGINATION_LABELS as r, PAGINATION_CSS_CLASSES as c } from "../pagination.const.js";
+const l = ({
+  showTotal: o,
+  totalItems: n,
+  currentPage: i,
+  itemsPerPage: a
+}) => {
+  if (!o || !n) return null;
+  const { start: e, end: f } = s(i, a, n);
+  return /* @__PURE__ */ t("div", { className: c.info, children: [
+    r.showing,
+    " ",
+    e,
+    "-",
+    f,
+    " ",
+    r.of,
+    " ",
+    n
+  ] });
+};
+export {
+  l as PaginationInfo,
+  l as default
+};

package/dist/components/table/components/pagination/components/pagination-quick-jumper.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PaginationQuickJumperProps } from '../pagination.type';
+export declare const PaginationQuickJumper: React.FC<PaginationQuickJumperProps>;
+export default PaginationQuickJumper;

package/dist/components/table/components/pagination/components/pagination-quick-jumper.hook.d.ts

@@ -0,0 +1,6 @@
+export declare const usePaginationQuickJumper: (currentPage: number, totalPage: number, onPageChange: (page: number) => void) => {
+    inputValue: string;
+    handleInputChange: (value: string) => void;
+    handleInputSubmit: () => void;
+    handleKeyPress: (event: React.KeyboardEvent) => void;
+};

package/dist/components/table/components/pagination/components/pagination-quick-jumper.hook.js

@@ -0,0 +1,24 @@
+import { useState as m, useCallback as s } from "react";
+import { isValidPageNumber as c } from "../pagination.utils.js";
+const l = (i, u, r) => {
+  const [e, o] = m(""), p = s((t) => {
+    (t === "" || /^\d+$/.test(t)) && o(t);
+  }, []), n = s(() => {
+    const t = parseInt(e, 10);
+    c(t, u) && t !== i && r(t), o("");
+  }, [e, u, i, r]), a = s(
+    (t) => {
+      t.key === "Enter" && n();
+    },
+    [n]
+  );
+  return {
+    inputValue: e,
+    handleInputChange: p,
+    handleInputSubmit: n,
+    handleKeyPress: a
+  };
+};
+export {
+  l as usePaginationQuickJumper
+};

package/dist/components/table/components/pagination/components/pagination-quick-jumper.js

@@ -0,0 +1,35 @@
+import { jsxs as a, jsx as g } from "react/jsx-runtime";
+import { PAGINATION_CSS_CLASSES as n, PAGINATION_LABELS as t } from "../pagination.const.js";
+import { usePaginationQuickJumper as c } from "./pagination-quick-jumper.hook.js";
+const P = ({
+  disabled: o,
+  currentPage: e,
+  totalPage: r,
+  onChange: i
+}) => {
+  const { inputValue: u, handleInputChange: l, handleInputSubmit: s, handleKeyPress: p } = c(e, r, i);
+  return /* @__PURE__ */ a("div", { className: n.jumper, children: [
+    /* @__PURE__ */ a("span", { children: [
+      t.goToPage,
+      ":"
+    ] }),
+    /* @__PURE__ */ g(
+      "input",
+      {
+        type: "text",
+        className: n.input,
+        value: u,
+        onChange: (m) => l(m.target.value),
+        onKeyPress: p,
+        onBlur: s,
+        disabled: o,
+        placeholder: e.toString(),
+        "aria-label": t.goToPage
+      }
+    )
+  ] });
+};
+export {
+  P as PaginationQuickJumper,
+  P as default
+};

package/dist/components/table/components/pagination/index.d.ts

@@ -0,0 +1,6 @@
+export { Pagination, default } from './pagination';
+export type { PaginationProps, PaginationInfoProps, PaginationQuickJumperProps, } from './pagination.type';
+export { usePagination } from './pagination.hook';
+export { usePaginationQuickJumper } from './components/pagination-quick-jumper.hook';
+export { calculateVisiblePages, calculateItemRange, isValidPageNumber } from './pagination.utils';
+export { PAGINATION_DEFAULTS, PAGINATION_CSS_CLASSES, PAGINATION_LABELS } from './pagination.const';

package/dist/components/table/components/pagination/pagination.const.d.ts

@@ -0,0 +1,26 @@
+export declare const PAGINATION_DEFAULTS: {
+    readonly MAX_VISIBLE_PAGES: 6;
+    readonly ITEMS_PER_PAGE: 10;
+};
+export declare const PAGINATION_CSS_CLASSES: {
+    readonly container: "flex items-center justify-between gap-4 p-4";
+    readonly navigation: "flex items-center gap-2";
+    readonly button: "flex items-center justify-center w-8 h-8 text-sm rounded border border-gray-300 bg-white hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed transition-colors";
+    readonly buttonActive: "bg-blue-600 text-white border-blue-600 hover:bg-blue-700";
+    readonly buttonIcon: "flex items-center justify-center w-8 h-8 text-sm rounded border border-gray-300 bg-white hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed transition-colors";
+    readonly ellipsis: "flex items-center justify-center w-8 h-8 text-gray-400";
+    readonly info: "text-sm text-text-neutral-secondary";
+    readonly jumper: "flex items-center gap-2 text-sm text-text-neutral-primary";
+    readonly input: "w-16 px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent";
+};
+export declare const PAGINATION_LABELS: {
+    readonly previous: "Previous page";
+    readonly next: "Next page";
+    readonly first: "First page";
+    readonly last: "Last page";
+    readonly goToPage: "Go to page";
+    readonly page: "Page";
+    readonly of: "out of";
+    readonly showing: "Viewing";
+    readonly to: "to";
+};

package/dist/components/table/components/pagination/pagination.const.js

@@ -0,0 +1,22 @@
+const e = {
+  MAX_VISIBLE_PAGES: 6
+}, t = {
+  ellipsis: "flex items-center justify-center w-8 h-8 text-gray-400",
+  info: "text-sm text-text-neutral-secondary",
+  jumper: "flex items-center gap-2 text-sm text-text-neutral-primary",
+  input: "w-16 px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+}, r = {
+  previous: "Previous page",
+  next: "Next page",
+  first: "First page",
+  last: "Last page",
+  goToPage: "Go to page",
+  page: "Page",
+  of: "out of",
+  showing: "Viewing"
+};
+export {
+  t as PAGINATION_CSS_CLASSES,
+  e as PAGINATION_DEFAULTS,
+  r as PAGINATION_LABELS
+};

package/dist/components/table/components/pagination/pagination.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PaginationProps } from './pagination.type';
+export declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;

package/dist/components/table/components/pagination/pagination.hook.d.ts

@@ -0,0 +1,5 @@
+import { PaginationHookProps, PaginationHookReturn } from './pagination.type';
+export declare const usePagination: (props: PaginationHookProps) => PaginationHookReturn & {
+    goToPage: (page: number) => boolean;
+    canGoToPage: (page: number) => boolean;
+};

package/dist/components/table/components/pagination/pagination.hook.js

@@ -0,0 +1,22 @@
+import { useMemo as i, useCallback as o } from "react";
+import { calculateVisiblePages as l, isValidPageNumber as P } from "./pagination.utils.js";
+const u = (a) => {
+  const n = i(
+    () => l(a),
+    [a.currentPage, a.totalPage, a.maxVisiblePages]
+  ), e = o(
+    (t) => P(t, a.totalPage),
+    [a.totalPage]
+  ), g = o(
+    (t) => e(t),
+    [e]
+  );
+  return {
+    ...n,
+    goToPage: g,
+    canGoToPage: e
+  };
+};
+export {
+  u as usePagination
+};