@ztwoint/z-ui 0.1.106 → 0.1.108

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

@@ -0,0 +1,4 @@
+export * from './z2-table';
+export * from './z2-table-context';
+export * from './z2-table-pagination';
+export * from './z2-column-header';

package/dist/components/dynamic-table/util/command.d.ts

@@ -0,0 +1,18 @@
+import { Command as CommandPrimitive } from 'cmdk';
+import { Z2Dialog } from '../../dialog/dialog';
+import * as React from 'react';
+declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
+declare function CommandDialog({ title, description, children, className, ...props }: React.ComponentProps<typeof Z2Dialog> & {
+    title?: string;
+    description?: string;
+    className?: string;
+    showCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): import("react/jsx-runtime").JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/components/dynamic-table/util/seperator.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Separator };

package/dist/components/dynamic-table/z2-column-header.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { Column } from '@tanstack/react-table';
+interface Z2TableColumnHeaderProps<TData, TValue> extends HTMLAttributes<HTMLDivElement> {
+    column: Column<TData, TValue>;
+    title?: string;
+    icon?: ReactNode;
+    pinnable?: boolean;
+    filter?: ReactNode;
+    visibility?: boolean;
+}
+declare function Z2TableColumnHeader<TData, TValue>({ column, title, icon, className, filter, visibility, }: Z2TableColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export { Z2TableColumnHeader, type Z2TableColumnHeaderProps };

package/dist/components/dynamic-table/z2-column-header.js

@@ -0,0 +1,186 @@
+import { jsx as t, jsxs as r, Fragment as b } from "react/jsx-runtime";
+import "react";
+import { cn as R } from "../../lib/utils.js";
+import { Button as V } from "../button/button.js";
+import { useZ2Table as j } from "./z2-table-context.js";
+import { Z2DropdownMenu as U, Z2DropdownMenuTrigger as B, Z2DropdownMenuContent as F, Z2DropdownMenuLabel as H, Z2DropdownMenuSeparator as f, Z2DropdownMenuItem as g, Z2DropdownMenuSub as _, Z2DropdownMenuSubTrigger as $, Z2DropdownMenuPortal as q, Z2DropdownMenuSubContent as E, Z2DropdownMenuCheckboxItem as G } from "../dropdown-menu/z2-dropdown-menu.js";
+import { ArrowUp as I, Check as C, ArrowDown as L, ArrowLeftToLine as J, ArrowRightToLine as K, ArrowLeft as Q, ArrowRight as W, Settings2 as X, ChevronsUpDown as Y, PinOff as ee } from "lucide-react";
+function le({
+  column: e,
+  title: p = "",
+  icon: m,
+  className: k,
+  filter: d,
+  visibility: h = !1
+}) {
+  var M, z, y, P;
+  const { isLoading: Z, table: u, props: o, recordCount: v } = j(), S = (a) => {
+    const s = [...u.getState().columnOrder], n = s.indexOf(e.id);
+    if (a === "left" && n > 0) {
+      const i = [...s], [c] = i.splice(n, 1);
+      i.splice(n - 1, 0, c), u.setColumnOrder(i);
+    }
+    if (a === "right" && n < s.length - 1) {
+      const i = [...s], [c] = i.splice(n, 1);
+      i.splice(n + 1, 0, c), u.setColumnOrder(i);
+    }
+  }, N = (a) => {
+    const s = u.getState().columnOrder, n = s.indexOf(e.id);
+    return a === "left" ? n > 0 : n < s.length - 1;
+  }, O = () => /* @__PURE__ */ r(
+    "div",
+    {
+      className: R(
+        "inline-flex h-full items-center gap-1.5 [&_svg]:size-3.5 [&_svg]:opacity-60",
+        k
+      ),
+      children: [
+        m && m,
+        p
+      ]
+    }
+  ), D = () => /* @__PURE__ */ r(
+    "button",
+    {
+      className: "p-0 h-fit w-full flex justify-between cursor-pointer",
+      disabled: Z || v === 0,
+      onClick: () => {
+        const a = e.getIsSorted();
+        a === "asc" ? e.toggleSorting(!0) : a === "desc" ? e.clearSorting() : e.toggleSorting(!1);
+      },
+      children: [
+        m && /* @__PURE__ */ t("span", { className: "size-3.5", children: m }),
+        p && /* @__PURE__ */ t("span", { className: "grow text-left", children: p }),
+        e.getCanSort() && /* @__PURE__ */ t("span", { className: "size-3.5", children: e.getIsSorted() === "desc" ? /* @__PURE__ */ t(L, { className: "size-[0.7rem]! mt-px ml-auto" }) : e.getIsSorted() === "asc" ? /* @__PURE__ */ t(I, { className: "size-[0.7rem]! mt-px ml-auto" }) : /* @__PURE__ */ t(Y, { className: "size-[0.7rem]! mt-px ml-auto" }) })
+      ]
+    }
+  ), T = () => /* @__PURE__ */ t(
+    V,
+    {
+      size: "small",
+      variant: "ghost",
+      className: "-me-1 size-7 rounded-md",
+      onClick: () => e.pin(!1),
+      "aria-label": `Unpin ${p} column`,
+      title: `Unpin ${p} column`,
+      children: /* @__PURE__ */ t(ee, { className: "size-3.5! opacity-50!", "aria-hidden": "true" })
+    }
+  ), A = () => {
+    var a, s, n, i, c;
+    return /* @__PURE__ */ r("div", { className: "flex items-center h-full gap-1.5 justify-between", children: [
+      /* @__PURE__ */ r(U, { children: [
+        /* @__PURE__ */ t(B, { asChild: !0, children: D() }),
+        /* @__PURE__ */ r(F, { className: "w-40", align: "start", children: [
+          d && /* @__PURE__ */ t(H, { children: d }),
+          d && (e.getCanSort() || e.getCanPin() || h) && /* @__PURE__ */ t(f, {}),
+          e.getCanSort() && /* @__PURE__ */ r(b, { children: [
+            /* @__PURE__ */ r(
+              g,
+              {
+                onClick: () => {
+                  e.getIsSorted() === "asc" ? e.clearSorting() : e.toggleSorting(!1);
+                },
+                disabled: !e.getCanSort(),
+                children: [
+                  /* @__PURE__ */ t(I, { className: "size-3.5!" }),
+                  /* @__PURE__ */ t("span", { className: "grow", children: "Asc" }),
+                  e.getIsSorted() === "asc" && /* @__PURE__ */ t(C, { className: "size-4 opacity-100! text-primary" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ r(
+              g,
+              {
+                onClick: () => {
+                  e.getIsSorted() === "desc" ? e.clearSorting() : e.toggleSorting(!0);
+                },
+                disabled: !e.getCanSort(),
+                children: [
+                  /* @__PURE__ */ t(L, { className: "size-3.5!" }),
+                  /* @__PURE__ */ t("span", { className: "grow", children: "Desc" }),
+                  e.getIsSorted() === "desc" && /* @__PURE__ */ t(C, { className: "size-4 opacity-100! text-primary" })
+                ]
+              }
+            )
+          ] }),
+          (d || e.getCanSort()) && (e.getCanSort() || e.getCanPin() || h) && /* @__PURE__ */ t(f, {}),
+          ((a = o.tableLayout) == null ? void 0 : a.columnsPinnable) && e.getCanPin() && /* @__PURE__ */ r(b, { children: [
+            /* @__PURE__ */ r(
+              g,
+              {
+                onClick: () => e.pin(e.getIsPinned() === "left" ? !1 : "left"),
+                children: [
+                  /* @__PURE__ */ t(J, { className: "size-3.5!", "aria-hidden": "true" }),
+                  /* @__PURE__ */ t("span", { className: "grow", children: "Pin to left" }),
+                  e.getIsPinned() === "left" && /* @__PURE__ */ t(C, { className: "size-4 opacity-100! text-primary" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ r(
+              g,
+              {
+                onClick: () => e.pin(e.getIsPinned() === "right" ? !1 : "right"),
+                children: [
+                  /* @__PURE__ */ t(K, { className: "size-3.5!", "aria-hidden": "true" }),
+                  /* @__PURE__ */ t("span", { className: "grow", children: "Pin to right" }),
+                  e.getIsPinned() === "right" && /* @__PURE__ */ t(C, { className: "size-4 opacity-100! text-primary" })
+                ]
+              }
+            )
+          ] }),
+          ((s = o.tableLayout) == null ? void 0 : s.columnsMovable) && /* @__PURE__ */ r(b, { children: [
+            /* @__PURE__ */ t(f, {}),
+            /* @__PURE__ */ r(
+              g,
+              {
+                onClick: () => S("left"),
+                disabled: !N("left") || e.getIsPinned() !== !1,
+                children: [
+                  /* @__PURE__ */ t(Q, { className: "size-3.5!", "aria-hidden": "true" }),
+                  /* @__PURE__ */ t("span", { children: "Move to Left" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ r(
+              g,
+              {
+                onClick: () => S("right"),
+                disabled: !N("right") || e.getIsPinned() !== !1,
+                children: [
+                  /* @__PURE__ */ t(W, { className: "size-3.5!", "aria-hidden": "true" }),
+                  /* @__PURE__ */ t("span", { children: "Move to Right" })
+                ]
+              }
+            )
+          ] }),
+          ((n = o.tableLayout) == null ? void 0 : n.columnsVisibility) && h && (e.getCanSort() || e.getCanPin() || d) && /* @__PURE__ */ t(f, {}),
+          ((i = o.tableLayout) == null ? void 0 : i.columnsVisibility) && h && /* @__PURE__ */ r(_, { children: [
+            /* @__PURE__ */ r($, { children: [
+              /* @__PURE__ */ t(X, { className: "size-3.5!" }),
+              /* @__PURE__ */ t("span", { children: "Columns" })
+            ] }),
+            /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(E, { children: u.getAllColumns().filter((l) => typeof l.accessorFn < "u" && l.getCanHide()).map((l) => {
+              var x;
+              return /* @__PURE__ */ t(
+                G,
+                {
+                  checked: l.getIsVisible(),
+                  onSelect: (w) => w.preventDefault(),
+                  onCheckedChange: (w) => l.toggleVisibility(!!w),
+                  className: "capitalize",
+                  children: ((x = l.columnDef.meta) == null ? void 0 : x.headerTitle) || l.id
+                },
+                l.id
+              );
+            }) }) })
+          ] })
+        ] })
+      ] }),
+      ((c = o.tableLayout) == null ? void 0 : c.columnsPinnable) && e.getCanPin() && e.getIsPinned() && T()
+    ] });
+  };
+  return (M = o.tableLayout) != null && M.columnsMovable || (z = o.tableLayout) != null && z.columnsVisibility && h || (y = o.tableLayout) != null && y.columnsPinnable && e.getCanPin() || d ? A() : e.getCanSort() || (P = o.tableLayout) != null && P.columnsResizable && e.getCanResize() ? /* @__PURE__ */ t("div", { className: "flex items-start h-full", children: D() }) : O();
+}
+export {
+  le as Z2TableColumnHeader
+};

package/dist/components/dynamic-table/z2-table-context.d.ts

@@ -0,0 +1,87 @@
+import { ReactNode } from 'react';
+import { ColumnFiltersState, RowData, SortingState, Table } from '@tanstack/react-table';
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        headerTitle?: string;
+        headerClassName?: string;
+        cellClassName?: string;
+        skeleton?: ReactNode;
+        expandedContent?: (row: TData) => ReactNode;
+    }
+}
+export type Z2TableApiFetchParams = {
+    pageIndex: number;
+    pageSize: number;
+    sorting?: SortingState;
+    filters?: ColumnFiltersState;
+    searchQuery?: string;
+};
+export type Z2TableApiResponse<T> = {
+    data: T[];
+    empty: boolean;
+    pagination: {
+        total: number;
+        page: number;
+    };
+};
+export interface Z2TableContextProps<TData extends object> {
+    props: Z2TableProps<TData>;
+    table: Table<TData>;
+    recordCount: number;
+    isLoading: boolean;
+}
+export type Z2TableRequestParams = {
+    pageIndex: number;
+    pageSize: number;
+    sorting?: SortingState;
+    columnFilters?: ColumnFiltersState;
+};
+export interface Z2TableProps<TData extends object> {
+    className?: string;
+    table?: Table<TData>;
+    recordCount: number;
+    children?: ReactNode;
+    onRowClick?: (row: TData) => void;
+    isLoading?: boolean;
+    loadingMode?: 'skeleton' | 'spinner';
+    loadingMessage?: ReactNode | string;
+    emptyMessage?: ReactNode | string;
+    tableLayout?: {
+        dense?: boolean;
+        cellBorder?: boolean;
+        rowBorder?: boolean;
+        rowRounded?: boolean;
+        stripped?: boolean;
+        headerBackground?: boolean;
+        headerBorder?: boolean;
+        headerSticky?: boolean;
+        width?: 'auto' | 'fixed';
+        columnsVisibility?: boolean;
+        columnsResizable?: boolean;
+        columnsPinnable?: boolean;
+        columnsMovable?: boolean;
+        columnsDraggable?: boolean;
+        rowsDraggable?: boolean;
+    };
+    tableClassNames?: {
+        base?: string;
+        header?: string;
+        headerRow?: string;
+        headerSticky?: string;
+        body?: string;
+        bodyRow?: string;
+        footer?: string;
+        edgeCell?: string;
+    };
+}
+declare function useZ2Table(): Z2TableContextProps<any>;
+declare function Z2TableProvider<TData extends object>({ children, table, ...props }: Z2TableProps<TData> & {
+    table: Table<TData>;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableRoot<TData extends object>({ children, table, ...props }: Z2TableProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableContainer({ children, className, border, }: {
+    children: ReactNode;
+    className?: string;
+    border?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { useZ2Table, Z2TableProvider, Z2TableRoot, Z2TableContainer };

package/dist/components/dynamic-table/z2-table-context.js

@@ -0,0 +1,98 @@
+import { jsx as t } from "react/jsx-runtime";
+import { createContext as d, useContext as n } from "react";
+import { cn as i } from "../../lib/utils.js";
+const l = d(void 0);
+function m() {
+  const a = n(l);
+  if (!a)
+    throw new Error("useZ2Table must be used within a Z2TableProvider");
+  return a;
+}
+function u({
+  children: a,
+  table: o,
+  ...e
+}) {
+  return /* @__PURE__ */ t(
+    l.Provider,
+    {
+      value: {
+        props: e,
+        table: o,
+        recordCount: e.recordCount,
+        isLoading: e.isLoading || !1
+      },
+      children: a
+    }
+  );
+}
+function g({ children: a, table: o, ...e }) {
+  const r = {
+    loadingMode: "skeleton",
+    tableLayout: {
+      dense: !1,
+      cellBorder: !1,
+      rowBorder: !0,
+      rowRounded: !1,
+      stripped: !1,
+      headerSticky: !1,
+      headerBackground: !0,
+      headerBorder: !0,
+      width: "fixed",
+      columnsVisibility: !1,
+      columnsResizable: !1,
+      columnsPinnable: !1,
+      columnsMovable: !1,
+      columnsDraggable: !1,
+      rowsDraggable: !1
+    },
+    tableClassNames: {
+      base: "",
+      header: "",
+      headerRow: "",
+      headerSticky: "sticky top-0 bg-background-neutral-medium",
+      body: "",
+      bodyRow: "",
+      footer: "",
+      edgeCell: ""
+    }
+  }, s = {
+    ...r,
+    ...e,
+    tableLayout: {
+      ...r.tableLayout,
+      ...e.tableLayout || {}
+    },
+    tableClassNames: {
+      ...r.tableClassNames,
+      ...e.tableClassNames || {}
+    }
+  };
+  if (!o)
+    throw new Error('Z2Table requires a "table" prop');
+  return /* @__PURE__ */ t(u, { table: o, ...s, children: a });
+}
+function w({
+  children: a,
+  className: o,
+  border: e = !0
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "data-grid",
+      className: i(
+        "grid w-full",
+        e && "border border-stroke-solid-light rounded-xl overflow-hidden",
+        o
+      ),
+      children: a
+    }
+  );
+}
+export {
+  w as Z2TableContainer,
+  u as Z2TableProvider,
+  g as Z2TableRoot,
+  m as useZ2Table
+};

package/dist/components/dynamic-table/z2-table-filter.d.ts

@@ -0,0 +1,15 @@
+import { Column } from '@tanstack/react-table';
+import * as React from 'react';
+interface Z2TableColumnFilterProps<TData, TValue> {
+    column?: Column<TData, TValue>;
+    title?: string;
+    options: {
+        label: string;
+        value: string;
+        icon?: React.ComponentType<{
+            className?: string;
+        }>;
+    }[];
+}
+declare function Z2TableColumnFilter<TData, TValue>({ column, title, options, }: Z2TableColumnFilterProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export { Z2TableColumnFilter, type Z2TableColumnFilterProps };

package/dist/components/dynamic-table/z2-table-pagination.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+interface Z2TablePaginationProps {
+    sizes?: number[];
+    sizesInfo?: string;
+    sizesLabel?: string;
+    sizesDescription?: string;
+    sizesSkeleton?: ReactNode;
+    more?: boolean;
+    moreLimit?: number;
+    info?: string;
+    infoSkeleton?: ReactNode;
+    className?: string;
+    rowsPerPageLabel?: string;
+    previousPageLabel?: string;
+    nextPageLabel?: string;
+    ellipsisText?: string;
+}
+declare function Z2TablePagination(props: Z2TablePaginationProps): import("react/jsx-runtime").JSX.Element;
+export { Z2TablePagination, type Z2TablePaginationProps };

package/dist/components/dynamic-table/z2-table-pagination.js

@@ -0,0 +1,124 @@
+import { jsx as t, jsxs as l, Fragment as v } from "react/jsx-runtime";
+import { ChevronLeftIcon as P, ChevronRightIcon as I } from "lucide-react";
+import { useZ2Table as L } from "./z2-table-context.js";
+import { Z2Skeleton as S } from "../skeleton/skeleton.js";
+import { Button as r } from "../button/button.js";
+import "react";
+import { cn as Z } from "../../lib/utils.js";
+import { Z2Select as y, Z2SelectTrigger as T, Z2SelectValue as $, Z2SelectContent as j, Z2SelectItem as B } from "../select/z2-select.js";
+function H(N) {
+  var b;
+  const { table: n, recordCount: m, isLoading: u } = L(), e = { ...{
+    sizes: [5, 10, 25, 50, 100],
+    sizesLabel: "Show",
+    sizesDescription: "per page",
+    sizesSkeleton: /* @__PURE__ */ t(S, { className: "h-8 w-44" }),
+    moreLimit: 5,
+    more: !1,
+    info: "{from} - {to} of {count}",
+    infoSkeleton: /* @__PURE__ */ t(S, { className: "h-8 w-60" }),
+    rowsPerPageLabel: "Rows per page",
+    previousPageLabel: "Go to previous page",
+    nextPageLabel: "Go to next page",
+    ellipsisText: "..."
+  }, ...N }, g = " rtl:transform rtl:rotate-180", o = n.getState().pagination.pageIndex, i = n.getState().pagination.pageSize, x = o * i + 1, h = Math.min((o + 1) * i, m), p = n.getPageCount(), w = e != null && e.info ? e.info.replace("{from}", x.toString()).replace("{to}", h.toString()).replace("{count}", m.toString()) : `${x} - ${h} of ${m}`, f = (e == null ? void 0 : e.moreLimit) || 5, c = Math.floor(o / f) * f, d = Math.min(c + f, p), z = () => {
+    const s = [];
+    for (let a = c; a < d; a++)
+      s.push(
+        /* @__PURE__ */ t(
+          r,
+          {
+            size: "small",
+            variant: "stroke",
+            disabled: o === a,
+            onClick: () => {
+              o !== a && n.setPageIndex(a);
+            },
+            leftIcon: a + 1
+          },
+          a
+        )
+      );
+    return s;
+  }, k = () => c > 0 ? /* @__PURE__ */ t(
+    r,
+    {
+      size: "small",
+      variant: "stroke",
+      onClick: () => n.setPageIndex(c - 1),
+      label: e.ellipsisText
+    }
+  ) : null, C = () => d < p ? /* @__PURE__ */ t(
+    r,
+    {
+      variant: "stroke",
+      size: "small",
+      onClick: () => n.setPageIndex(d),
+      label: e.ellipsisText
+    }
+  ) : null;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      "data-slot": "data-grid-pagination",
+      className: Z(
+        "flex flex-wrap flex-col sm:flex-row justify-between items-center gap-2.5 py-2.5 sm:py-0 grow",
+        e == null ? void 0 : e.className
+      ),
+      children: [
+        /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center space-x-2.5 pb-2.5 sm:pb-0 order-2 sm:order-1", children: u ? e == null ? void 0 : e.sizesSkeleton : /* @__PURE__ */ l(v, { children: [
+          /* @__PURE__ */ t("div", { className: "text-sm text-muted-foreground", children: e.rowsPerPageLabel }),
+          /* @__PURE__ */ l(
+            y,
+            {
+              value: `${i}`,
+              onValueChange: (s) => {
+                const a = Number(s);
+                n.setPageSize(a);
+              },
+              children: [
+                /* @__PURE__ */ t(T, { className: "w-fit", size: "sm", children: /* @__PURE__ */ t($, { placeholder: `${i}` }) }),
+                /* @__PURE__ */ t(j, { side: "top", className: "min-w-[50px]", children: (b = e == null ? void 0 : e.sizes) == null ? void 0 : b.map((s) => /* @__PURE__ */ t(B, { value: `${s}`, children: s }, s)) })
+              ]
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ t("div", { className: "flex flex-col sm:flex-row justify-center sm:justify-end items-center gap-2.5 pt-2.5 sm:pt-0 order-1 sm:order-2", children: u ? e == null ? void 0 : e.infoSkeleton : /* @__PURE__ */ l(v, { children: [
+          /* @__PURE__ */ t("div", { className: "text-sm text-muted-foreground text-nowrap order-2 sm:order-1", children: w }),
+          p > 1 && /* @__PURE__ */ l("div", { className: "flex items-center space-x-1 order-1 sm:order-2", children: [
+            /* @__PURE__ */ t(
+              r,
+              {
+                size: "small",
+                variant: "stroke",
+                className: g,
+                onClick: () => n.previousPage(),
+                disabled: !n.getCanPreviousPage(),
+                leftIcon: /* @__PURE__ */ t(P, { className: "size-full" }),
+                children: /* @__PURE__ */ t("span", { className: "sr-only", children: e.previousPageLabel })
+              }
+            ),
+            k(),
+            z(),
+            C(),
+            /* @__PURE__ */ t(
+              r,
+              {
+                size: "small",
+                variant: "stroke",
+                className: g,
+                onClick: () => n.nextPage(),
+                disabled: !n.getCanNextPage(),
+                leftIcon: /* @__PURE__ */ t(I, { className: "size-full" }),
+                children: /* @__PURE__ */ t("span", { className: "sr-only", children: e.nextPageLabel })
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  H as Z2TablePagination
+};

package/dist/components/dynamic-table/z2-table-visibility.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { Table } from '@tanstack/react-table';
+declare function Z2TableColumnVisibility<TData>({ table, trigger, }: {
+    table: Table<TData>;
+    trigger: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export { Z2TableColumnVisibility };

package/dist/components/dynamic-table/z2-table.d.ts

@@ -0,0 +1,59 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Cell, Column, Header, HeaderGroup, Row } from '@tanstack/react-table';
+import * as React from 'react';
+declare function Z2TableBase({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableHead({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableHeadRow<TData>({ children, headerGroup, }: {
+    children: ReactNode;
+    headerGroup: HeaderGroup<TData>;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableHeadRowCell<TData>({ children, header, dndRef, dndStyle, }: {
+    children: ReactNode;
+    header: Header<TData, unknown>;
+    dndRef?: React.Ref<HTMLTableCellElement>;
+    dndStyle?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableHeadRowCellResize<TData>({ header }: {
+    header: Header<TData, unknown>;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableRowSpacer(): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableBody({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableBodyRowSkeleton({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableBodyRowSkeletonCell<TData>({ children, column, }: {
+    children: ReactNode;
+    column: Column<TData>;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableBodyRow<TData>({ children, row, dndRef, dndStyle, }: {
+    children: ReactNode;
+    row: Row<TData>;
+    dndRef?: React.Ref<HTMLTableRowElement>;
+    dndStyle?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableBodyRowExpandded<TData>({ row }: {
+    row: Row<TData>;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare function Z2TableBodyRowCell<TData>({ children, cell, dndRef, dndStyle, }: {
+    children: ReactNode;
+    cell: Cell<TData, unknown>;
+    dndRef?: React.Ref<HTMLTableCellElement>;
+    dndStyle?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableEmpty(): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableLoader(): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableRowSelect<TData>({ row, }: {
+    row: Row<TData>;
+    size?: 'sm' | 'md' | 'lg';
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2TableRowSelectAll(_props: {
+    size?: 'sm' | 'md' | 'lg';
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2Table<TData>(): import("react/jsx-runtime").JSX.Element;
+export { Z2Table, Z2TableBase, Z2TableBody, Z2TableBodyRow, Z2TableBodyRowCell, Z2TableBodyRowExpandded, Z2TableBodyRowSkeleton, Z2TableBodyRowSkeletonCell, Z2TableEmpty, Z2TableHead, Z2TableHeadRow, Z2TableHeadRowCell, Z2TableHeadRowCellResize, Z2TableLoader, Z2TableRowSelect, Z2TableRowSelectAll, Z2TableRowSpacer, };