@konstructio/ui 0.1.2-alpha.12 → 0.1.2-alpha.120

package/dist/components/VirtualizedTable/components/Actions/components/PortalActions/PortalActions.js

@@ -0,0 +1,48 @@
+import { t as n } from "../../../../../../utils-DnIJruo0.js";
+import { ActionsList as N } from "../ActionsList/ActionsList.js";
+import { ActionsTrigger as C } from "../ActionsTrigger/ActionsTrigger.js";
+import { useActionsMenu as K } from "./hooks/use-actions-menu/use-actions-menu.js";
+import { createPortal as T } from "react-dom";
+import { jsx as o, jsxs as E } from "react/jsx-runtime";
+var z = ({ actions: s, disabledReasonSide: l, openOnHover: d = !0, wrapperClassName: m, triggerButtonClassName: c, iconTriggerButtonClassName: u, wrapperActionsClassName: f, wrapperContentActionsClassName: p, ...g }) => {
+  const { buttonRef: h, hasOpened: r, isOpen: e, menuId: i, menuRef: P, triggerRef: v, handleMenuKeyDown: w, handlePointerEnter: t, handlePointerLeave: a, handleTriggerClick: D, handleTriggerKeyDown: x, handleTriggerPointerDown: L, handleButtonPointerLeave: y, selectAndClose: A } = K({ openOnHover: d });
+  return /* @__PURE__ */ E("div", {
+    ref: v,
+    className: n("group inline-flex", m),
+    onPointerEnter: t,
+    onPointerLeave: a,
+    onKeyDown: x,
+    children: [/* @__PURE__ */ o(C, {
+      ref: h,
+      "aria-haspopup": "menu",
+      "aria-expanded": e,
+      "aria-controls": r ? i : void 0,
+      className: c,
+      iconClassName: u,
+      isOpen: e,
+      onClick: D,
+      onPointerDown: L,
+      onPointerLeave: y
+    }), r && T(/* @__PURE__ */ o("div", {
+      id: i,
+      ref: P,
+      role: "menu",
+      hidden: !e,
+      className: n("fixed z-50 w-53.75", f),
+      onPointerEnter: t,
+      onPointerLeave: a,
+      onKeyDown: w,
+      children: /* @__PURE__ */ o(N, {
+        actions: s,
+        disabledReasonSide: l,
+        className: n("animate-in fade-in-0", p),
+        isMenu: !0,
+        rowData: g.row.original,
+        onSelect: A
+      })
+    }), document.body)]
+  });
+};
+export {
+  z as PortalActions
+};

package/dist/components/VirtualizedTable/components/Actions/components/PortalActions/constants/index.js

@@ -0,0 +1,5 @@
+var _ = 100, r = 4;
+export {
+  _ as CLOSE_DELAY_MS,
+  r as MENU_GAP_PX
+};

package/dist/components/VirtualizedTable/components/Actions/components/PortalActions/hooks/index.js

@@ -0,0 +1,4 @@
+import { useActionsMenu as e } from "./use-actions-menu/use-actions-menu.js";
+export {
+  e as useActionsMenu
+};

package/dist/components/VirtualizedTable/components/Actions/components/PortalActions/hooks/use-actions-menu/use-actions-menu.js

@@ -0,0 +1,44 @@
+import { useMenuInteractions as P } from "../use-menu-interactions/use-menu-interactions.js";
+import { useMenuKeyboardNavigation as b } from "../use-menu-keyboard-navigation/use-menu-keyboard-navigation.js";
+import { useRowHighlight as y } from "../use-row-highlight/use-row-highlight.js";
+import { useCallback as C, useId as D, useRef as o, useState as u } from "react";
+var H = ({ openOnHover: a }) => {
+  const [e, l] = u(!1), [i, c] = u(!1), n = o(null), s = o(null), t = o(null), d = D(), g = C((w) => {
+    c(!0), l(w);
+  }, []), { closeMenu: r, handlePointerEnter: p, handlePointerLeave: f, handleTriggerClick: h, handleTriggerPointerDown: m, handleButtonPointerLeave: M, openMenu: I, selectAndClose: O } = P({
+    isOpen: e,
+    menuRef: t,
+    openOnHover: a,
+    triggerRef: n,
+    setIsOpen: g
+  }), { handleMenuKeyDown: R, handleTriggerKeyDown: v } = b({
+    buttonRef: s,
+    isOpen: e,
+    menuRef: t,
+    closeMenu: r,
+    openMenu: I
+  });
+  return y({
+    isOpen: e,
+    triggerRef: n
+  }), {
+    buttonRef: s,
+    hasOpened: i,
+    isOpen: e,
+    menuId: d,
+    menuRef: t,
+    triggerRef: n,
+    closeMenu: r,
+    handleMenuKeyDown: R,
+    handlePointerEnter: p,
+    handlePointerLeave: f,
+    handleTriggerClick: h,
+    handleTriggerKeyDown: v,
+    handleTriggerPointerDown: m,
+    handleButtonPointerLeave: M,
+    selectAndClose: O
+  };
+};
+export {
+  H as useActionsMenu
+};

