@konstructio/ui 0.1.2-alpha.107 → 0.1.2-alpha.109

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

@@ -0,0 +1,23 @@
+import { t as a } from "../../../../../../utils-B-6R7kNE.js";
+import { Button as v } from "../../../../../Button/Button.js";
+import { actionsItemVariants as x, actionsPanelVariants as N } from "../../Actions.variants.js";
+import { jsx as i } from "react/jsx-runtime";
+var V = ({ actions: n, className: o, isMenu: r = !1, rowData: m, onSelect: s }) => /* @__PURE__ */ i("div", {
+  className: a(N(), o),
+  children: n.map(({ id: e, label: t, className: c, component: p = v, componentProps: f, onClick: l }, d) => /* @__PURE__ */ i(p, {
+    className: a(x(), c),
+    variant: "link",
+    onClick: () => {
+      s?.(), l(m);
+    },
+    ...r ? {
+      role: "menuitem",
+      tabIndex: -1
+    } : {},
+    ...f,
+    children: t
+  }, e ?? (typeof t == "string" ? t : `action-${d}`)))
+});
+export {
+  V as ActionsList
+};

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

@@ -0,0 +1,26 @@
+import { t as r } from "../../../../../../utils-B-6R7kNE.js";
+import { Button as l } from "../../../../../Button/Button.js";
+import { t as m } from "../../../../../../ellipsis-vertical-BBmhzIXn.js";
+import { actionsTriggerVariants as n } from "../../Actions.variants.js";
+import { forwardRef as c } from "react";
+import { jsx as i, jsxs as p } from "react/jsx-runtime";
+var f = c(({ className: a, iconClassName: s, isOpen: t = !1, ...o }, e) => /* @__PURE__ */ p(l, {
+  ref: e,
+  type: "button",
+  variant: "link",
+  shape: "circle",
+  size: "large",
+  className: r(n({ isOpen: t }), a),
+  ...o,
+  children: [/* @__PURE__ */ i(m, {
+    "aria-hidden": "true",
+    className: r("w-7 h-7", s)
+  }), /* @__PURE__ */ i("span", {
+    className: "sr-only",
+    children: "Show Actions"
+  })]
+}));
+f.displayName = "KonstructVirtualizedTableActionsTrigger";
+export {
+  f as ActionsTrigger
+};

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

@@ -0,0 +1,48 @@
+import { t as m } from "../../../../../../utils-B-6R7kNE.js";
+import { ActionsList as E } from "../ActionsList/ActionsList.js";
+import { ActionsTrigger as I } from "../ActionsTrigger/ActionsTrigger.js";
+import "./constants/index.js";
+import { useRef as R, useState as T } from "react";
+import { jsx as e, jsxs as B } from "react/jsx-runtime";
+var M = ({ actions: i, wrapperClassName: u, triggerButtonClassName: g, iconTriggerButtonClassName: d, wrapperActionsClassName: f, wrapperContentActionsClassName: v, ...h }) => {
+  const r = R(null), [n, b] = T(!1), w = () => {
+    const o = r.current;
+    if (!o) return;
+    const s = o.getBoundingClientRect(), y = i.length * 36 + 16;
+    let l = 0, c = window.innerHeight, t = o.parentElement;
+    for (; t; ) {
+      const { overflowY: A } = window.getComputedStyle(t);
+      if ([
+        "auto",
+        "scroll",
+        "hidden"
+      ].includes(A)) {
+        const p = t.getBoundingClientRect();
+        l = p.top, c = p.bottom;
+        break;
+      }
+      t = t.parentElement;
+    }
+    const a = c - s.bottom, N = s.top - l;
+    b(a < y && N > a);
+  };
+  return /* @__PURE__ */ B("div", {
+    ref: r,
+    className: m("relative group", u),
+    onMouseEnter: w,
+    children: [/* @__PURE__ */ e(I, {
+      className: g,
+      iconClassName: d
+    }), /* @__PURE__ */ e("div", {
+      className: m("absolute", "right-0", "w-53.75", "z-10", n ? "bottom-full" : "top-full", n ? "pb-1" : "pt-1", "invisible", "opacity-0", "transition-[opacity,visibility]", "duration-150", "delay-150", "group-hover:visible", "group-hover:opacity-100", "group-hover:delay-0", "group-hover:duration-75", f),
+      children: /* @__PURE__ */ e(E, {
+        actions: i,
+        className: v,
+        rowData: h.row.original
+      })
+    })]
+  });
+};
+export {
+  M as InlineActions
+};

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

