@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/datatable/components/DataTable/TableHeader/index.mjs

@@ -0,0 +1,251 @@
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import { memo as se, useState as m, useMemo as B, Children as ae, useEffect as S, useRef as ue } from "react";
+import { useDndContext as ce } from "@dnd-kit/core";
+import { useSortable as me } from "@dnd-kit/sortable";
+import { CSS as de } from "@dnd-kit/utilities";
+import { flexRender as fe } from "@tanstack/react-table";
+import { IGNORE_REPORT_COLUMNS as pe } from "../../../common/constants.mjs";
+import { useDataTableContext as be } from "../../../context/index.mjs";
+import { cn as a } from "../../../common/helpers/cn.mjs";
+import { ExpandedColumn as ge } from "../../../common/helpers/ExpandedColumn.mjs";
+import { RowActionsColumn as ve } from "../../../common/helpers/RowActionsColumn.mjs";
+import { RowSelectionColumn as Ce } from "../../../common/helpers/RowSelectionColumn.mjs";
+import { DragIndicator as we } from "../../Assets/DragIndicator.mjs";
+import { useComponentEventListener as he } from "../../../hooks/useComponentEventListener.mjs";
+import { useGetCommonPinningStyles as xe } from "../../../hooks/useGetCommonPinningStyles.mjs";
+import U from "./ColumnPin/index.mjs";
+import De from "./ColumnSearcher/index.mjs";
+import F from "./ColumnSort/index.mjs";
+import Re from "./ColumnVisibility/index.mjs";
+const ye = ({
+  header: e,
+  index: u,
+  headerOptions: l,
+  disabled: G,
+  isHeaderFixed: V,
+  style: W,
+  tableId: z
+}) => {
+  const { element: d } = he(
+    `${z}-container`
+  ), r = e.column.id ? `${z}-${e.column.id}-${u}` : u, { actions: H, tableState: q } = be() || {}, { pinStyles: f, isPinned: p } = xe(e.column), { active: J } = ce(), { attributes: K, listeners: Q, setNodeRef: X, transform: Y } = me({
+    id: e.column.id
+  }), n = J?.id === e.column.id, [c, v] = m(!1), [Z, N] = m(!1), [O, $] = m(!1), [i, C] = m(!1), [E, P] = m({
+    hover: !1,
+    index: u
+  }), s = (t) => {
+    if (G) return !1;
+    switch (t) {
+      case "drag":
+        return l?.enableDragColumns ?? !0;
+      case "sort":
+        return l?.enableSortColumns ?? !0;
+      case "pin-left":
+        return l?.enablePinLeftColumns ?? !0;
+      case "pin-right":
+        return l?.enablePinRightColumns ?? !1;
+      case "visibility":
+        return l?.enableHideColumns ?? !1;
+      case "resize":
+        return l?.enableResizeColumns ?? !0;
+      default:
+        return !0;
+    }
+  }, ee = s("drag"), M = s("sort"), w = s("pin-left"), h = s("pin-right"), I = s("visibility"), L = s("resize"), _ = e.column.columnDef.enableDraggable, b = e.column.columnDef?.id === ge.id, x = e.column.columnDef?.id === Ce.id, g = e.column.id === ve.id, T = !n || c, te = !g && !n && !b, D = _ && ee && !b && !x && !g, ne = () => n ? "bg-table-dragged-bg-important" : V ? "bg-table-header-pinned" : p ? g ? "bg-transparent" : "bg-table-header-pinned" : "bg-table-header-bg", R = O || n, oe = {
+    transform: de.Translate.toString(Y)
+  }, j = B(() => {
+    const t = c || i;
+    return [
+      // sort icon
+      M && e.column.getCanSort() && (e.column.getIsSorted() ? /* @__PURE__ */ o(F, { header: e, isPinned: !0 }, `${r}-sort`) : t && /* @__PURE__ */ o(F, { header: e }, `${r}-sort`)),
+      // visibility icon
+      I && e.column.getCanHide() && t && /* @__PURE__ */ o(Re, { header: e }, `${r}-visibility`),
+      // TODO: Search icon
+      e.column.getCanFilter() && t && /* @__PURE__ */ o(
+        De,
+        {
+          column: e.column
+        },
+        `${r}-search`
+      ),
+      // pin icon
+      e.column.getCanPin() && (e.column.getIsPinned() ? /* @__PURE__ */ o(
+        U,
+        {
+          enablePinLeftColumns: w,
+          enablePinRightColumns: h,
+          header: e
+        },
+        `${r}-pin`
+      ) : t && /* @__PURE__ */ o(
+        U,
+        {
+          enablePinLeftColumns: w,
+          enablePinRightColumns: h,
+          header: e
+        },
+        `${r}-pin`
+      ))
+    ].filter(Boolean);
+  }, [
+    c,
+    i,
+    M,
+    e,
+    I,
+    w,
+    h,
+    r
+  ]), re = ae.count(j), A = B(() => {
+    const t = f?.width;
+    return Number.isNaN(t) ? 0 : t;
+  }, [f?.width]);
+  S(() => {
+    d && (n ? d.style.overflow = "hidden" : d.style.overflow = "auto");
+  }, [n, d]), S(() => {
+    const t = () => {
+      v(!1);
+    };
+    return document.addEventListener("mouseup", t), () => {
+      document.removeEventListener("mouseup", t);
+    };
+  }, []);
+  const k = ue(null);
+  if (S(() => {
+    if (!pe.includes(e.column.columnDef.id)) {
+      const t = e.column.getIndex(), ie = k?.current?.textContent?.trim() || e.column.columnDef?.accessorHeaderFn?.() || (typeof e.column.columnDef?.header == "string" ? e.column.columnDef?.header : void 0) || e.column.columnDef?.id || "";
+      H?.onSetReportHeader(ie, t);
+    }
+  }, [
+    H?.onSetReportHeader,
+    e.column.columnDef?.header,
+    q?.columnVisibility
+  ]), A === 0) return null;
+  const le = (i || R) && D && !p && _ && !c;
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      role: "rowheader",
+      "data-testid": "table-rowheader",
+      id: e.column.id,
+      ref: X,
+      style: {
+        ...W,
+        ...oe,
+        ...f,
+        width: A,
+        minWidth: f?.minWidth,
+        zIndex: n ? 500 : g ? 0 : R || p ? 10 : 0
+      },
+      className: a([
+        "min-w-0 relative overflow-hidden whitespace-nowrap text-ellipsis p-0 h-full transition-[background-color] duration-200 ease-in-out",
+        ne(),
+        n && "border border-dashed border-table-divider",
+        p && "[&_.table-resizer-wrapper]:-right-[5px]"
+      ]),
+      onDoubleClick: () => e.column.resetSize(),
+      onMouseEnter: () => C(!0),
+      onMouseLeave: () => C(!1),
+      onBlur: () => C(!1),
+      children: [
+        /* @__PURE__ */ y(
+          "div",
+          {
+            "data-testid": "table-rowheader-container",
+            className: a([
+              b || x ? "flex items-center! justify-center w-full! h-full" : "flex items-center justify-start bg-transparent w-full max-w-full p-0 h-full box-border",
+              n && "opacity-80"
+            ]),
+            children: [
+              /* @__PURE__ */ o("div", { className: "w-3 h-full" }),
+              /* @__PURE__ */ y(
+                "div",
+                {
+                  "data-testid": "table-rowheader-content",
+                  ref: k,
+                  className: a([
+                    "font-semibold overflow-hidden text-ellipsis whitespace-nowrap items-center text-table-secondary-text",
+                    n && "transition-all duration-200 ease-in-out [&_svg]:transition-all [&_svg]:duration-200 [&_svg]:ease-in-out",
+                    n ? "pl-[5px]" : "pl-0"
+                  ]),
+                  style: {
+                    // 28px width button and 2px gap and 24px of padding
+                    width: `calc(100% - ${(T ? re * 38 : 0) + 24}px)`
+                  },
+                  children: [
+                    le && /* @__PURE__ */ o(
+                      "span",
+                      {
+                        className: a([
+                          (i || n) && "absolute left-0 top-1/2 -translate-x-0.5 -translate-y-1/2",
+                          "cursor-pointer transition-all duration-200 ease-in-out [&_path]:transition-[fill] [&_path]:duration-200 [&_path]:ease-in-out animate-fade-in flex items-center",
+                          n ? "pl-[5px]" : "pl-0"
+                        ]),
+                        onMouseEnter: () => {
+                          $(!0), D && i && P({ hover: !0, index: u });
+                        },
+                        onMouseLeave: () => {
+                          $(!1), D && i && P({ hover: !1, index: u });
+                        },
+                        ...K,
+                        ...Q,
+                        children: /* @__PURE__ */ o(
+                          we,
+                          {
+                            size: 16,
+                            direction: "vertical",
+                            color: R ? "var(--color-table-primary-text)" : "var(--color-table-disabled)"
+                          }
+                        )
+                      }
+                    ),
+                    !e.isPlaceholder && fe(
+                      e.column.columnDef.header,
+                      e.getContext()
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ o("div", { className: "w-3 h-full" })
+            ]
+          }
+        ),
+        T && /* @__PURE__ */ o(
+          "div",
+          {
+            className: "absolute flex items-center justify-end bg-transparent w-fit p-0 pr-4 h-full right-2 top-0 m-0 gap-0.5",
+            children: j
+          },
+          `headerRightContent-${r}`
+        ),
+        te && /* @__PURE__ */ o(
+          "div",
+          {
+            onMouseEnter: () => N(!0),
+            onMouseLeave: () => N(!1),
+            onMouseUp: () => v(!1),
+            onMouseDown: (t) => (v(!0), L && !E.hover ? e.getResizeHandler()(t) : void 0),
+            onTouchStart: L && !E.hover ? e.getResizeHandler() : void 0,
+            className: a([
+              "table-resizer-wrapper rounded-[5px] h-full w-3 right-0 top-0 absolute flex justify-center items-center select-none touch-none z-100",
+              e.column.getCanResize() && "cursor-col-resize"
+            ]),
+            children: /* @__PURE__ */ o(
+              "div",
+              {
+                className: a([
+                  "table-resizer-line rounded-[5px] transition-[background-color,height,width] duration-150 ease-in-out",
+                  Z || c ? "w-[3px] h-5 bg-table-primary-text" : "w-[2px] h-[14px] bg-table-divider"
+                ])
+              }
+            )
+          }
+        )
+      ]
+    },
+    `header-${r}`
+  );
+}, Ve = se(ye);
+export {
+  Ve as default
+};

package/datatable/components/DataTable/TableRow/index.mjs

@@ -0,0 +1,79 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { useSortable as T } from "@dnd-kit/sortable";
+import { CSS as z } from "@dnd-kit/utilities";
+import { cn as A } from "../../../common/helpers/cn.mjs";
+import I from "../TableCell/index.mjs";
+const L = ({
+  tableId: b,
+  table: m,
+  row: r,
+  index: t,
+  style: a,
+  isColumn: p,
+  rowActions: f,
+  onClick: g,
+  forceShowMenuActions: h,
+  rowSelection: c,
+  smallAnatomy: v
+}) => {
+  const [x, u] = d(!1), [e, o] = d({
+    hover: !1,
+    index: 0
+  }), { transform: w, transition: S, setNodeRef: y, isDragging: s } = T({
+    id: t.toString()
+  }), R = z.Transform.toString(w), n = r.getIsExpanded(), C = () => r.getIsExpanded() ? e.hover ? "bg-table-row-hover" : "bg-table-row-expanded-bg" : s ? "bg-table-dragged-bg" : e.hover ? "bg-table-row-hover" : "bg-table-row-bg", E = {
+    transform: R,
+    transition: S
+  };
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      role: "row",
+      "data-testid": "table-row",
+      ref: p ? void 0 : y,
+      onClick: g,
+      onMouseEnter: () => {
+        o({ hover: !0, index: t });
+      },
+      onMouseLeave: () => o({ hover: !1, index: t }),
+      className: A(
+        "text-table-primary-text! relative flex min-w-(--table-width) w-fit transition-all duration-200 ease-in-out",
+        v ? "h-10 max-h-10 min-h-10" : "h-[52px] max-h-[52px] min-h-[52px]",
+        C(),
+        n && "data-table-expanded-principal-row",
+        e.hover && "table-row-hover-shadow",
+        !n && "border-b border-table-divider",
+        s && "opacity-80",
+        x ? "z-11" : e.hover ? "z-10" : "z-0"
+      ),
+      style: {
+        ...a?.row,
+        ...E,
+        color: "var(--color-table-primary-text)"
+      },
+      children: r.getVisibleCells().map((i) => /* @__PURE__ */ l(
+        I,
+        {
+          tableId: b,
+          table: m,
+          cell: i,
+          row: r,
+          hoverRow: e,
+          setHoverRow: o,
+          setOpenActions: u,
+          style: {
+            ...a?.cell
+          },
+          rowActions: f,
+          forceShowMenuActions: h,
+          rowSelection: c
+        },
+        i.id
+      ))
+    }
+  );
+};
+export {
+  L as default
+};