package/dist/components/VirtualizedTable/components/Actions/components/PortalActions/hooks/use-menu-interactions/use-menu-interactions.js

@@ -0,0 +1,78 @@
+import "../../constants/index.js";
+import { useCallback as r, useEffect as y, useLayoutEffect as b, useRef as T } from "react";
+var _ = ({ isOpen: l, menuRef: d, openOnHover: c, triggerRef: f, setIsOpen: n }) => {
+  const u = T(void 0), g = T(null), h = T(!1), m = r(() => {
+    clearTimeout(u.current), n(!0);
+  }, [n]), o = r(() => {
+    clearTimeout(u.current), n(!1);
+  }, [n]), p = r(() => {
+    h.current = !0, o();
+  }, [o]), w = r(() => {
+    clearTimeout(u.current), u.current = setTimeout(() => {
+      n(!1);
+    }, 100);
+  }, [n]), L = r((t) => {
+    !c || h.current || t.pointerType === "touch" || m();
+  }, [m, c]), M = r((t) => {
+    !c || t.pointerType === "touch" || w();
+  }, [c, w]), v = r(() => {
+    h.current = !1;
+  }, []), C = r((t) => {
+    g.current = t.pointerType;
+  }, []), P = r(() => {
+    const t = g.current;
+    if (g.current = null, h.current = !1, clearTimeout(u.current), c && t && t !== "touch") {
+      n(!0);
+      return;
+    }
+    n((e) => !e);
+  }, [c, n]);
+  y(() => () => {
+    clearTimeout(u.current);
+  }, []);
+  const s = r(() => {
+    const t = f.current, e = d.current;
+    if (!t || !e) return;
+    const i = t.getBoundingClientRect(), a = i.bottom + 4 + e.offsetHeight <= window.innerHeight ? i.bottom + 4 : i.top - 4 - e.offsetHeight;
+    e.style.top = `${Math.round(Math.max(a, 4))}px`, e.style.left = `${Math.round(Math.max(i.right - e.offsetWidth, 4))}px`;
+  }, [d, f]);
+  return b(() => {
+    l && s();
+  }, [l, s]), y(() => {
+    if (!l) return;
+    const t = new AbortController(), e = (a) => {
+      const E = a.target;
+      f.current?.contains(E) || d.current?.contains(E) || o();
+    }, i = (a) => {
+      a.key === "Escape" && o();
+    };
+    return document.addEventListener("mousedown", e, { signal: t.signal }), document.addEventListener("keydown", i, { signal: t.signal }), document.addEventListener("scroll", s, {
+      signal: t.signal,
+      capture: !0,
+      passive: !0
+    }), window.addEventListener("resize", s, {
+      signal: t.signal,
+      passive: !0
+    }), window.addEventListener("blur", o, { signal: t.signal }), () => {
+      t.abort();
+    };
+  }, [
+    l,
+    d,
+    f,
+    o,
+    s
+  ]), {
+    closeMenu: o,
+    handlePointerEnter: L,
+    handlePointerLeave: M,
+    handleTriggerClick: P,
+    handleTriggerPointerDown: C,
+    handleButtonPointerLeave: v,
+    openMenu: m,
+    selectAndClose: p
+  };
+};
+export {
+  _ as useMenuInteractions
+};

package/dist/components/VirtualizedTable/components/Actions/components/PortalActions/hooks/use-menu-keyboard-navigation/use-menu-keyboard-navigation.js

