@konstructio/ui 0.1.2-alpha.99 → 0.1.4

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 p, 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), m = T(!1), h = r(() => {
+    clearTimeout(u.current), n(!0);
+  }, [n]), o = r(() => {
+    clearTimeout(u.current), n(!1);
+  }, [n]), y = r(() => {
+    m.current = !0, o();
+  }, [o]), w = r(() => {
+    clearTimeout(u.current), u.current = setTimeout(() => {
+      n(!1);
+    }, 100);
+  }, [n]), L = r((t) => {
+    !c || m.current || t.pointerType !== "mouse" || h();
+  }, [h, c]), M = r((t) => {
+    !c || t.pointerType !== "mouse" || w();
+  }, [c, w]), P = r(() => {
+    m.current = !1;
+  }, []), v = r((t) => {
+    g.current = t.pointerType;
+  }, []), C = r(() => {
+    const t = g.current;
+    if (g.current = null, m.current = !1, clearTimeout(u.current), c && t === "mouse") {
+      n(!0);
+      return;
+    }
+    n((e) => !e);
+  }, [c, n]);
+  p(() => () => {
+    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]), p(() => {
+    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("pointerdown", 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: C,
+    handleTriggerPointerDown: v,
+    handleButtonPointerLeave: P,
+    openMenu: h,
+    selectAndClose: y
+  };
+};
+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,72 +1,80 @@
-import { t as r } from "../../../../utils-COaoD3PI.js";
-import { n as A } from "../../../../table.provider-BPlFpIAe.js";
-import { useTableContext as B } from "../../contexts/table.hook.js";
-import { Skeleton as H } from "../Skeleton/Skeleton.js";
-import { ExpandableRow as L } from "../ExpandableRow/ExpandableRow.js";
-import { Fragment as M } from "react";
-import { jsx as e, jsxs as O } from "react/jsx-runtime";
-var W = ({ isLoading: h, showPagination: l, emptyState: p }) => {
-  const { table: m, pageSize: k, tableFetching: N, enableExpandedRow: w, classNameExpandedRow: R, classNameExpandedCell: E, classNameExpandedContent: v, enableHoverRow: g, classNameHoverRow: C, classNameActiveExpandedRow: y, renderExpandedRow: u, isBorderOnAdjacentCell: D, isExpandColumnVisible: j } = B();
-  if (h || N) return /* @__PURE__ */ e(H, {
-    numberOfRows: k,
-    table: m
+import { n as X } from "../../../../table.provider-Dhs7WtwK.js";
+import { Skeleton as Y } from "../Skeleton/Skeleton.js";
+import { t as a } from "../../../../utils-DnIJruo0.js";
+import { BORDER_EDGE_CLASSES as Z, HIDE_BELOW_CLASS as $, ROUNDED_BOTTOM_EDGE_CLASSES as I } from "../../constants/responsive.js";
+import { useTableContext as ee } from "../../contexts/table.hook.js";
+import { useDisplayedColumnCount as te } from "../../hooks/useDisplayedColumnCount/useDisplayedColumnCount.js";
+import { getPinnedCellProps as re } from "../../utils/pinned-columns/pinned-columns.js";
+import { getResponsiveEdgeClasses as N } from "../../utils/responsive-edges/responsive-edges.js";
+import { isPaginationBarVisible as ae } from "../../utils/pagination.js";
+import { ExpandableRow as oe } from "../ExpandableRow/ExpandableRow.js";
+import { Fragment as ne } from "react";
+import { jsx as e, jsxs as se } from "react/jsx-runtime";
+var Ee = ({ isLoading: D, showPagination: _, emptyState: B, errorState: l }) => {
+  const { table: i, pageSize: S, totalItems: L = -1 / 0, tableLoading: O, tableError: g, enableExpandedRow: A, classNameExpandedRow: j, classNameExpandedCell: z, classNameExpandedContent: P, enableHoverRow: E, classNameHoverRow: V, classNameActiveExpandedRow: H, renderExpandedRow: k, isBorderOnAdjacentCell: M, isExpandColumnVisible: T, pinnedWidths: F } = ee(), [G, W] = te();
+  if (D || O) return /* @__PURE__ */ e(Y, {
+    numberOfRows: S,
+    table: i
   });
-  const a = m.getRowModel().rows ?? [];
-  if (a.length === 0 && p) {
-    const n = m.getVisibleLeafColumns().length;
+  const t = i.getRowModel().rows ?? [], d = _ && ae(L), w = t.length === 0 && !!g && !!l, C = t.length > 0 ? null : g && l ? typeof l == "function" ? l(g) : l : B ?? null;
+  if (C) {
+    const m = W ?? i.getVisibleLeafColumns().length;
     return /* @__PURE__ */ e("tbody", {
-      className: r("text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
+      ref: G,
+      className: a("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: a(w ? "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": w ? !0 : void 0,
         children: /* @__PURE__ */ e("td", {
-          colSpan: n,
-          className: r("p-0", "bg-white", "dark:bg-metal-900", "dark:border", "dark:border-metal-700", "rounded-b-lg"),
+          colSpan: m,
+          className: a("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: C
           })
         })
       })
     });
   }
   return /* @__PURE__ */ e("tbody", {
-    className: r("text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
-    children: a.map((n, c) => {
-      const { id: b, original: i, getVisibleCells: z } = n, { meta: o = {} } = i, s = z(), t = w && n.getIsExpanded(), F = !!o.expandedRow || !!u, x = s[0]?.column.id !== "__expand" || j ? 0 : D ? 1 : null;
-      return /* @__PURE__ */ O(M, { 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", o.className),
-        "data-row-id": b,
-        ...o.attributes ?? {},
-        children: s.map(({ id: S, column: d, getContext: V }, f) => {
-          const _ = typeof d.columnDef.meta?.className == "function" ? d.columnDef.meta?.className(i) : d.columnDef.meta?.className;
+    className: a("kvt-body", "text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
+    children: t.map((m, c) => {
+      const { id: f, original: u, getVisibleCells: U } = m, { meta: p = {} } = u, o = U(), n = A && m.getIsExpanded(), q = !!p.expandedRow || !!k, h = o.map(({ column: x }) => x.columnDef.meta?.hideBelow), s = h.some(Boolean) && o[0]?.column.id !== "__expand", J = c === t.length - 1 && !d && !n, R = o[0]?.column.id !== "__expand" || T ? 0 : M ? 1 : null;
+      return /* @__PURE__ */ se(ne, { children: [/* @__PURE__ */ e("tr", {
+        className: a("kvt-row", { "group/row": E }, "border-b", "border-b-gray-200", "dark:text-metal-50", "dark:border-b-metal-700", "bg-transparent", p.className),
+        "data-row-id": f,
+        ...p.attributes ?? {},
+        children: o.map(({ id: x, column: r, getContext: K }, b) => {
+          const Q = typeof r.columnDef.meta?.className == "function" ? r.columnDef.meta?.className(u) : r.columnDef.meta?.className, { hideBelow: v } = r.columnDef.meta ?? {}, y = re(i, r, F);
           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", y)]: !!t
-            }, C, _, {
-              "rounded-bl-lg": c === a.length - 1 && x !== null && f === x && !l && !t,
-              "rounded-br-lg": c === a.length - 1 && f === s.length - 1 && !l && !t,
-              "dark:[tr:last-child_&]:border-b": !l
+            style: y.style,
+            className: a("kvt-cell", "px-4", "py-1", "text-sm", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", !s && "dark:first:border-l", !s && "dark:last:border-r", s && N(h, b, Z), s && J && N(h, b, I), "[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": E,
+              [a("bg-zinc-100 dark:bg-metal-800", H)]: !!n
+            }, V, y.className, v && $[v], Q, {
+              "rounded-bl-lg": !s && c === t.length - 1 && R !== null && b === R && !d && !n,
+              "rounded-br-lg": !s && c === t.length - 1 && b === o.length - 1 && !d && !n,
+              "dark:[tr:last-child_&]:border-b": !d
             }),
-            "data-expanded": t ? !0 : void 0,
-            ...d.columnDef.meta?.attributes ?? {},
-            children: A(d.columnDef.cell, V())
-          }, S);
+            "data-expanded": n ? !0 : void 0,
+            ...r.columnDef.meta?.attributes ?? {},
+            children: X(r.columnDef.cell, K())
+          }, x);
         })
-      }), F && /* @__PURE__ */ e(L, {
-        classNameExpandedCell: E,
-        classNameExpandedContent: v,
-        classNameExpandedRow: R,
-        colSpan: s.length,
-        id: b,
-        isExpanded: !!t,
-        isLastRow: c === a.length - 1 && !l,
-        children: o.expandedRow ?? u?.(i)
-      })] }, b);
+      }), q && /* @__PURE__ */ e(oe, {
+        classNameExpandedCell: z,
+        classNameExpandedContent: P,
+        classNameExpandedRow: j,
+        colSpan: o.length,
+        id: f,
+        isExpanded: !!n,
+        isLastRow: c === t.length - 1 && !d,
+        children: p.expandedRow ?? k?.(u)
+      })] }, f);
     })
   });
 };
 export {
-  W as Body
+  Ee as Body
 };

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

@@ -1,103 +1,105 @@
-import { t as p } from "../../../../utils-COaoD3PI.js";
-import { t as d } from "../../../../chevron-left-CeJrJR0U.js";
-import { t as m } from "../../../../chevron-right-BFOnP164.js";
-import { useTableContext as h } from "../../contexts/table.hook.js";
+import { t as m } from "../../../../chevron-left-B1zWfqll.js";
+import { t as f } from "../../../../chevron-right-D4OkgIIT.js";
+import { t as p } from "../../../../utils-DnIJruo0.js";
+import { useTableContext as g } from "../../contexts/table.hook.js";
 import { memo as u } from "react";
-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", {
+import { jsx as i, jsxs as d } from "react/jsx-runtime";
+var a = u(({ index: t, currentPage: e, handlePage: n }) => /* @__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 }),
+  onClick: () => n(t),
+  className: p("inline-flex items-center justify-center px-2.5 py-1 rounded-lg text-blue-600 cursor-pointer dark:text-aurora-500 outline-none focus-visible:ring-1 focus-visible:ring-aurora-500", "tap-target pointer-coarse:min-h-11 pointer-coarse:min-w-11 active:bg-blue-50 dark:active:bg-metal-700", { "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", {
+a.displayName = "KonstructPageButton";
+var l = 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", {
+l.displayName = "KonstructEllipsis";
+var o = u(({ direction: t, disabled: e, onClick: n }) => /* @__PURE__ */ i("li", {
   className: "flex items-center justify-center",
   children: /* @__PURE__ */ i("button", {
-    onClick: s,
+    type: "button",
+    className: "flex items-center justify-center rounded outline-none focus-visible:ring-1 focus-visible:ring-aurora-500 tap-target pointer-coarse:min-h-11 pointer-coarse:min-w-11",
+    onClick: n,
     disabled: e,
-    children: /* @__PURE__ */ i(t === "left" ? d : m, { className: p("h-6 w-6 cursor-pointer", {
+    children: /* @__PURE__ */ i(t === "left" ? m : f, { 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", {
+var N = () => {
+  const { totalPages: t, page: e, handlePage: n } = g();
+  return /* @__PURE__ */ d("ul", {
     className: "flex items-center gap-2",
     children: [
       /* @__PURE__ */ i(o, {
         direction: "left",
-        onClick: () => s(e - 1),
+        onClick: () => n(e - 1),
         disabled: e === 0
       }),
       (() => {
-        if (t <= 5) return Array.from({ length: t }, (r, c) => /* @__PURE__ */ i(l, {
+        if (t <= 5) return Array.from({ length: t }, (r, c) => /* @__PURE__ */ i(a, {
           index: c,
           currentPage: e,
-          handlePage: s
+          handlePage: n
         }, c));
-        const a = [];
+        const s = [];
         if (e < 3) {
-          for (let r = 0; r < 3; r++) a.push(/* @__PURE__ */ i(l, {
+          for (let r = 0; r < 3; r++) s.push(/* @__PURE__ */ i(a, {
             index: r,
             currentPage: e,
-            handlePage: s
+            handlePage: n
           }, r));
-          a.push(/* @__PURE__ */ i(n, { keyValue: "ellipsis" }, "ellipsis"));
-          for (let r = t - 2; r < t; r++) a.push(/* @__PURE__ */ i(l, {
+          s.push(/* @__PURE__ */ i(l, { keyValue: "ellipsis" }, "ellipsis"));
+          for (let r = t - 2; r < t; r++) s.push(/* @__PURE__ */ i(a, {
             index: r,
             currentPage: e,
-            handlePage: s
+            handlePage: n
           }, r));
         } else if (e >= t - 5) {
-          a.push(/* @__PURE__ */ i(l, {
+          s.push(/* @__PURE__ */ i(a, {
             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, {
+            handlePage: n
+          }, 0)), t > 6 && s.push(/* @__PURE__ */ i(l, { keyValue: "ellipsis" }, "ellipsis"));
+          for (let r = Math.max(1, t - 5); r < t; r++) s.push(/* @__PURE__ */ i(a, {
             index: r,
             currentPage: e,
-            handlePage: s
+            handlePage: n
           }, r));
         } else {
-          a.push(/* @__PURE__ */ i(l, {
+          s.push(/* @__PURE__ */ i(a, {
             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, {
+            handlePage: n
+          }, 0)), e > 3 && s.push(/* @__PURE__ */ i(l, { keyValue: "ellipsis1" }, "ellipsis1"));
+          for (let r = e - 1; r <= e + 1; r++) r > 0 && r < t - 1 && s.push(/* @__PURE__ */ i(a, {
             index: r,
             currentPage: e,
-            handlePage: s
+            handlePage: n
           }, r));
-          e < t - 4 && a.push(/* @__PURE__ */ i(n, { keyValue: "ellipsis2" }, "ellipsis2")), a.push(/* @__PURE__ */ i(l, {
+          e < t - 4 && s.push(/* @__PURE__ */ i(l, { keyValue: "ellipsis2" }, "ellipsis2")), s.push(/* @__PURE__ */ i(a, {
             index: t - 1,
             currentPage: e,
-            handlePage: s
+            handlePage: n
           }, t - 1));
         }
-        return a;
+        return s;
       })(),
       /* @__PURE__ */ i(o, {
         direction: "right",
-        onClick: () => s(e + 1),
+        onClick: () => n(e + 1),
         disabled: e >= t - 1
       })
     ]
   });
 };
 export {
-  v as DotPaginate
+  N as DotPaginate
 };

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 { a as u, i as v, r as b, t as w } from "../../../../dist-DPLBSjtu.js";
+import { t as P } from "../../../../chevron-up-B8hiVgxZ.js";
+import { listVariants as S } from "../../../Select/components/List/List.variants.js";
+import { listItemVariants as k } from "../../../Select/components/ListItem/ListItem.variants.js";
+import { selectVariants as N } from "../../../Select/Select.variants.js";
+import { Typography as c } from "../../../Typography/Typography.js";
+import { t as o } from "../../../../utils-DnIJruo0.js";
+import { DEFAULT_PAGE_SIZES as C } from "../../constants/pagination.js";
+import { useTableContext as y } from "../../contexts/table.hook.js";
+import { useState as z } from "react";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+var _ = ({ pageSizes: d = C, isListPortal: f = !1, direction: s = "auto" }) => {
+  const { pageSize: i, onPageSize: g, handlePage: h } = y(), [l, n] = z(!1), p = (t) => {
+    g(Number(t)), h(0), n(!1);
+  }, m = /* @__PURE__ */ e(b, {
+    asChild: !0,
+    side: s === "up" ? "top" : "bottom",
+    avoidCollisions: s === "auto",
+    align: "start",
+    sideOffset: 4,
+    onOpenAutoFocus: (t) => {
+      t.preventDefault();
+    },
+    children: /* @__PURE__ */ e("ul", {
+      role: "listbox",
+      "aria-label": "Rows per page",
+      className: o(S(), "kvt-page-size-list", "static top-auto mt-0 z-50 w-(--radix-popover-trigger-width)"),
+      children: d.map((t) => {
+        const a = String(t);
+        return /* @__PURE__ */ e("li", {
+          role: "option",
+          "aria-selected": a === String(i),
+          tabIndex: 0,
+          className: o(k(), "dark:bg-metal-800"),
+          onClick: () => {
+            p(a);
+          },
+          onKeyDown: (x) => {
+            x.key === "Enter" && p(a);
+          },
+          children: /* @__PURE__ */ e(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__ */ e("span", { children: "Show" }), /* @__PURE__ */ r(w, {
+      open: l,
+      onOpenChange: n,
+      children: [/* @__PURE__ */ r(u, {
+        "aria-label": "Rows per page",
+        className: o(N(), "w-22 bg-white"),
+        children: [/* @__PURE__ */ e(c, {
+          variant: "body2",
+          className: "flex-1 text-left text-sm text-metal-800 dark:text-metal-50",
+          children: i
+        }), /* @__PURE__ */ e(P, {
+          "data-state": l ? "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__ */ e(v, { children: m }) : m]
     })]
   });
 };
 export {
-  u as DropdownPaginate
+  _ as DropdownPaginate
 };

package/dist/components/VirtualizedTable/components/EmptyResults/EmptyResults.js

@@ -0,0 +1,30 @@
+import { Button as n } from "../../../Button/Button.js";
+import { useTableContext as l } from "../../contexts/table.hook.js";
+import { sendResetFiltersEvent as p } from "../../events/filters/filters.js";
+import { EmptyState as c } from "../EmptyState/EmptyState.js";
+import { Fragment as d, jsx as e, jsxs as u } from "react/jsx-runtime";
+var f = ({ className: r, description: s = "Filters may be too restrictive.", image: o, resetLabel: a = "Reset filters", title: i = "No results", onResetFilters: t }) => {
+  const { tableId: m } = l();
+  return /* @__PURE__ */ e(c, {
+    className: r,
+    image: o,
+    title: i,
+    description: /* @__PURE__ */ u(d, { children: [s, /* @__PURE__ */ e(n, {
+      variant: "link",
+      appearance: "compact",
+      className: "p-0",
+      onClick: () => {
+        if (t) {
+          t();
+          return;
+        }
+        p(m);
+      },
+      children: a
+    })] })
+  });
+};
+f.displayName = "KonstructVirtualizedTableEmptyResults";
+export {
+  f as EmptyResults
+};

package/dist/components/VirtualizedTable/components/EmptyState/EmptyState.js

@@ -0,0 +1,32 @@
+import { Typography as l } from "../../../Typography/Typography.js";
+import { t as c } from "../../../../utils-DnIJruo0.js";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+var n = ({ action: t, className: s, description: a, image: r, title: m }) => /* @__PURE__ */ i("div", {
+  className: c("flex flex-col items-center gap-4 px-4 py-20 text-center", s),
+  children: [
+    r && /* @__PURE__ */ e("div", {
+      className: "flex items-center justify-center",
+      children: r
+    }),
+    /* @__PURE__ */ e(l, {
+      variant: "subtitle3",
+      component: "h2",
+      className: "text-slate-800 dark:text-metal-50",
+      children: m
+    }),
+    a && /* @__PURE__ */ e(l, {
+      variant: "body2",
+      component: "p",
+      className: "flex flex-wrap items-center justify-center gap-1 text-slate-500 dark:text-metal-300",
+      children: a
+    }),
+    t && /* @__PURE__ */ e("div", {
+      className: "pt-2",
+      children: t
+    })
+  ]
+});
+n.displayName = "KonstructVirtualizedTableEmptyState";
+export {
+  n as EmptyState
+};

package/dist/components/VirtualizedTable/components/ErrorState/ErrorState.js

@@ -0,0 +1,35 @@
+import { AlertOutlineIcon as s } from "../../../../assets/icons/components/AlertOutline.js";
+import { Button as l } from "../../../Button/Button.js";
+import { useTableContext as d } from "../../contexts/table.hook.js";
+import { sendRefreshEvent as p } from "../../events/refresh/refresh.js";
+import { EmptyState as c } from "../EmptyState/EmptyState.js";
+import { Fragment as f, jsx as e, jsxs as h } from "react/jsx-runtime";
+var u = ({ className: t, description: a, icon: o = /* @__PURE__ */ e(s, {
+  size: 40,
+  className: "text-red-600 dark:text-red-400",
+  "aria-hidden": "true"
+}), retryLabel: n = "Refresh", title: i = "Something went wrong", onRetry: r }) => {
+  const { tableId: m } = d();
+  return /* @__PURE__ */ e(c, {
+    className: t,
+    image: o,
+    title: i,
+    description: /* @__PURE__ */ h(f, { children: [a, /* @__PURE__ */ e(l, {
+      variant: "link",
+      appearance: "compact",
+      className: "p-0",
+      onClick: () => {
+        if (r) {
+          r();
+          return;
+        }
+        p(m);
+      },
+      children: n
+    })] })
+  });
+};
+u.displayName = "KonstructVirtualizedTableErrorState";
+export {
+  u as ErrorState
+};

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

@@ -1,7 +1,7 @@
-import { t as a } from "../../../../utils-COaoD3PI.js";
+import { t as a } from "../../../../utils-DnIJruo0.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,