@@ -0,0 +1,5 @@
+var I = 36, r = 16;
+export {
+  I as ITEM_HEIGHT,
+  r as LIST_PADDING
+};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,72 @@
+import "../../constants/index.js";
+import { useCallback as r, useEffect as T, useLayoutEffect as M, useRef as p } from "react";
+var x = ({ isOpen: l, menuRef: s, triggerRef: d, setIsOpen: n }) => {
+  const o = p(void 0), f = p(null), h = r(() => {
+    clearTimeout(o.current), n(!0);
+  }, [n]), i = r(() => {
+    clearTimeout(o.current), n(!1);
+  }, [n]), g = r(() => {
+    clearTimeout(o.current), o.current = setTimeout(() => {
+      n(!1);
+    }, 100);
+  }, [n]), w = r((t) => {
+    t.pointerType !== "touch" && h();
+  }, [h]), E = r((t) => {
+    t.pointerType !== "touch" && g();
+  }, [g]), y = r((t) => {
+    f.current = t.pointerType;
+  }, []), v = r(() => {
+    const t = f.current;
+    if (f.current = null, clearTimeout(o.current), t && t !== "touch") {
+      n(!0);
+      return;
+    }
+    n((e) => !e);
+  }, [n]);
+  T(() => () => {
+    clearTimeout(o.current);
+  }, []);
+  const u = r(() => {
+    const t = d.current, e = s.current;
+    if (!t || !e) return;
+    const c = t.getBoundingClientRect(), a = c.bottom + 4 + e.offsetHeight <= window.innerHeight ? c.bottom + 4 : c.top - 4 - e.offsetHeight;
+    e.style.top = `${Math.round(Math.max(a, 4))}px`, e.style.left = `${Math.round(Math.max(c.right - e.offsetWidth, 4))}px`;
+  }, [s, d]);
+  return M(() => {
+    l && u();
+  }, [l, u]), T(() => {
+    if (!l) return;
+    const t = new AbortController(), e = (a) => {
+      const m = a.target;
+      d.current?.contains(m) || s.current?.contains(m) || i();
+    }, c = (a) => {
+      a.key === "Escape" && i();
+    };
+    return document.addEventListener("mousedown", e, { signal: t.signal }), document.addEventListener("keydown", c, { signal: t.signal }), document.addEventListener("scroll", u, {
+      signal: t.signal,
+      capture: !0,
+      passive: !0
+    }), window.addEventListener("resize", u, {
+      signal: t.signal,
+      passive: !0
+    }), window.addEventListener("blur", i, { signal: t.signal }), () => {
+      t.abort();
+    };
+  }, [
+    l,
+    s,
+    d,
+    i,
+    u
+  ]), {
+    closeMenu: i,
+    handlePointerEnter: w,
+    handlePointerLeave: E,
+    handleTriggerClick: v,
+    handleTriggerPointerDown: y,
+    openMenu: h
+  };
+};
+export {
+  x 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,4 +1,4 @@
-import { t as r } from "../../../../utils-B-6R7kNE.js";
+import { t } from "../../../../utils-B-6R7kNE.js";
 import { n as I } from "../../../../table.provider-CWzODR1t.js";
 import { useTableContext as T } from "../../contexts/table.hook.js";
 import { isPaginationBarVisible as q } from "../../utils/pagination.js";
@@ -6,24 +6,24 @@ import { Skeleton as G } from "../Skeleton/Skeleton.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();
+var te = ({ isLoading: v, showPagination: N, emptyState: y, errorState: a }) => {
+  const { table: m, pageSize: E, totalItems: R = -1 / 0, tableLoading: C, tableError: c, enableExpandedRow: D, classNameExpandedRow: _, classNameExpandedCell: j, classNameExpandedContent: z, enableHoverRow: u, classNameHoverRow: B, classNameActiveExpandedRow: V, renderExpandedRow: f, isBorderOnAdjacentCell: L, isExpandColumnVisible: A } = T();
   if (v || C) return /* @__PURE__ */ e(G, {
     numberOfRows: E,
     table: m
   });
-  const t = m.getRowModel().rows ?? [], l = N && q(R), x = t.length === 0 && !!c && !!a, h = t.length > 0 ? null : c && a ? typeof a == "function" ? a(c) : a : y ?? null;
+  const r = m.getRowModel().rows ?? [], d = N && q(R), x = r.length === 0 && !!c && !!a, h = r.length > 0 ? null : c && a ? typeof a == "function" ? a(c) : a : y ?? null;
   if (h) {
-    const d = m.getVisibleLeafColumns().length;
+    const l = m.getVisibleLeafColumns().length;
     return /* @__PURE__ */ e("tbody", {
-      className: r("kvt-body", "text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
+      className: t("kvt-body", "text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
       children: /* @__PURE__ */ e("tr", {
-        className: r(x ? "kvt-error-row" : "kvt-empty-row", "border-b", "border-b-gray-200", "dark:border-b-metal-700", "bg-transparent"),
+        className: t(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"),
+          colSpan: l,
+          className: t("p-0", "bg-white", "dark:bg-metal-900", "dark:border", "dark:border-metal-700", "rounded-b-lg"),
           children: /* @__PURE__ */ e("div", {
             className: "flex items-center justify-center",
             children: h
@@ -33,23 +33,23 @@ var re = ({ isLoading: v, showPagination: N, emptyState: y, errorState: a }) =>
     });
   }
   return /* @__PURE__ */ e("tbody", {
-    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;
+    className: t("kvt-body", "text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
+    children: r.map((l, b) => {
+      const { id: p, original: g, getVisibleCells: F } = l, { meta: s = {} } = g, i = F(), n = D && l.getIsExpanded(), H = !!s.expandedRow || !!f, k = i[0]?.column.id !== "__expand" || A ? 0 : L ? 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),
+        className: t("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("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", {
+            className: t("kvt-cell", "px-4", "py-1", "text-sm", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", "[tr[data-actions-open]_&]:bg-zinc-100", "dark:[tr[data-actions-open]_&]:bg-metal-800", {
               "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": 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
+              [t("bg-zinc-100 dark:bg-metal-800", V)]: !!n
+            }, B, P, {
+              "rounded-bl-lg": b === r.length - 1 && k !== null && w === k && !d && !n,
+              "rounded-br-lg": b === r.length - 1 && w === i.length - 1 && !d && !n,
+              "dark:[tr:last-child_&]:border-b": !d
             }),
             "data-expanded": n ? !0 : void 0,
             ...o.columnDef.meta?.attributes ?? {},
@@ -57,18 +57,18 @@ var re = ({ isLoading: v, showPagination: N, emptyState: y, errorState: a }) =>
           }, M);
         })
       }), H && /* @__PURE__ */ e(J, {
-        classNameExpandedCell: B,
-        classNameExpandedContent: V,
-        classNameExpandedRow: j,
+        classNameExpandedCell: j,
+        classNameExpandedContent: z,
+        classNameExpandedRow: _,
         colSpan: i.length,
         id: p,
         isExpanded: !!n,
-        isLastRow: b === t.length - 1 && !l,
+        isLastRow: b === r.length - 1 && !d,
         children: s.expandedRow ?? f?.(g)
       })] }, p);
     })
   });
 };
 export {
-  re as Body
+  te as Body
 };

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