@@ -0,0 +1,56 @@
+import { useCallback as n, useLayoutEffect as m, useRef as d } from "react";
+var b = ({ buttonRef: i, isOpen: a, menuRef: y, closeMenu: D, openMenu: o }) => {
+  const c = d(null), s = n(() => Array.from(y.current?.querySelectorAll('[role="menuitem"]') ?? []), [y]), r = n((e) => {
+    const t = s();
+    t.length !== 0 && t[(e + t.length) % t.length]?.focus();
+  }, [s]), l = n(() => {
+    D(), i.current?.focus();
+  }, [i, D]);
+  m(() => {
+    a && c.current && (r(c.current === "first" ? 0 : -1), c.current = null);
+  }, [a, r]);
+  const g = n((e) => {
+    if (!e.currentTarget.contains(e.target)) return;
+    const t = e.key === "Tab" && !e.shiftKey && a;
+    e.key === "ArrowDown" || t ? (e.preventDefault(), a ? r(0) : (c.current = "first", o())) : e.key === "ArrowUp" && (e.preventDefault(), a ? r(-1) : (c.current = "last", o()));
+  }, [
+    a,
+    r,
+    o
+  ]);
+  return {
+    handleMenuKeyDown: n((e) => {
+      const t = s(), u = t.indexOf(document.activeElement);
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), r(u + 1);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), r(u - 1);
+          break;
+        case "Home":
+          e.preventDefault(), r(0);
+          break;
+        case "End":
+          e.preventDefault(), r(-1);
+          break;
+        case "Tab": {
+          e.preventDefault();
+          const f = e.shiftKey ? u - 1 : u + 1;
+          f < 0 || f >= t.length ? l() : r(f);
+          break;
+        }
+        case "Escape":
+          e.preventDefault(), l();
+      }
+    }, [
+      s,
+      r,
+      l
+    ]),
+    handleTriggerKeyDown: g
+  };
+};
+export {
+  b as useMenuKeyboardNavigation
+};

package/dist/components/VirtualizedTable/components/Actions/components/PortalActions/hooks/use-row-highlight/use-row-highlight.js

@@ -0,0 +1,13 @@
+import { useEffect as o } from "react";
+var n = ({ isOpen: r, triggerRef: e }) => {
+  o(() => {
+    const t = e.current?.closest("tr");
+    if (!(!t || !r))
+      return t.setAttribute("data-actions-open", ""), () => {
+        t.removeAttribute("data-actions-open");
+      };
+  }, [r, e]);
+};
+export {
+  n as useRowHighlight
+};

package/dist/components/VirtualizedTable/components/Body/Body.js