package/datatable/components/DataTable/TableWrapper/index.mjs

@@ -0,0 +1,150 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { Spinner as j } from "../../Common/Spinner.mjs";
+import { cn as i } from "../../../common/helpers/cn.mjs";
+import { useDataTableContext as S } from "../../../context/index.mjs";
+import { ColumnsVisibilityManager as m } from "../ColumnsVisibilityManager.mjs";
+import { Input as B } from "../../../../components/inputs/input.mjs";
+import { SearchIcon as F } from "../../../../components/icons/search.mjs";
+const R = ({
+  tableId: d,
+  title: a,
+  border: f,
+  isFetching: g,
+  headerContainer: s,
+  children: w,
+  isEmpty: b,
+  sx: h,
+  containerWidth: v,
+  mode: n
+}) => {
+  const c = S(), l = !!c?.config?.enableHideColumns, p = c?.config?.searchableColumns, t = c?.config?.rightActions, r = !!(p && p.length > 0), y = c?.globalFilter ?? "", u = c?.setGlobalFilter, x = !!(f === !0 || f === void 0 && (a || s || l || r || t)), N = !!(f || a || s || l || r || t), k = !!(a || s || l || r || t), C = !!(l || r || t);
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      id: `${d}-wrapper`,
+      "data-testid": "table-wrapper",
+      "data-theme": n,
+      className: i([
+        "flex flex-col w-full h-fit z-0 relative overflow-hidden",
+        N && "rounded-xl",
+        x && "border border-table-divider shadow-lg",
+        n && n === "dark" && "dark",
+        n && n === "light" && "light"
+      ]),
+      style: {
+        backgroundColor: b ? void 0 : "var(--color-table-default-bg)",
+        border: x ? "1px solid var(--color-table-divider)" : "none",
+        "--table-width": `${v ?? 0}px`,
+        ...h?.wrapper
+      },
+      children: /* @__PURE__ */ o(
+        "div",
+        {
+          id: `${d}-wrapper-container`,
+          "data-testid": "table-wrapper-container",
+          className: i(
+            "flex flex-col w-full h-fit z-0 relative overflow-hidden"
+          ),
+          style: {
+            backgroundColor: b ? void 0 : "var(--color-table-box-bg)",
+            ...h?.wrapperContainer
+          },
+          children: [
+            g && /* @__PURE__ */ e(
+              "div",
+              {
+                id: `${d}-fetching-container`,
+                "data-testid": "table-fetching-container",
+                className: "flex justify-center items-center absolute w-full h-full z-100 cursor-not-allowed",
+                style: {
+                  backgroundColor: "var(--color-table-default-bg)",
+                  opacity: 0.5
+                },
+                children: /* @__PURE__ */ e(j, { size: "lg", color: "primary" })
+              }
+            ),
+            k && /* @__PURE__ */ o(
+              "div",
+              {
+                className: i(
+                  "flex flex-col items-center w-full z-2 h-fit",
+                  "border-b! border-table-divider!"
+                ),
+                style: {
+                  ...h?.container
+                },
+                "data-testid": "table-header-container",
+                children: [
+                  a && /* @__PURE__ */ o(
+                    "div",
+                    {
+                      className: i(
+                        "flex justify-between items-center w-full z-0 text-table-primary-text! p-4"
+                      ),
+                      "data-testid": "table-title",
+                      children: [
+                        /* @__PURE__ */ e("span", { className: "font-sans text-table-primary-text! text-lg font-bold leading-6 text-left block", children: a }),
+                        !r && /* @__PURE__ */ o("div", { className: "flex flex-row items-center gap-3 shrink-0", children: [
+                          t,
+                          l && /* @__PURE__ */ e(m, {})
+                        ] })
+                      ]
+                    }
+                  ),
+                  !a && !r && /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: i(
+                        "flex justify-end items-center w-full z-0 text-table-primary-text! p-4"
+                      ),
+                      children: /* @__PURE__ */ o("div", { className: "flex flex-row items-center gap-3 shrink-0", children: [
+                        t,
+                        l && /* @__PURE__ */ e(m, {})
+                      ] })
+                    }
+                  ),
+                  C && /* @__PURE__ */ o(
+                    "div",
+                    {
+                      className: i(
+                        "p-4 flex flex-row w-full justify-between items-center gap-4",
+                        a && "pt-0!",
+                        !r && "hidden!"
+                      ),
+                      children: [
+                        r && u && /* @__PURE__ */ e("div", { className: "w-[240px]", children: /* @__PURE__ */ e(
+                          B,
+                          {
+                            type: "text",
+                            placeholder: "Search...",
+                            value: y,
+                            onChange: (z) => u(z.target.value),
+                            icon: /* @__PURE__ */ e(F, { className: "w-4 h-4 text-table-secondary-text" }),
+                            size: "sm",
+                            variant: "ghost",
+                            color: "primary",
+                            className: "w-full",
+                            inputClassName: "border border-border!"
+                          }
+                        ) }),
+                        (l || t) && /* @__PURE__ */ o("div", { className: "flex flex-row items-center gap-3 shrink-0", children: [
+                          t,
+                          l && /* @__PURE__ */ e(m, {})
+                        ] })
+                      ]
+                    }
+                  ),
+                  s && /* @__PURE__ */ e("div", { className: i("flex-1 w-full h-fit"), children: s })
+                ]
+              }
+            ),
+            w
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  R as default
+};

package/datatable/components/Footer/index.mjs

@@ -0,0 +1,51 @@
+import { jsx as l } from "react/jsx-runtime";
+import { flexRender as c } from "@tanstack/react-table";
+import { cn as i } from "../../common/helpers/cn.mjs";
+import { useGetCommonPinningStyles as u } from "../../hooks/useGetCommonPinningStyles.mjs";
+const x = ({ className: n, sx: o, table: r }) => /* @__PURE__ */ l(
+  "div",
+  {
+    role: "rowgroup",
+    "data-testid": "table-footer",
+    className: i(["max-h-[48px]", n]),
+    style: o,
+    children: r.getFooterGroups().map((t) => /* @__PURE__ */ l(
+      "div",
+      {
+        role: "row",
+        className: "flex items-center h-full max-h-full min-h-full bg-table-header-bg",
+        children: t.headers.filter((e) => e.column.getIsVisible()).map((e, s) => {
+          const { pinStyles: a, isPinned: m } = u(
+            e.column
+          ), d = e.getSize();
+          return /* @__PURE__ */ l(
+            "div",
+            {
+              role: "cell",
+              className: i([
+                "min-w-0 relative overflow-hidden whitespace-nowrap text-ellipsis p-0 h-full transition-[background-color] duration-200 ease-in-out",
+                m ? "bg-table-header-pinned" : "bg-table-header-bg",
+                s !== t.headers?.length - 1 && "border-r  border-table-divider"
+              ]),
+              style: {
+                ...a,
+                width: d,
+                minWidth: e.column.columnDef.minSize,
+                maxWidth: e.column.columnDef.maxSize
+              },
+              children: /* @__PURE__ */ l("div", { className: "flex items-center justify-start bg-transparent w-full max-w-full p-0 h-full box-border px-3", children: /* @__PURE__ */ l("div", { className: "font-semibold overflow-hidden text-ellipsis whitespace-nowrap items-center text-table-secondary-text", children: e.isPlaceholder ? null : c(
+                e.column.columnDef.footer,
+                e.getContext()
+              ) }) })
+            },
+            e.id
+          );
+        })
+      },
+      t.id
+    ))
+  }
+);
+export {
+  x as default
+};

package/datatable/components/ManualPagination/index.mjs

@@ -0,0 +1,121 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { ArrowIndicator as b } from "../Assets/ArrowIndicator.mjs";
+import { ArrowPaginationIndicator as u } from "../Assets/ArrowPaginationIndicator.mjs";
+import { IconButton as l } from "../Common/IconButton/index.mjs";
+const R = ({
+  manualPagination: c,
+  rowsInfo: w = !1,
+  hideRecordsSelector: h,
+  style: v
+}) => {
+  const d = c?.pagination, i = c?.setPagination, a = d?.pageIndex || 0, t = d?.pageSize || 5, r = c?.rowCount || 0, p = Math.ceil(r / t) - 1, x = a === 0, o = a === p || !r, g = t * a + 1, N = t * (a + 1), f = t * a + 1, m = [5, 10, 20, 30, 40, 50], k = m?.includes(t) ? m : [t, ...m].sort((n, y) => n - y);
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: "flex flex-row items-center justify-between w-full p-4 m-0 h-[50px] box-border z-0 max-md:flex-col-reverse max-md:items-center max-md:gap-0 max-md:h-fit",
+      style: v,
+      children: [
+        /* @__PURE__ */ e("div", { className: "flex items-center justify-start w-fit gap-[5px]", children: w && /* @__PURE__ */ e("p", { className: "m-0 font-sans font-normal leading-5 text-xs tracking-[0.025rem] normal-case text-table-primary-text", children: `Showing ${o ? f : g} of ${r} Rows` }) }),
+        /* @__PURE__ */ s("div", { className: "flex items-center justify-end w-fit gap-4 max-md:w-full max-md:gap-2 max-md:flex-row max-md:justify-center max-md:flex-wrap", children: [
+          !h && /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e("p", { className: "m-0 font-sans font-normal leading-5 text-xs tracking-[0.025rem] normal-case text-table-primary-text whitespace-nowrap", children: "per page:" }),
+            /* @__PURE__ */ e(
+              "select",
+              {
+                value: t,
+                onChange: (n) => {
+                  i?.({
+                    pageIndex: 0,
+                    pageSize: Number(n.target.value)
+                  });
+                },
+                className: "text-table-primary-text text-xs bg-transparent border-none outline-none cursor-pointer appearance-none pr-6 pl-2 py-1 rounded hover:bg-table-row-hover transition-colors duration-200",
+                style: {
+                  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b3b3b3' d='M6 9L1 4h10z'/%3E%3C/svg%3E")`,
+                  backgroundRepeat: "no-repeat",
+                  backgroundPosition: "right 0.25rem center",
+                  backgroundSize: "0.75rem"
+                },
+                children: k.map((n) => /* @__PURE__ */ e(
+                  "option",
+                  {
+                    value: n,
+                    className: "text-table-primary-text bg-table-row-expanded-bg",
+                    children: n
+                  },
+                  n
+                ))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("div", { className: "flex items-center gap-2 max-md:mb-2.5", children: /* @__PURE__ */ e("p", { className: "m-0 font-sans font-normal leading-5 text-xs tracking-[0.025rem] normal-case text-table-primary-text whitespace-nowrap", children: `${o ? f : g}-${o ? r : N} of ${r} Rows` }) }),
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ e(
+              l,
+              {
+                size: "xl",
+                isPinned: !0,
+                onClick: () => {
+                  i?.({
+                    pageIndex: 0,
+                    pageSize: d?.pageSize || 0
+                  });
+                },
+                disabled: x,
+                icon: /* @__PURE__ */ e(u, { direction: "first" })
+              }
+            ),
+            /* @__PURE__ */ e(
+              l,
+              {
+                size: "xl",
+                isPinned: !0,
+                onClick: () => {
+                  i?.({
+                    pageIndex: a - 1,
+                    pageSize: t
+                  });
+                },
+                disabled: x,
+                icon: /* @__PURE__ */ e(b, { direction: "left" })
+              }
+            ),
+            /* @__PURE__ */ e(
+              l,
+              {
+                size: "xl",
+                isPinned: !0,
+                onClick: () => {
+                  i?.({
+                    pageIndex: a + 1,
+                    pageSize: t
+                  });
+                },
+                disabled: o,
+                icon: /* @__PURE__ */ e(b, { direction: "right" })
+              }
+            ),
+            /* @__PURE__ */ e(
+              l,
+              {
+                size: "xl",
+                isPinned: !0,
+                onClick: () => {
+                  i?.({
+                    pageIndex: p,
+                    pageSize: t
+                  });
+                },
+                disabled: o,
+                icon: /* @__PURE__ */ e(u, { direction: "last" })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  R as default
+};