@konstructio/ui 0.1.2-alpha.101 → 0.1.2-alpha.103

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

@@ -1,73 +1,74 @@
 import { t as r } from "../../../../utils-Cx-WzRZF.js";
-import { n as H } from "../../../../table.provider-9uUt5a-s.js";
-import { useTableContext as L } from "../../contexts/table.hook.js";
-import { Skeleton as M } from "../Skeleton/Skeleton.js";
-import { isPaginationBarVisible as O } from "../../utils/pagination.js";
-import { ExpandableRow as P } from "../ExpandableRow/ExpandableRow.js";
-import { Fragment as I } from "react";
-import { jsx as e, jsxs as T } from "react/jsx-runtime";
-var Y = ({ isLoading: h, showPagination: w, emptyState: p }) => {
-  const { table: i, pageSize: k, totalItems: N = -1 / 0, tableFetching: R, enableExpandedRow: E, classNameExpandedRow: v, classNameExpandedCell: y, classNameExpandedContent: C, enableHoverRow: g, classNameHoverRow: D, classNameActiveExpandedRow: j, renderExpandedRow: f, isBorderOnAdjacentCell: B, isExpandColumnVisible: V } = L();
-  if (h || R) return /* @__PURE__ */ e(M, {
-    numberOfRows: k,
-    table: i
+import { n as I } from "../../../../table.provider-2sAkE7z_.js";
+import { useTableContext as T } from "../../contexts/table.hook.js";
+import { Skeleton as q } from "../Skeleton/Skeleton.js";
+import { isPaginationBarVisible as G } from "../../utils/pagination.js";
+import { ExpandableRow as J } from "../ExpandableRow/ExpandableRow.js";
+import { Fragment as K } from "react";
+import { jsx as e, jsxs as Q } from "react/jsx-runtime";
+var re = ({ isLoading: v, showPagination: N, emptyState: y, errorState: a }) => {
+  const { table: m, pageSize: E, totalItems: R = -1 / 0, tableLoading: C, tableError: c, enableExpandedRow: D, classNameExpandedRow: j, classNameExpandedCell: B, classNameExpandedContent: V, enableHoverRow: u, classNameHoverRow: z, classNameActiveExpandedRow: L, renderExpandedRow: f, isBorderOnAdjacentCell: _, isExpandColumnVisible: A } = T();
+  if (v || C) return /* @__PURE__ */ e(q, {
+    numberOfRows: E,
+    table: m
   });
-  const a = i.getRowModel().rows ?? [], o = w && O(N);
-  if (a.length === 0 && p) {
-    const d = i.getVisibleLeafColumns().length;
+  const t = m.getRowModel().rows ?? [], l = N && G(R), x = t.length === 0 && !!c && !!a, h = t.length > 0 ? null : c && a ? typeof a == "function" ? a(c) : a : y ?? null;
+  if (h) {
+    const d = m.getVisibleLeafColumns().length;
     return /* @__PURE__ */ e("tbody", {
-      className: r("text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
+      className: r("kvt-body", "text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
       children: /* @__PURE__ */ e("tr", {
-        className: r("border-b", "border-b-gray-200", "dark:border-b-metal-700", "bg-transparent"),
+        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: d,
           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: p
+            children: h
           })
         })
       })
     });
   }
   return /* @__PURE__ */ e("tbody", {
-    className: r("text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
-    children: a.map((d, m) => {
-      const { id: c, original: b, getVisibleCells: z } = d, { meta: l = {} } = b, s = z(), t = E && d.getIsExpanded(), F = !!l.expandedRow || !!f, u = s[0]?.column.id !== "__expand" || V ? 0 : B ? 1 : null;
-      return /* @__PURE__ */ T(I, { children: [/* @__PURE__ */ e("tr", {
-        className: r({ "group/row": g }, "border-b", "border-b-gray-200", "dark:text-metal-50", "dark:border-b-metal-700", "bg-transparent", l.className),
-        "data-row-id": c,
-        ...l.attributes ?? {},
-        children: s.map(({ id: S, column: n, getContext: _ }, x) => {
-          const A = typeof n.columnDef.meta?.className == "function" ? n.columnDef.meta?.className(b) : n.columnDef.meta?.className;
+    className: r("kvt-body", "text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
+    children: t.map((d, b) => {
+      const { id: p, original: g, getVisibleCells: F } = d, { meta: s = {} } = g, i = F(), n = D && d.getIsExpanded(), H = !!s.expandedRow || !!f, k = i[0]?.column.id !== "__expand" || A ? 0 : _ ? 1 : null;
+      return /* @__PURE__ */ Q(K, { children: [/* @__PURE__ */ e("tr", {
+        className: r("kvt-row", { "group/row": u }, "border-b", "border-b-gray-200", "dark:text-metal-50", "dark:border-b-metal-700", "bg-transparent", s.className),
+        "data-row-id": p,
+        ...s.attributes ?? {},
+        children: i.map(({ id: M, column: o, getContext: O }, w) => {
+          const P = typeof o.columnDef.meta?.className == "function" ? o.columnDef.meta?.className(g) : o.columnDef.meta?.className;
           return /* @__PURE__ */ e("td", {
-            className: r("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", {
-              "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": g,
-              [r("bg-zinc-100 dark:bg-metal-800", j)]: !!t
-            }, D, A, {
-              "rounded-bl-lg": m === a.length - 1 && u !== null && x === u && !o && !t,
-              "rounded-br-lg": m === a.length - 1 && x === s.length - 1 && !o && !t,
-              "dark:[tr:last-child_&]:border-b": !o
+            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", {
+              "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": u,
+              [r("bg-zinc-100 dark:bg-metal-800", L)]: !!n
+            }, z, P, {
+              "rounded-bl-lg": b === t.length - 1 && k !== null && w === k && !l && !n,
+              "rounded-br-lg": b === t.length - 1 && w === i.length - 1 && !l && !n,
+              "dark:[tr:last-child_&]:border-b": !l
             }),
-            "data-expanded": t ? !0 : void 0,
-            ...n.columnDef.meta?.attributes ?? {},
-            children: H(n.columnDef.cell, _())
-          }, S);
+            "data-expanded": n ? !0 : void 0,
+            ...o.columnDef.meta?.attributes ?? {},
+            children: I(o.columnDef.cell, O())
+          }, M);
         })
-      }), F && /* @__PURE__ */ e(P, {
-        classNameExpandedCell: y,
-        classNameExpandedContent: C,
-        classNameExpandedRow: v,
-        colSpan: s.length,
-        id: c,
-        isExpanded: !!t,
-        isLastRow: m === a.length - 1 && !o,
-        children: l.expandedRow ?? f?.(b)
-      })] }, c);
+      }), H && /* @__PURE__ */ e(J, {
+        classNameExpandedCell: B,
+        classNameExpandedContent: V,
+        classNameExpandedRow: j,
+        colSpan: i.length,
+        id: p,
+        isExpanded: !!n,
+        isLastRow: b === t.length - 1 && !l,
+        children: s.expandedRow ?? f?.(g)
+      })] }, p);
     })
   });
 };
 export {
-  Y as Body
+  re as Body
 };

package/dist/components/VirtualizedTable/components/DropdownPaginate/DropdownPaginate.js

@@ -1,26 +1,72 @@
-import { Select as i } from "../../../Select/Select.js";
-import { DEFAULT_PAGE_SIZES as l } from "../../constants/pagination.js";
-import { useTableContext as p } from "../../contexts/table.hook.js";
-import { useCallback as g, useMemo as c } from "react";
-import { jsx as o, jsxs as d } from "react/jsx-runtime";
-var u = ({ pageSizes: m = l }) => {
-  const { pageSize: r, onPageSize: t, handlePage: a } = p(), s = c(() => m.map(String).map((e) => ({
-    label: e,
-    value: e
-  })), []), n = g((e) => {
-    t(Number(e)), a(0);
-  }, [a, t]);
-  return /* @__PURE__ */ d("div", {
-    className: "flex items-center gap-2 dark:text-metal-300",
-    children: [/* @__PURE__ */ o("span", { children: "Show" }), /* @__PURE__ */ o(i, {
-      className: "w-22 [&>div>p]:text-sm bg-white",
-      listItemClassName: "[&>p]:text-sm dark:bg-metal-800",
-      options: s,
-      value: r.toString(),
-      onChange: ({ target: e }) => n(e.value)
+import { t as o } from "../../../../utils-Cx-WzRZF.js";
+import { t as u } from "../../../../chevron-up-Bjpvg6ui.js";
+import { Typography as c } from "../../../Typography/Typography.js";
+import { i as b, n as v, r as w, t as S } from "../../../../dist-2bGlmy8N2.js";
+import { listVariants as k } from "../../../Select/components/List/List.variants.js";
+import { listItemVariants as N } from "../../../Select/components/ListItem/ListItem.variants.js";
+import { selectVariants as C } from "../../../Select/Select.variants.js";
+import { DEFAULT_PAGE_SIZES as y } from "../../constants/pagination.js";
+import { useTableContext as z } from "../../contexts/table.hook.js";
+import { useState as O } from "react";
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+var _ = ({ pageSizes: d = y, isListPortal: f = !1, direction: s = "auto" }) => {
+  const { pageSize: i, onPageSize: g, handlePage: h } = z(), [n, l] = O(!1), m = (e) => {
+    g(Number(e)), h(0), l(!1);
+  }, p = /* @__PURE__ */ t(S, {
+    asChild: !0,
+    side: s === "up" ? "top" : "bottom",
+    avoidCollisions: s === "auto",
+    align: "start",
+    sideOffset: 4,
+    onOpenAutoFocus: (e) => {
+      e.preventDefault();
+    },
+    children: /* @__PURE__ */ t("ul", {
+      role: "listbox",
+      "aria-label": "Rows per page",
+      className: o(k(), "kvt-page-size-list", "static top-auto mt-0 z-50 w-(--radix-popover-trigger-width)"),
+      children: d.map((e) => {
+        const a = String(e);
+        return /* @__PURE__ */ t("li", {
+          role: "option",
+          "aria-selected": a === String(i),
+          tabIndex: 0,
+          className: o(N(), "dark:bg-metal-800"),
+          onClick: () => {
+            m(a);
+          },
+          onKeyDown: (x) => {
+            x.key === "Enter" && m(a);
+          },
+          children: /* @__PURE__ */ t(c, {
+            variant: "body2",
+            className: "text-sm dark:text-metal-50",
+            children: a
+          })
+        }, a);
+      })
+    })
+  });
+  return /* @__PURE__ */ r("div", {
+    className: "kvt-page-size flex items-center gap-2 dark:text-metal-300",
+    children: [/* @__PURE__ */ t("span", { children: "Show" }), /* @__PURE__ */ r(w, {
+      open: n,
+      onOpenChange: l,
+      children: [/* @__PURE__ */ r(b, {
+        "aria-label": "Rows per page",
+        className: o(C(), "w-22 bg-white"),
+        children: [/* @__PURE__ */ t(c, {
+          variant: "body2",
+          className: "flex-1 text-left text-sm text-metal-800 dark:text-metal-50",
+          children: i
+        }), /* @__PURE__ */ t(u, {
+          "data-state": n ? "open" : "closed",
+          className: "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none"
+        })]
+      }), f ? /* @__PURE__ */ t(v, { children: p }) : p]
     })]
   });
 };
 export {
-  u as DropdownPaginate
+  _ as DropdownPaginate
 };

package/dist/components/VirtualizedTable/components/ExpandableRow/ExpandableRow.js

@@ -1,7 +1,7 @@
 import { t as a } from "../../../../utils-Cx-WzRZF.js";
 import { jsx as d } from "react/jsx-runtime";
 var n = ({ children: o, classNameExpandedCell: b, classNameExpandedContent: t, classNameExpandedRow: l, colSpan: m, id: i, isExpanded: r, isLastRow: e }) => /* @__PURE__ */ d("tr", {
-  className: a("h-0 leading-0", l),
+  className: a("kvt-expanded-row h-0 leading-0", l),
   "data-expanded-row-id": i,
   children: /* @__PURE__ */ d("td", {
     colSpan: m,

package/dist/components/VirtualizedTable/components/Filter/Filter.js

@@ -1,54 +1,43 @@
-import { o as $ } from "../../../../rolldown-runtime-Ck3dxwZt.js";
-import { t as G } from "../../../../Input-DG3snJf_.js";
-import { t as H } from "../../../../utils-Cx-WzRZF.js";
-import { Button as J } from "../../../Button/Button.js";
-import { resetEvent as K } from "../../../Filter/events/index.js";
+import { o as z } from "../../../../rolldown-runtime-Ck3dxwZt.js";
+import { t as V } from "../../../../Input-CW0VwW2T.js";
+import { t as $ } from "../../../../utils-Cx-WzRZF.js";
+import { Button as f } from "../../../Button/Button.js";
+import { resetEvent as G } from "../../../Filter/events/index.js";
 import { Filter as n } from "../../../Filter/Filter.js";
-import { t as Q } from "../../../../debounce-KoeGNmnW.js";
-import { useTableContext as U } from "../../contexts/table.hook.js";
-import { VirtualizedTableEvent as W } from "../../events/index.js";
-import { useCallback as w, useEffect as X, useMemo as u, useRef as Y } from "react";
-import { jsx as s, jsxs as p } from "react/jsx-runtime";
-var Z = /* @__PURE__ */ $(Q(), 1), ue = ({ id: m, actions: i, filters: d, multiSelectFilter: h, placeholder: D, showFilterInput: x = !0, showResetButton: A = !0, resetButtonClassName: M, closeOnApply: j = !0 }) => {
-  const c = Y(null), { termOfSearch: y, multiselectSelected: b, dateFilters: F, dateRangeFilters: S, timeFilters: v, onChangeTermOfSearch: l, onSelectMultiselect: R, onSelectDateFilter: E, onSelectDateRangeFilter: O, onSelectTimeFilter: B } = U(), I = u(() => {
-    const e = d ?? h?.map((a) => ({
-      ...a,
-      type: "badgeMultiSelect"
-    })) ?? [], t = i ?? [];
-    return [...e, ...t];
-  }, [
-    d,
-    h,
-    i
-  ]), T = w((e, t) => R(e, t.map((a) => a.id)), [R]), _ = w(() => {
-    l(""), c.current && (c.current.value = "");
-  }, [l]);
-  X(() => {
+import { t as H } from "../../../../debounce-C5Ycjilj.js";
+import { useTableContext as J } from "../../contexts/table.hook.js";
+import { VirtualizedTableEvent as K } from "../../events/index.js";
+import { useEffect as Q, useMemo as U, useRef as W } from "react";
+import { jsx as s, jsxs as u } from "react/jsx-runtime";
+var X = /* @__PURE__ */ z(H(), 1), me = ({ id: m, actions: i, filters: d, multiSelectFilter: h, placeholder: y, showFilterInput: F = !0, showResetButton: b = !0, resetButtonClassName: v, closeOnApply: S = !0 }) => {
+  const l = W(null), { termOfSearch: R, multiselectSelected: T, dateFilters: w, dateRangeFilters: D, timeFilters: x, onChangeTermOfSearch: c, onSelectMultiselect: M, onSelectDateFilter: j, onSelectDateRangeFilter: A, onSelectTimeFilter: E } = J(), k = [...d ?? h?.map((e) => ({
+    ...e,
+    type: "badgeMultiSelect"
+  })) ?? [], ...i ?? []], p = (e, t) => {
+    M(e, t.map((a) => a.id));
+  }, O = () => {
+    c(""), l.current && (l.current.value = "");
+  };
+  Q(() => {
     const e = Array.isArray(m) ? m.join(",") : String(m), t = new AbortController();
-    return document.addEventListener(W.RESET_FILTERS, (a) => {
+    return document.addEventListener(K.RESET_FILTERS, (a) => {
       const { detail: o } = a;
-      o.tableId === e && (l(""), c.current && (c.current.value = ""), K());
+      o.tableId === e && (c(""), l.current && (l.current.value = ""), G());
     }, { signal: t.signal }), () => t.abort();
-  }, [m, l]);
-  const k = u(() => (0, Z.default)((e) => {
-    l(e.target.value);
-  }, 500), [l]), P = u(() => !!y || Object.values(b ?? {}).flat().length > 0 || Object.values(F ?? {}).some(Boolean) || Object.values(S ?? {}).some(Boolean) || Object.values(v ?? {}).some(Boolean), [
-    y,
-    b,
-    F,
-    S,
-    v
-  ]), g = (e) => {
+  }, [m, c]);
+  const B = U(() => (0, X.default)((e) => {
+    c(e.target.value);
+  }, 500), [c]), I = !!R || Object.values(T ?? {}).flat().length > 0 || Object.values(w ?? {}).some(Boolean) || Object.values(D ?? {}).some(Boolean) || Object.values(x ?? {}).some(Boolean), _ = (e) => {
     if (e.type === "action") {
-      const { label: r, appearance: N = "compact", variant: L = "secondary", leftIcon: q, rightIcon: z, type: f, ...V } = e;
-      return /* @__PURE__ */ p(J, {
-        appearance: N,
-        variant: L,
-        ...V,
+      const { label: r, appearance: P = "compact", variant: N = "secondary", leftIcon: g, rightIcon: L, type: Y, ...q } = e;
+      return /* @__PURE__ */ u(f, {
+        appearance: P,
+        variant: N,
+        ...q,
         children: [
-          q,
+          g,
           r,
-          z
+          L
         ]
       }, r);
     }
@@ -58,14 +47,14 @@ var Z = /* @__PURE__ */ $(Q(), 1), ue = ({ id: m, actions: i, filters: d, multiS
       position: o,
       options: e.options,
       onApply: (r) => {
-        T(t, r);
+        p(t, r);
       }
     }, t) : e.type === "date" ? /* @__PURE__ */ s(n.DateFilterDropdown, {
       label: a,
       position: o,
       countryCode: e.countryCode,
       onApply: (r) => {
-        E(t, r);
+        j(t, r);
       }
     }, t) : e.type === "dateRange" ? /* @__PURE__ */ s(n.DateRangeFilterDropdown, {
       label: a,
@@ -78,7 +67,7 @@ var Z = /* @__PURE__ */ $(Q(), 1), ue = ({ id: m, actions: i, filters: d, multiS
       maxDate: e.maxDate,
       countryCode: e.countryCode,
       onApply: (r) => {
-        O(t, r);
+        A(t, r);
       },
       onRangeChange: e.onRangeChange
     }, t) : e.type === "time" ? /* @__PURE__ */ s(n.TimeFilterDropdown, {
@@ -88,37 +77,38 @@ var Z = /* @__PURE__ */ $(Q(), 1), ue = ({ id: m, actions: i, filters: d, multiS
       presets: e.presets,
       showTimePicker: e.showTimePicker,
       onApply: (r) => {
-        B(t, r);
+        E(t, r);
       }
     }, t) : /* @__PURE__ */ s(n.BadgeMultiSelect, {
       label: a,
       position: o,
       options: e.options,
       onApply: (r) => {
-        T(t, r);
+        p(t, r);
       }
     }, t);
   };
-  return /* @__PURE__ */ p("div", {
-    className: "w-full flex items-center justify-end pb-6",
-    children: [x && /* @__PURE__ */ s(G, {
-      ref: c,
-      placeholder: D,
+  return /* @__PURE__ */ u("div", {
+    className: "kvt-filter w-full flex items-center justify-end pb-6",
+    children: [F && /* @__PURE__ */ s(V, {
+      ref: l,
+      placeholder: y,
       isSearch: !0,
       autoComplete: "false",
-      className: "w-72",
+      className: "kvt-search w-72",
       inputMode: "search",
-      onChange: k
-    }), /* @__PURE__ */ p(n, {
-      closeOnApply: j,
-      children: [I.map(g), A && /* @__PURE__ */ s(n.ResetButton, {
-        className: H("select-none", M),
-        disabled: !P,
-        onClick: _
+      onChange: B
+    }), /* @__PURE__ */ u(n, {
+      className: "kvt-filter-actions",
+      closeOnApply: S,
+      children: [k.map(_), b && /* @__PURE__ */ s(n.ResetButton, {
+        className: $("select-none", v),
+        disabled: !I,
+        onClick: O
       })]
     })]
   });
 };
 export {
-  ue as Filter
+  me as Filter
 };

package/dist/components/VirtualizedTable/components/FormPaginate/FormPaginate.js

@@ -1,19 +1,19 @@
-import { t as s } from "../../../../Input-DG3snJf_.js";
+import { t as s } from "../../../../Input-CW0VwW2T.js";
 import { Button as i } from "../../../Button/Button.js";
 import { Typography as p } from "../../../Typography/Typography.js";
 import { useTableContext as u } from "../../contexts/table.hook.js";
-import { useCallback as l, useRef as c } from "react";
-import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { useRef as l } from "react";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
 var N = () => {
-  const r = c(null), { totalPages: t, handlePage: o } = u();
-  return /* @__PURE__ */ f("form", {
+  const r = l(null), { totalPages: t, handlePage: m } = u();
+  return /* @__PURE__ */ c("form", {
     "aria-label": "footer-pagination",
     ref: r,
-    onSubmit: l((a) => {
-      a.preventDefault();
-      const n = new FormData(a.currentTarget), m = Number(n.get("jump-to"));
-      o(((m < t ? m : t) || 1) - 1), r.current?.reset();
-    }, [o, t]),
+    onSubmit: (o) => {
+      o.preventDefault();
+      const n = new FormData(o.currentTarget), a = Number(n.get("jump-to"));
+      m(((a < t ? a : t) || 1) - 1), r.current?.reset();
+    },
     className: "flex items-center gap-2",
     noValidate: !0,
     children: [

package/dist/components/VirtualizedTable/components/Header/Header.js

@@ -1,40 +1,53 @@
-import { t as r } from "../../../../utils-Cx-WzRZF.js";
-import { n as b } from "../../../../table.provider-9uUt5a-s.js";
-import { useTableContext as g } from "../../contexts/table.hook.js";
+import { t } from "../../../../utils-Cx-WzRZF.js";
+import { n as g } from "../../../../table.provider-2sAkE7z_.js";
+import { useTableContext as k } from "../../contexts/table.hook.js";
 import u from "../../assets/chevron-up.js";
-import k from "../../assets/chevron-down.js";
-import { useCallback as d } from "react";
-import { jsx as a, jsxs as l } from "react/jsx-runtime";
-var y = ({ className: n, classNameArrows: i, classNameActiveArrows: o }) => {
-  const { table: c, onSorting: s } = g(), m = d((t) => s([{
-    id: t.id,
-    desc: !1
-  }]), [s]), p = d((t) => s([{
-    id: t.id,
-    desc: !0
-  }]), [s]);
-  return /* @__PURE__ */ a("thead", {
-    className: r("font-semibold", "uppercase", "text-slate-500", "text-xs", "not-italic", "bg-slate-100", "overflow-hidden", "dark:text-slate-300", "dark:bg-metal-800", n),
-    children: c.getHeaderGroups().map(({ id: t, headers: f }) => /* @__PURE__ */ a("tr", { children: f.map(({ id: x, column: e, getContext: h }) => /* @__PURE__ */ a("th", {
-      scope: "col",
-      className: r("px-4", "py-3", "text-left", "text-xs", "first:rounded-tl-lg", "last:rounded-tr-lg", "border-transparent", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", e.columnDef.meta?.headerClassName),
-      children: /* @__PURE__ */ l("span", {
-        className: "flex items-center gap-2 w-full",
-        children: [b(e.columnDef.header, h()), e.getCanSort() && /* @__PURE__ */ l("div", {
-          className: r("flex flex-col text-slate-400 justify-center items-center gap-1", i),
-          role: "presentation",
-          children: [/* @__PURE__ */ a(u, {
-            className: r("w-2 h-2 cursor-pointer", { "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "asc" }, o),
-            onClick: () => m(e)
-          }), /* @__PURE__ */ a(k, {
-            className: r("w-2 h-2 cursor-pointer", { "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "desc" }, o),
-            onClick: () => p(e)
-          })]
-        })]
+import C from "../../assets/chevron-down.js";
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+var D = ({ className: c, classNameArrows: i, classNameActiveArrows: l, classNameHeaderContent: m }) => {
+  const { table: s, headerContent: d, onSorting: n } = k(), p = (a) => {
+    n([{
+      id: a.id,
+      desc: !1
+    }]);
+  }, x = (a) => {
+    n([{
+      id: a.id,
+      desc: !0
+    }]);
+  };
+  return /* @__PURE__ */ o("thead", {
+    className: t("kvt-header", "font-semibold", "uppercase", "text-slate-500", "text-xs", "not-italic", "bg-slate-100", "overflow-hidden", "dark:text-slate-300", "dark:bg-metal-800", c),
+    children: [d && /* @__PURE__ */ r("tr", {
+      "data-header-content": !0,
+      children: /* @__PURE__ */ r("th", {
+        colSpan: s.getVisibleLeafColumns().length,
+        className: t("kvt-header-content", "px-6", "py-4", "text-left", "text-sm", "font-normal", "normal-case", "text-slate-800", "bg-white", "rounded-tl-lg", "rounded-tr-lg", "border-b", "border-b-gray-200", "dark:border-b-0", "dark:text-metal-50", "dark:bg-metal-900", "dark:border-t", "dark:border-x", "dark:border-metal-700", m),
+        children: d
       })
-    }, x)) }, t))
+    }), s.getHeaderGroups().map(({ id: a, headers: h }) => /* @__PURE__ */ r("tr", {
+      className: "kvt-header-row",
+      children: h.map(({ id: b, column: e, getContext: f }) => /* @__PURE__ */ r("th", {
+        scope: "col",
+        className: t("kvt-header-cell", "px-4", "py-3", "text-left", "text-xs", !d && "first:rounded-tl-lg", !d && "last:rounded-tr-lg", "border-transparent", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", e.columnDef.meta?.headerClassName),
+        children: /* @__PURE__ */ o("span", {
+          className: "flex items-center gap-2 w-full",
+          children: [g(e.columnDef.header, f()), e.getCanSort() && /* @__PURE__ */ o("div", {
+            className: t("flex flex-col text-slate-400 justify-center items-center gap-1", i),
+            role: "presentation",
+            children: [/* @__PURE__ */ r(u, {
+              className: t("w-2 h-2 cursor-pointer", { "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "asc" }, l),
+              onClick: () => p(e)
+            }), /* @__PURE__ */ r(C, {
+              className: t("w-2 h-2 cursor-pointer", { "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "desc" }, l),
+              onClick: () => x(e)
+            })]
+          })]
+        })
+      }, b))
+    }, a))]
   });
 };
 export {
-  y as Header
+  D as Header
 };

package/dist/components/VirtualizedTable/components/Pagination/Pagination.js

@@ -1,14 +1,14 @@
-import { t as f } from "../../../../utils-Cx-WzRZF.js";
-import { useTableContext as p } from "../../contexts/table.hook.js";
-import { isPaginationBarVisible as x } from "../../utils/pagination.js";
-import { DotPaginate as b } from "../DotPaginate/DotPaginate.js";
-import { DropdownPaginate as g } from "../DropdownPaginate/DropdownPaginate.js";
-import { FormPaginate as u } from "../FormPaginate/FormPaginate.js";
-import { Fragment as h, jsx as e, jsxs as t } from "react/jsx-runtime";
-var j = ({ showTotalItems: a = !0, showDropdownPagination: i = !0, showDotPagination: n = !0, showFormPagination: s = !0, pageSizes: l, classNamePagination: m, isLoading: o }) => {
-  const { totalItems: r = -1 / 0, tableFetching: d, isFirstLoad: c } = p();
-  return !x(r) || d || o ? null : /* @__PURE__ */ t(h, { children: [/* @__PURE__ */ e("div", {
-    className: f("bg-slate-50", "border", "border-y-transparent", "border-x-slate-100", "text-slate-500", "text-sm", "not-italic", "py-2", "px-6", "rounded-b-lg", "shadow", "dark:bg-metal-800", "dark:border-x-metal-700", "dark:border-b-metal-700", m, { "animate-in fade-in-10": !c }),
+import { t as x } from "../../../../utils-Cx-WzRZF.js";
+import { useTableContext as g } from "../../contexts/table.hook.js";
+import { isPaginationBarVisible as b } from "../../utils/pagination.js";
+import { DotPaginate as u } from "../DotPaginate/DotPaginate.js";
+import { DropdownPaginate as h } from "../DropdownPaginate/DropdownPaginate.js";
+import { FormPaginate as v } from "../FormPaginate/FormPaginate.js";
+import { Fragment as N, jsx as e, jsxs as t } from "react/jsx-runtime";
+var I = ({ showTotalItems: a = !0, showDropdownPagination: i = !0, showDotPagination: n = !0, showFormPagination: s = !0, pageSizes: l, classNamePagination: o, isLoading: m, isListPortal: d, dropdownPaginationDirection: c }) => {
+  const { totalItems: r = -1 / 0, tableLoading: p, isFirstLoad: f } = g();
+  return !b(r) || p || m ? null : /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e("div", {
+    className: x("kvt-pagination", "bg-slate-50", "border", "border-y-transparent", "border-x-slate-100", "text-slate-500", "text-sm", "not-italic", "py-2", "px-6", "rounded-b-lg", "shadow", "dark:bg-metal-800", "dark:border-x-metal-700", "dark:border-b-metal-700", o, { "animate-in fade-in-10": !f }),
     children: /* @__PURE__ */ t("div", {
       className: "flex items-center justify-between",
       children: [/* @__PURE__ */ t("div", {
@@ -18,15 +18,19 @@ var j = ({ showTotalItems: a = !0, showDropdownPagination: i = !0, showDotPagina
           children: [r, " Results"]
         }) : null, i && /* @__PURE__ */ e("div", {
           className: "flex items-center gap-2",
-          children: /* @__PURE__ */ e(g, { pageSizes: l })
+          children: /* @__PURE__ */ e(h, {
+            pageSizes: l,
+            isListPortal: d,
+            direction: c
+          })
         })]
       }), /* @__PURE__ */ t("div", {
         className: "flex items-center gap-8",
-        children: [n && /* @__PURE__ */ e(b, {}), s && /* @__PURE__ */ e(u, {})]
+        children: [n && /* @__PURE__ */ e(u, {}), s && /* @__PURE__ */ e(v, {})]
       })]
     })
-  }), /* @__PURE__ */ e("div", { className: "w-full min-h-37.5" })] });
+  }) });
 };
 export {
-  j as Pagination
+  I as Pagination
 };

package/dist/components/VirtualizedTable/components/Skeleton/Skeleton.js

@@ -1,13 +1,13 @@
 import { t as l } from "../../../../utils-Cx-WzRZF.js";
-import { Button as m } from "../../../Button/Button.js";
-import { t as c } from "../../../../ellipsis-vertical-BBmhzIXn.js";
-import { useTableContext as h } from "../../contexts/table.hook.js";
+import { Button as b } from "../../../Button/Button.js";
+import { t as m } from "../../../../ellipsis-vertical-BBmhzIXn.js";
+import { useTableContext as c } from "../../contexts/table.hook.js";
 import { jsx as r } from "react/jsx-runtime";
-var N = ({ numberOfRows: i, table: o }) => {
-  const { tableFetching: n, tableLoading: b } = h(), t = Array.from({ length: i });
+var y = ({ numberOfRows: i, table: o }) => {
+  const { tableLoading: n } = c(), t = Array.from({ length: i });
   return /* @__PURE__ */ r("tbody", {
-    className: "text-slate-800 text-sm font-normal relative",
-    children: t.map((g, e) => {
+    className: "kvt-skeleton text-slate-800 text-sm font-normal relative",
+    children: t.map((h, e) => {
       const d = o.getAllColumns();
       return /* @__PURE__ */ r("tr", {
         className: l("border-b", "border-b-gray-200", "bg-transparent", "last:border-b-transparent"),
@@ -25,13 +25,13 @@ var N = ({ numberOfRows: i, table: o }) => {
             "[tr:last-child_&:first-of-type]:rounded-bl-lg": e === t.length - 1 && s === 0,
             "[tr:last-child_&:last-of-type]:rounded-br-lg": e === t.length - 1 && s === d.length - 1
           }),
-          children: /* @__PURE__ */ r(m, {
+          children: /* @__PURE__ */ r(b, {
             variant: "link",
             shape: "circle",
             size: "large",
             disabled: !0,
             "aria-hidden": "true",
-            children: /* @__PURE__ */ r(c, { className: l("w-5", "h-5", "text-slate-400", "dark:text-metal-700", { "text-gray-300 animate-pulse": n || b }) })
+            children: /* @__PURE__ */ r(m, { className: l("w-5", "h-5", "text-slate-400", "dark:text-metal-700", { "text-gray-300 animate-pulse": n }) })
           })
         }, `skeleton-${a.id}`))
       }, `skeleton-row-${e}`);
@@ -39,5 +39,5 @@ var N = ({ numberOfRows: i, table: o }) => {
   });
 };
 export {
-  N as Skeleton
+  y as Skeleton
 };