@@ -1,25 +1,77 @@
-import { jsx as e } from "react/jsx-runtime";
-import { f as d } from "../../../../index-Dx2grAuN.js";
-import { useTableContext as m } from "../../contexts/table.hook.js";
-const p = () => {
-  const { table: r } = m();
-  return /* @__PURE__ */ e("tbody", { className: "text-slate-800 text-sm font-normal relative", children: r.getRowModel().rows.map(({ id: a, getVisibleCells: o }) => /* @__PURE__ */ e(
-    "tr",
-    {
-      className: "border border-x-transparent border-t-gray-200 border-b-transparent table w-full table-fixed",
-      children: o().map(({ id: l, column: t, getContext: s }) => /* @__PURE__ */ e(
-        "td",
-        {
-          className: "px-4 py-1 text-sm",
-          style: { width: t.getSize() },
-          children: d(t.columnDef.cell, s())
-        },
-        l
-      ))
-    },
-    a
-  )) });
+import { t as r } from "../../../../utils-DnIJruo0.js";
+import { HIDE_BELOW_CLASS as T } from "../../constants/responsive.js";
+import { useTableContext as q } from "../../contexts/table.hook.js";
+import { isPaginationBarVisible as G } from "../../utils/pagination.js";
+import { getPinnedCellProps as J } from "../../utils/pinned-columns/pinned-columns.js";
+import { n as K } from "../../../../table.provider-QUo2buYX.js";
+import { Skeleton as Q } from "../Skeleton/Skeleton.js";
+import { ExpandableRow as U } from "../ExpandableRow/ExpandableRow.js";
+import { Fragment as X } from "react";
+import { jsx as e, jsxs as Y } from "react/jsx-runtime";
+var se = ({ isLoading: y, showPagination: E, emptyState: C, errorState: n }) => {
+  const { table: d, pageSize: R, totalItems: D = -1 / 0, tableLoading: _, tableError: c, enableExpandedRow: B, classNameExpandedRow: L, classNameExpandedCell: j, classNameExpandedContent: z, enableHoverRow: f, classNameHoverRow: P, classNameActiveExpandedRow: V, renderExpandedRow: u, isBorderOnAdjacentCell: A, isExpandColumnVisible: H, pinnedWidths: O } = q();
+  if (y || _) return /* @__PURE__ */ e(Q, {
+    numberOfRows: R,
+    table: d
+  });
+  const a = d.getRowModel().rows ?? [], l = E && G(D), x = a.length === 0 && !!c && !!n, h = a.length > 0 ? null : c && n ? typeof n == "function" ? n(c) : n : C ?? null;
+  if (h) {
+    const s = d.getVisibleLeafColumns().length;
+    return /* @__PURE__ */ e("tbody", {
+      className: r("kvt-body", "text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
+      children: /* @__PURE__ */ e("tr", {
+        className: r(x ? "kvt-error-row" : "kvt-empty-row", "border-b", "border-b-gray-200", "dark:border-b-metal-700", "bg-transparent"),
+        "data-empty-row": !0,
+        "data-error-row": x ? !0 : void 0,
+        children: /* @__PURE__ */ e("td", {
+          colSpan: s,
+          className: r("p-0", "bg-white", "dark:bg-metal-900", "dark:border", "dark:border-metal-700", "rounded-b-lg"),
+          children: /* @__PURE__ */ e("div", {
+            className: "flex items-center justify-center",
+            children: h
+          })
+        })
+      })
+    });
+  }
+  return /* @__PURE__ */ e("tbody", {
+    className: r("kvt-body", "text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
+    children: a.map((s, b) => {
+      const { id: p, original: g, getVisibleCells: F } = s, { meta: i = {} } = g, m = F(), o = B && s.getIsExpanded(), I = !!i.expandedRow || !!u, k = m[0]?.column.id !== "__expand" || H ? 0 : A ? 1 : null;
+      return /* @__PURE__ */ Y(X, { children: [/* @__PURE__ */ e("tr", {
+        className: r("kvt-row", { "group/row": f }, "border-b", "border-b-gray-200", "dark:text-metal-50", "dark:border-b-metal-700", "bg-transparent", i.className),
+        "data-row-id": p,
+        ...i.attributes ?? {},
+        children: m.map(({ id: M, column: t, getContext: S }, w) => {
+          const W = typeof t.columnDef.meta?.className == "function" ? t.columnDef.meta?.className(g) : t.columnDef.meta?.className, { hideBelow: N } = t.columnDef.meta ?? {}, v = J(d, t, O);
+          return /* @__PURE__ */ e("td", {
+            style: v.style,
+            className: r("kvt-cell", "px-4", "py-1", "text-sm", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", "[tr[data-actions-open]_&]:bg-zinc-100", "dark:[tr[data-actions-open]_&]:bg-metal-800", {
+              "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": f,
+              [r("bg-zinc-100 dark:bg-metal-800", V)]: !!o
+            }, P, v.className, N && T[N], W, {
+              "rounded-bl-lg": b === a.length - 1 && k !== null && w === k && !l && !o,
+              "rounded-br-lg": b === a.length - 1 && w === m.length - 1 && !l && !o,
+              "dark:[tr:last-child_&]:border-b": !l
+            }),
+            "data-expanded": o ? !0 : void 0,
+            ...t.columnDef.meta?.attributes ?? {},
+            children: K(t.columnDef.cell, S())
+          }, M);
+        })
+      }), I && /* @__PURE__ */ e(U, {
+        classNameExpandedCell: j,
+        classNameExpandedContent: z,
+        classNameExpandedRow: L,
+        colSpan: m.length,
+        id: p,
+        isExpanded: !!o,
+        isLastRow: b === a.length - 1 && !l,
+        children: i.expandedRow ?? u?.(g)
+      })] }, p);
+    })
+  });
 };
 export {
-  p as Body
+  se as Body
 };

package/dist/components/VirtualizedTable/components/DotPaginate/DotPaginate.js

@@ -1,165 +1,103 @@
-import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import { t as p } from "../../../../utils-DnIJruo0.js";
+import { t as d } from "../../../../chevron-left-B1zWfqll.js";
+import { t as m } from "../../../../chevron-right-D4OkgIIT.js";
+import { useTableContext as h } from "../../contexts/table.hook.js";
 import { memo as u } from "react";
-import { cn as p } from "../../../../utils/index.js";
-import { C as g, a as d } from "../../../../chevron-right-VYBOBhRt.js";
-import { useTableContext as f } from "../../contexts/table.hook.js";
-const r = u(
-  ({
-    index: e,
-    currentPage: t,
-    handlePage: l
-  }) => /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
-    "button",
-    {
-      type: "button",
-      onClick: () => l(e),
-      className: p("px-2.5 py-1 rounded-lg text-blue-600 cursor-pointer", {
-        "bg-blue-600 text-white": e === t
-      }),
-      children: e + 1
-    }
-  ) }, e)
-);
-r.displayName = "PageButton";
-const o = u(({ keyValue: e }) => /* @__PURE__ */ i("li", { className: "px-2", children: /* @__PURE__ */ i("span", { className: "text-blue-600 select-none", children: "..." }) }, e));
-o.displayName = "Ellipsis";
-const a = u(
-  ({
-    direction: e,
-    onClick: t,
-    disabled: l
-  }) => /* @__PURE__ */ i("li", { className: "flex items-center justify-center", children: /* @__PURE__ */ i("button", { onClick: t, disabled: l, children: /* @__PURE__ */ i(
-    e === "left" ? g : d,
-    {
-      className: p("h-6 w-6 cursor-pointer", {
-        "text-blue-600": !l,
-        "text-slate-400 cursor-not-allowed": l
-      })
-    }
-  ) }) })
-);
-a.displayName = "NavigationButton";
-const k = () => {
-  const { totalPages: e, page: t, handlePage: l } = f();
-  return /* @__PURE__ */ m("ul", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ i(
-      a,
-      {
+import { jsx as i, jsxs as f } from "react/jsx-runtime";
+var l = u(({ index: t, currentPage: e, handlePage: s }) => /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i("button", {
+  type: "button",
+  onClick: () => s(t),
+  className: p("px-2.5 py-1 rounded-lg text-blue-600 cursor-pointer dark:text-aurora-500", { "bg-blue-600 text-white font-semibold dark:bg-aurora-500 dark:text-metal-800": t === e }),
+  children: t + 1
+}) }, t));
+l.displayName = "KonstructPageButton";
+var n = u(({ keyValue: t }) => /* @__PURE__ */ i("li", {
+  className: "px-2",
+  children: /* @__PURE__ */ i("span", {
+    className: "text-blue-600 select-none dark:text-aurora-500",
+    children: "..."
+  })
+}, t));
+n.displayName = "KonstructEllipsis";
+var o = u(({ direction: t, disabled: e, onClick: s }) => /* @__PURE__ */ i("li", {
+  className: "flex items-center justify-center",
+  children: /* @__PURE__ */ i("button", {
+    onClick: s,
+    disabled: e,
+    children: /* @__PURE__ */ i(t === "left" ? d : m, { className: p("h-6 w-6 cursor-pointer", {
+      "text-blue-600 dark:text-aurora-500": !e,
+      "text-slate-400 cursor-not-allowed": e
+    }) })
+  })
+}));
+o.displayName = "KonstructNavigationButton";
+var v = () => {
+  const { totalPages: t, page: e, handlePage: s } = h();
+  return /* @__PURE__ */ f("ul", {
+    className: "flex items-center gap-2",
+    children: [
+      /* @__PURE__ */ i(o, {
         direction: "left",
-        onClick: () => l(t - 1),
-        disabled: t === 0
-      }
-    ),
-    (() => {
-      if (e <= 5)
-        return Array.from({ length: e }, (s, c) => /* @__PURE__ */ i(
-          r,
-          {
-            index: c,
-            currentPage: t,
-            handlePage: l
-          },
-          c
-        ));
-      const n = [];
-      if (t < 3) {
-        for (let s = 0; s < 3; s++)
-          n.push(
-            /* @__PURE__ */ i(
-              r,
-              {
-                index: s,
-                currentPage: t,
-                handlePage: l
-              },
-              s
-            )
-          );
-        n.push(/* @__PURE__ */ i(o, { keyValue: "ellipsis" }, "ellipsis"));
-        for (let s = e - 2; s < e; s++)
-          n.push(
-            /* @__PURE__ */ i(
-              r,
-              {
-                index: s,
-                currentPage: t,
-                handlePage: l
-              },
-              s
-            )
-          );
-      } else if (t >= e - 5) {
-        n.push(
-          /* @__PURE__ */ i(
-            r,
-            {
-              index: 0,
-              currentPage: t,
-              handlePage: l
-            },
-            0
-          )
-        ), e > 6 && n.push(/* @__PURE__ */ i(o, { keyValue: "ellipsis" }, "ellipsis"));
-        for (let s = Math.max(1, e - 5); s < e; s++)
-          n.push(
-            /* @__PURE__ */ i(
-              r,
-              {
-                index: s,
-                currentPage: t,
-                handlePage: l
-              },
-              s
-            )
-          );
-      } else {
-        n.push(
-          /* @__PURE__ */ i(
-            r,
-            {
-              index: 0,
-              currentPage: t,
-              handlePage: l
-            },
-            0
-          )
-        ), t > 3 && n.push(/* @__PURE__ */ i(o, { keyValue: "ellipsis1" }, "ellipsis1"));
-        for (let s = t - 1; s <= t + 1; s++)
-          s > 0 && s < e - 1 && n.push(
-            /* @__PURE__ */ i(
-              r,
-              {
-                index: s,
-                currentPage: t,
-                handlePage: l
-              },
-              s
-            )
-          );
-        t < e - 4 && n.push(/* @__PURE__ */ i(o, { keyValue: "ellipsis2" }, "ellipsis2")), n.push(
-          /* @__PURE__ */ i(
-            r,
-            {
-              index: e - 1,
-              currentPage: t,
-              handlePage: l
-            },
-            e - 1
-          )
-        );
-      }
-      return n;
-    })(),
-    /* @__PURE__ */ i(
-      a,
-      {
+        onClick: () => s(e - 1),
+        disabled: e === 0
+      }),
+      (() => {
+        if (t <= 5) return Array.from({ length: t }, (r, c) => /* @__PURE__ */ i(l, {
+          index: c,
+          currentPage: e,
+          handlePage: s
+        }, c));
+        const a = [];
+        if (e < 3) {
+          for (let r = 0; r < 3; r++) a.push(/* @__PURE__ */ i(l, {
+            index: r,
+            currentPage: e,
+            handlePage: s
+          }, r));
+          a.push(/* @__PURE__ */ i(n, { keyValue: "ellipsis" }, "ellipsis"));
+          for (let r = t - 2; r < t; r++) a.push(/* @__PURE__ */ i(l, {
+            index: r,
+            currentPage: e,
+            handlePage: s
+          }, r));
+        } else if (e >= t - 5) {
+          a.push(/* @__PURE__ */ i(l, {
+            index: 0,
+            currentPage: e,
+            handlePage: s
+          }, 0)), t > 6 && a.push(/* @__PURE__ */ i(n, { keyValue: "ellipsis" }, "ellipsis"));
+          for (let r = Math.max(1, t - 5); r < t; r++) a.push(/* @__PURE__ */ i(l, {
+            index: r,
+            currentPage: e,
+            handlePage: s
+          }, r));
+        } else {
+          a.push(/* @__PURE__ */ i(l, {
+            index: 0,
+            currentPage: e,
+            handlePage: s
+          }, 0)), e > 3 && a.push(/* @__PURE__ */ i(n, { keyValue: "ellipsis1" }, "ellipsis1"));
+          for (let r = e - 1; r <= e + 1; r++) r > 0 && r < t - 1 && a.push(/* @__PURE__ */ i(l, {
+            index: r,
+            currentPage: e,
+            handlePage: s
+          }, r));
+          e < t - 4 && a.push(/* @__PURE__ */ i(n, { keyValue: "ellipsis2" }, "ellipsis2")), a.push(/* @__PURE__ */ i(l, {
+            index: t - 1,
+            currentPage: e,
+            handlePage: s
+          }, t - 1));
+        }
+        return a;
+      })(),
+      /* @__PURE__ */ i(o, {
         direction: "right",
-        onClick: () => l(t + 1),
-        disabled: t >= e - 1
-      }
-    )
-  ] });
+        onClick: () => s(e + 1),
+        disabled: e >= t - 1
+      })
+    ]
+  });
 };
 export {
-  k as DotPaginate
+  v as DotPaginate
 };