@@ -1,33 +1,33 @@
 import { t as o } from "../../../../utils-B-6R7kNE.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-BnCbAI-c.js";
+import { a as b, i as v, n as w, r as S } from "../../../../dist-ByCJijZd.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";
+import { jsx as e, 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, {
+  const { pageSize: i, onPageSize: g, handlePage: h } = z(), [n, l] = O(!1), m = (t) => {
+    g(Number(t)), h(0), l(!1);
+  }, p = /* @__PURE__ */ e(w, {
     asChild: !0,
     side: s === "up" ? "top" : "bottom",
     avoidCollisions: s === "auto",
     align: "start",
     sideOffset: 4,
-    onOpenAutoFocus: (e) => {
-      e.preventDefault();
+    onOpenAutoFocus: (t) => {
+      t.preventDefault();
     },
-    children: /* @__PURE__ */ t("ul", {
+    children: /* @__PURE__ */ e("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", {
+      children: d.map((t) => {
+        const a = String(t);
+        return /* @__PURE__ */ e("li", {
           role: "option",
           "aria-selected": a === String(i),
           tabIndex: 0,
@@ -38,7 +38,7 @@ var _ = ({ pageSizes: d = y, isListPortal: f = !1, direction: s = "auto" }) => {
           onKeyDown: (x) => {
             x.key === "Enter" && m(a);
           },
-          children: /* @__PURE__ */ t(c, {
+          children: /* @__PURE__ */ e(c, {
             variant: "body2",
             className: "text-sm dark:text-metal-50",
             children: a
@@ -49,21 +49,21 @@ var _ = ({ pageSizes: d = y, isListPortal: f = !1, direction: s = "auto" }) => {
   });
   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, {
+    children: [/* @__PURE__ */ e("span", { children: "Show" }), /* @__PURE__ */ r(v, {
       open: n,
       onOpenChange: l,
       children: [/* @__PURE__ */ r(b, {
         "aria-label": "Rows per page",
         className: o(C(), "w-22 bg-white"),
-        children: [/* @__PURE__ */ t(c, {
+        children: [/* @__PURE__ */ e(c, {
           variant: "body2",
           className: "flex-1 text-left text-sm text-metal-800 dark:text-metal-50",
           children: i
-        }), /* @__PURE__ */ t(u, {
+        }), /* @__PURE__ */ e(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]
+      }), f ? /* @__PURE__ */ e(S, { children: p }) : p]
     })]
   });
 };