@konstructio/ui 0.1.3 → 0.1.4

package/dist/components/VirtualizedTable/assets/chevron-down.js

@@ -1,16 +1,16 @@
-import { jsx as o } from "react/jsx-runtime";
-var i = ({ className: e, onClick: r }) => /* @__PURE__ */ o("svg", {
+import { jsx as e } from "react/jsx-runtime";
+var o = ({ className: r }) => /* @__PURE__ */ e("svg", {
   width: "7",
   height: "5",
   viewBox: "0 0 7 5",
   fill: "none",
-  className: e,
-  onClick: r,
-  children: /* @__PURE__ */ o("path", {
+  className: r,
+  "aria-hidden": !0,
+  children: /* @__PURE__ */ e("path", {
     d: "M0.8225 0L3.5 2.67167L6.1775 0L7 0.8225L3.5 4.3225L0 0.8225L0.8225 0Z",
     fill: "currentColor"
   })
 });
 export {
-  i as default
+  o as default
 };

package/dist/components/VirtualizedTable/assets/chevron-up.js

@@ -1,16 +1,16 @@
 import { jsx as r } from "react/jsx-runtime";
-var l = ({ className: o, onClick: t }) => /* @__PURE__ */ r("svg", {
+var t = ({ className: e }) => /* @__PURE__ */ r("svg", {
   width: "7",
   height: "5",
   viewBox: "0 0 7 5",
   fill: "currentColor",
-  className: o,
-  onClick: t,
+  className: e,
+  "aria-hidden": !0,
   children: /* @__PURE__ */ r("path", {
     d: "M0.8225 4.99999L3.5 2.32832L6.1775 4.99999L7 4.17749L3.5 0.67749L0 4.17749L0.8225 4.99999Z",
     fill: "currentColor"
   })
 });
 export {
-  l as default
+  t as default
 };

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

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

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

@@ -1,103 +1,105 @@
-import { t as d } from "../../../../chevron-left-B1zWfqll.js";
-import { t as m } from "../../../../chevron-right-D4OkgIIT.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 h } from "../../contexts/table.hook.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/Filter/Filter.js

@@ -1,65 +1,68 @@
-import { o as z } from "../../../../rolldown-runtime-B28h4lGi.js";
-import { t as V } from "../../../../debounce-DhCY9mXz.js";
-import { Button as $ } from "../../../Button/Button.js";
-import { Filter as o } from "../../../Filter/Filter.js";
-import { resetEvent as G } from "../../../Filter/events/index.js";
-import { t as H } from "../../../../Input-C1Js3pbF.js";
-import { t as J } from "../../../../utils-DnIJruo0.js";
-import { useTableContext as K } from "../../contexts/table.hook.js";
-import { t as Q } from "../../../../events.types-BG1Uh8i6.js";
-import { getTableId as U } from "../../utils/get-table-id.js";
-import { useEffect as W, useMemo as X, useRef as Y } from "react";
-import { jsx as n, jsxs as d } from "react/jsx-runtime";
-var Z = /* @__PURE__ */ z(V(), 1), de = ({ id: F, actions: b, filters: v, multiSelectFilter: w, placeholder: S, showFilterInput: x = !0, showResetButton: R = !0, resetButtonClassName: D, closeOnApply: T = !0 }) => {
-  const l = Y(null), c = U(F), { termOfSearch: k, multiselectSelected: M, dateFilters: E, dateRangeFilters: _, timeFilters: j, onChangeTermOfSearch: m, onSelectMultiselect: A, onSelectDateFilter: I, onSelectDateRangeFilter: i, onSelectTimeFilter: O } = K(), B = [...v ?? w?.map((e) => ({
+import { o as U } from "../../../../rolldown-runtime-B28h4lGi.js";
+import { t as X } from "../../../../debounce-DhCY9mXz.js";
+import { Button as x } from "../../../Button/Button.js";
+import { Filter as n } from "../../../Filter/Filter.js";
+import { resetEvent as Y } from "../../../Filter/events/index.js";
+import { t as Z } from "../../../../Input-CE6J6HIW.js";
+import { t as d } from "../../../../utils-DnIJruo0.js";
+import { HIDE_BELOW_CLASS as C, SHOW_BELOW_CLASS as ee } from "../../constants/responsive.js";
+import { useTableContext as te } from "../../contexts/table.hook.js";
+import { useIsFlexWrapped as ae } from "../../hooks/useIsFlexWrapped/useIsFlexWrapped.js";
+import { t as re } from "../../../../events.types-BG1Uh8i6.js";
+import { getTableId as oe } from "../../utils/get-table-id.js";
+import { useEffect as se, useMemo as ne, useRef as D } from "react";
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+var le = /* @__PURE__ */ U(X(), 1), De = ({ id: T, actions: _, filters: O, multiSelectFilter: k, placeholder: A, showFilterInput: b = !0, showResetButton: E = !0, resetButtonClassName: B, closeOnApply: I = !0 }) => {
+  const l = D(null), v = D(null), M = ae(v), m = oe(T), { termOfSearch: j, multiselectSelected: N, dateFilters: f, dateRangeFilters: g, timeFilters: L, onChangeTermOfSearch: c, onSelectMultiselect: P, onSelectDateFilter: W, onSelectDateRangeFilter: S, onSelectTimeFilter: z } = te(), w = [...O ?? k?.map((e) => ({
     ...e,
     type: "badgeMultiSelect"
-  })) ?? [], ...b ?? []], h = (e, t) => {
-    A(e, t.map((r) => r.id));
-  }, P = () => {
-    m(""), l.current && (l.current.value = "");
+  })) ?? [], ..._ ?? []], H = w.filter((e) => e.type === "action" && !!e.iconOnlyBelow), F = (e, t) => {
+    P(e, t.map((r) => r.id));
+  }, q = () => {
+    c(""), l.current && (l.current.value = "");
   };
-  W(() => {
+  se(() => {
     const e = new AbortController();
-    return document.addEventListener(Q.RESET_FILTERS, (t) => {
+    return document.addEventListener(re.RESET_FILTERS, (t) => {
       const { detail: r } = t;
-      r.tableId === c && (m(""), l.current && (l.current.value = ""), G(c));
+      r.tableId === m && (c(""), l.current && (l.current.value = ""), Y(m));
     }, { signal: e.signal }), () => e.abort();
-  }, [c, m]);
-  const g = X(() => (0, Z.default)((e) => {
-    m(e.target.value);
-  }, 500), [m]), N = !!k || Object.values(M ?? {}).flat().length > 0 || Object.values(E ?? {}).some(Boolean) || Object.values(_ ?? {}).some(Boolean) || Object.values(j ?? {}).some(Boolean), f = (e) => {
+  }, [m, c]);
+  const V = ne(() => (0, le.default)((e) => {
+    c(e.target.value);
+  }, 500), [c]), $ = !!j || Object.values(N ?? {}).flat().length > 0 || Object.values(f ?? {}).some(Boolean) || Object.values(g ?? {}).some(Boolean) || Object.values(L ?? {}).some(Boolean), G = (e) => {
     if (e.type === "action") {
-      const { label: a, appearance: y = "compact", variant: p = "secondary", leftIcon: u, rightIcon: L, type: C, ...q } = e;
-      return /* @__PURE__ */ d($, {
-        appearance: y,
-        variant: p,
-        ...q,
+      const { label: a, appearance: p = "compact", variant: i = "secondary", leftIcon: u, rightIcon: h, iconOnlyBelow: R, className: K, type: ce, ...Q } = e;
+      return /* @__PURE__ */ y(x, {
+        appearance: p,
+        variant: i,
+        className: d(R && C[R], K),
+        ...Q,
         children: [
           u,
           a,
-          L
+          h
         ]
       }, a);
     }
-    const { key: t, label: r, position: s = "right" } = e;
-    if (e.type === "textMultiSelect") return /* @__PURE__ */ n(o.TextMultiSelect, {
+    const { key: t, label: r, position: s = M ? "left" : "right" } = e;
+    if (e.type === "textMultiSelect") return /* @__PURE__ */ o(n.TextMultiSelect, {
       label: r,
       position: s,
       options: e.options,
       onApply: (a) => {
-        h(t, a);
+        F(t, a);
       }
     }, t);
-    if (e.type === "date") return /* @__PURE__ */ n(o.DateFilterDropdown, {
+    if (e.type === "date") return /* @__PURE__ */ o(n.DateFilterDropdown, {
       label: r,
       position: s,
       countryCode: e.countryCode,
       onApply: (a) => {
-        I(t, a);
+        W(t, a);
       }
     }, t);
-    if (e.type === "dateRange") return /* @__PURE__ */ n(o.DateRangeFilterDropdown, {
+    if (e.type === "dateRange") return /* @__PURE__ */ o(n.DateRangeFilterDropdown, {
       label: r,
       position: s,
       showTime: e.showTime,
@@ -70,60 +73,74 @@ var Z = /* @__PURE__ */ z(V(), 1), de = ({ id: F, actions: b, filters: v, multiS
       maxDate: e.maxDate,
       countryCode: e.countryCode,
       onApply: (a) => {
-        i(t, a);
+        S(t, a);
       },
       onRangeChange: e.onRangeChange
     }, t);
     if (e.type === "customDateRange") {
-      const { key: a, type: y, ...p } = e;
-      return /* @__PURE__ */ n(o.CustomDateRangeFilterDropdown, {
-        ...p,
+      const { key: a, type: p, ...i } = e;
+      return /* @__PURE__ */ o(n.CustomDateRangeFilterDropdown, {
+        ...i,
         position: s,
         onApply: (u) => {
-          i(t, u);
+          S(t, u);
         }
       }, t);
     }
-    return e.type === "time" ? /* @__PURE__ */ n(o.TimeFilterDropdown, {
+    return e.type === "time" ? /* @__PURE__ */ o(n.TimeFilterDropdown, {
       label: r,
       position: s,
       format: e.format,
       presets: e.presets,
       showTimePicker: e.showTimePicker,
       onApply: (a) => {
-        O(t, a);
+        z(t, a);
       }
-    }, t) : /* @__PURE__ */ n(o.BadgeMultiSelect, {
+    }, t) : /* @__PURE__ */ o(n.BadgeMultiSelect, {
       label: r,
       position: s,
       options: e.options,
       onApply: (a) => {
-        h(t, a);
+        F(t, a);
       }
     }, t);
-  };
-  return /* @__PURE__ */ d("div", {
-    className: "kvt-filter w-full flex items-center justify-end gap-y-4 pb-6 max-md:flex-wrap",
-    children: [x && /* @__PURE__ */ n(H, {
-      ref: l,
-      placeholder: S,
-      isSearch: !0,
-      autoComplete: "false",
-      className: "kvt-search w-72 max-md:w-full",
-      inputMode: "search",
-      onChange: g
-    }), /* @__PURE__ */ d(o, {
-      className: "kvt-filter-actions max-md:w-full max-md:flex-wrap",
-      closeOnApply: T,
-      resetScope: c,
-      children: [B.map(f), R && /* @__PURE__ */ n(o.ResetButton, {
-        className: J("select-none max-md:ml-auto", D),
-        disabled: !N,
-        onClick: P
-      })]
-    })]
+  }, J = ({ label: e, variant: t = "secondary", leftIcon: r, rightIcon: s, iconOnlyBelow: a, className: p, appearance: i, type: u, ...h }) => /* @__PURE__ */ o(x, {
+    variant: t,
+    "aria-label": e,
+    className: d("relative size-10 shrink-0 p-0 pointer-coarse:min-h-10 touch-hit-area [&>svg]:size-5", a && ee[a], p),
+    ...h,
+    children: r ?? s
+  }, e);
+  return /* @__PURE__ */ y("div", {
+    ref: v,
+    className: d("kvt-filter w-full flex flex-wrap items-center gap-4 pb-6", b ? "justify-between" : "justify-end"),
+    children: [
+      b && /* @__PURE__ */ o("div", {
+        className: "kvt-search-wrapper w-60 min-w-0 max-sm:grow max-sm:basis-0",
+        children: /* @__PURE__ */ o(Z, {
+          ref: l,
+          placeholder: A,
+          isSearch: !0,
+          autoComplete: "false",
+          className: "kvt-search w-full",
+          inputMode: "search",
+          onChange: V
+        })
+      }),
+      H.map(J),
+      /* @__PURE__ */ y(n, {
+        className: "kvt-filter-actions flex-wrap gap-4 max-sm:basis-full",
+        closeOnApply: I,
+        resetScope: m,
+        children: [w.map(G), E && /* @__PURE__ */ o(n.ResetButton, {
+          className: d("select-none max-md:ml-auto", B),
+          disabled: !$,
+          onClick: q
+        })]
+      })
+    ]
   });
 };
 export {
-  de as Filter
+  De as Filter
 };

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

@@ -1,4 +1,4 @@
-import { t as s } from "../../../../Input-C1Js3pbF.js";
+import { t as s } from "../../../../Input-CE6J6HIW.js";
 import { Typography as i } from "../../../Typography/Typography.js";
 import { Button as p } from "../../../Button/Button.js";
 import { useTableContext as u } from "../../contexts/table.hook.js";