@konstructio/ui 0.1.2-alpha.119 → 0.1.2-alpha.120

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

@@ -1,66 +1,66 @@
-import { o as V } from "../../../../rolldown-runtime-Dw9YIBcH.js";
-import { t as $ } from "../../../../Input-2M2I_H60.js";
-import { t as G } from "../../../../utils-DnIJruo0.js";
-import { Button as H } from "../../../Button/Button.js";
-import { resetEvent as J } from "../../../Filter/events/index.js";
-import { Filter as a } from "../../../Filter/Filter.js";
-import { t as K } from "../../../../debounce-dMRJxNsT.js";
-import { useTableContext as Q } from "../../contexts/table.hook.js";
-import { t as U } from "../../../../events.types-BG1Uh8i6.js";
-import { getTableId as W } from "../../utils/get-table-id.js";
-import { useEffect as X, useMemo as Y, useRef as Z } from "react";
-import { jsx as n, jsxs as i } from "react/jsx-runtime";
-var f = /* @__PURE__ */ V(K(), 1), ie = ({ id: F, actions: b, filters: v, multiSelectFilter: S, placeholder: R, showFilterInput: D = !0, showResetButton: w = !0, resetButtonClassName: T, closeOnApply: k = !0 }) => {
-  const l = Z(null), m = W(F), { termOfSearch: x, multiselectSelected: M, dateFilters: E, dateRangeFilters: _, timeFilters: j, onChangeTermOfSearch: c, onSelectMultiselect: A, onSelectDateFilter: I, onSelectDateRangeFilter: d, onSelectTimeFilter: O } = Q(), B = [...v ?? S?.map((e) => ({
+import { o as z } from "../../../../rolldown-runtime-B28h4lGi.js";
+import { t as V } from "../../../../Input-O2bqyJKW.js";
+import { t as $ } from "../../../../utils-DnIJruo0.js";
+import { Button as G } from "../../../Button/Button.js";
+import { resetEvent as H } from "../../../Filter/events/index.js";
+import { Filter as o } from "../../../Filter/Filter.js";
+import { t as J } from "../../../../debounce-DhCY9mXz.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(J(), 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) => ({
     ...e,
     type: "badgeMultiSelect"
   })) ?? [], ...b ?? []], h = (e, t) => {
-    A(e, t.map((o) => o.id));
+    A(e, t.map((r) => r.id));
   }, P = () => {
-    c(""), l.current && (l.current.value = "");
+    m(""), l.current && (l.current.value = "");
   };
-  X(() => {
+  W(() => {
     const e = new AbortController();
-    return document.addEventListener(U.RESET_FILTERS, (t) => {
-      const { detail: o } = t;
-      o.tableId === m && (c(""), l.current && (l.current.value = ""), J(m));
+    return document.addEventListener(Q.RESET_FILTERS, (t) => {
+      const { detail: r } = t;
+      r.tableId === c && (m(""), l.current && (l.current.value = ""), H(c));
     }, { signal: e.signal }), () => e.abort();
-  }, [m, c]);
-  const N = Y(() => (0, f.default)((e) => {
-    c(e.target.value);
-  }, 500), [c]), g = !!x || Object.values(M ?? {}).flat().length > 0 || Object.values(E ?? {}).some(Boolean) || Object.values(_ ?? {}).some(Boolean) || Object.values(j ?? {}).some(Boolean), L = (e) => {
+  }, [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) => {
     if (e.type === "action") {
-      const { label: r, appearance: y = "compact", variant: p = "secondary", leftIcon: u, rightIcon: q, type: C, ...z } = e;
-      return /* @__PURE__ */ i(H, {
+      const { label: a, appearance: y = "compact", variant: p = "secondary", leftIcon: u, rightIcon: L, type: C, ...q } = e;
+      return /* @__PURE__ */ d(G, {
         appearance: y,
         variant: p,
-        ...z,
+        ...q,
         children: [
           u,
-          r,
-          q
+          a,
+          L
         ]
-      }, r);
+      }, a);
     }
-    const { key: t, label: o, position: s = "right" } = e;
-    if (e.type === "textMultiSelect") return /* @__PURE__ */ n(a.TextMultiSelect, {
-      label: o,
+    const { key: t, label: r, position: s = "right" } = e;
+    if (e.type === "textMultiSelect") return /* @__PURE__ */ n(o.TextMultiSelect, {
+      label: r,
       position: s,
       options: e.options,
-      onApply: (r) => {
-        h(t, r);
+      onApply: (a) => {
+        h(t, a);
       }
     }, t);
-    if (e.type === "date") return /* @__PURE__ */ n(a.DateFilterDropdown, {
-      label: o,
+    if (e.type === "date") return /* @__PURE__ */ n(o.DateFilterDropdown, {
+      label: r,
       position: s,
       countryCode: e.countryCode,
-      onApply: (r) => {
-        I(t, r);
+      onApply: (a) => {
+        I(t, a);
       }
     }, t);
-    if (e.type === "dateRange") return /* @__PURE__ */ n(a.DateRangeFilterDropdown, {
-      label: o,
+    if (e.type === "dateRange") return /* @__PURE__ */ n(o.DateRangeFilterDropdown, {
+      label: r,
       position: s,
       showTime: e.showTime,
       timeFormat: e.timeFormat,
@@ -69,61 +69,61 @@ var f = /* @__PURE__ */ V(K(), 1), ie = ({ id: F, actions: b, filters: v, multiS
       minDate: e.minDate,
       maxDate: e.maxDate,
       countryCode: e.countryCode,
-      onApply: (r) => {
-        d(t, r);
+      onApply: (a) => {
+        i(t, a);
       },
       onRangeChange: e.onRangeChange
     }, t);
     if (e.type === "customDateRange") {
-      const { key: r, type: y, ...p } = e;
-      return /* @__PURE__ */ n(a.CustomDateRangeFilterDropdown, {
+      const { key: a, type: y, ...p } = e;
+      return /* @__PURE__ */ n(o.CustomDateRangeFilterDropdown, {
         ...p,
         position: s,
         onApply: (u) => {
-          d(t, u);
+          i(t, u);
         }
       }, t);
     }
-    return e.type === "time" ? /* @__PURE__ */ n(a.TimeFilterDropdown, {
-      label: o,
+    return e.type === "time" ? /* @__PURE__ */ n(o.TimeFilterDropdown, {
+      label: r,
       position: s,
       format: e.format,
       presets: e.presets,
       showTimePicker: e.showTimePicker,
-      onApply: (r) => {
-        O(t, r);
+      onApply: (a) => {
+        O(t, a);
       }
-    }, t) : /* @__PURE__ */ n(a.BadgeMultiSelect, {
-      label: o,
+    }, t) : /* @__PURE__ */ n(o.BadgeMultiSelect, {
+      label: r,
       position: s,
       options: e.options,
-      onApply: (r) => {
-        h(t, r);
+      onApply: (a) => {
+        h(t, a);
       }
     }, t);
   };
-  return /* @__PURE__ */ i("div", {
-    className: "kvt-filter w-full flex items-center justify-end pb-6",
-    children: [D && /* @__PURE__ */ n($, {
+  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(V, {
       ref: l,
-      placeholder: R,
+      placeholder: S,
       isSearch: !0,
       autoComplete: "false",
-      className: "kvt-search w-72",
+      className: "kvt-search w-72 max-md:w-full",
       inputMode: "search",
-      onChange: N
-    }), /* @__PURE__ */ i(a, {
-      className: "kvt-filter-actions",
-      closeOnApply: k,
-      resetScope: m,
-      children: [B.map(L), w && /* @__PURE__ */ n(a.ResetButton, {
-        className: G("select-none", T),
-        disabled: !g,
+      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: $("select-none max-md:ml-auto", D),
+        disabled: !N,
         onClick: P
       })]
     })]
   });
 };
 export {
-  ie as Filter
+  de as Filter
 };

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

@@ -1,4 +1,4 @@
-import { t as s } from "../../../../Input-2M2I_H60.js";
+import { t as s } from "../../../../Input-O2bqyJKW.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";

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

@@ -1,53 +1,60 @@
 import { t } from "../../../../utils-DnIJruo0.js";
-import { useTableContext as g } from "../../contexts/table.hook.js";
-import { n as k } from "../../../../table.provider-CzfMGbe4.js";
-import u from "../../assets/chevron-up.js";
-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 } = g(), p = (a) => {
+import { HIDE_BELOW_CLASS as N } from "../../constants/responsive.js";
+import { useTableContext as w } from "../../contexts/table.hook.js";
+import { getPinnedCellProps as y } from "../../utils/pinned-columns/pinned-columns.js";
+import { n as P } from "../../../../table.provider-QUo2buYX.js";
+import D from "../../assets/chevron-up.js";
+import H from "../../assets/chevron-down.js";
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+var G = ({ className: p, classNameArrows: f, classNameActiveArrows: l, classNameHeaderContent: h }) => {
+  const { table: o, headerContent: d, onSorting: n, pinnedWidths: x, getPinnedHeaderRef: b } = w(), g = (a) => {
     n([{
       id: a.id,
       desc: !1
     }]);
-  }, x = (a) => {
+  }, k = (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),
+  return /* @__PURE__ */ s("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", p),
     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),
+        colSpan: o.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", h),
         children: d
       })
-    }), s.getHeaderGroups().map(({ id: a, headers: h }) => /* @__PURE__ */ r("tr", {
+    }), o.getHeaderGroups().map(({ id: a, headers: u }) => /* @__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: [k(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)
+      children: u.map(({ id: C, column: e, getContext: S }) => {
+        const { hideBelow: i, headerClassName: v } = e.columnDef.meta ?? {}, c = !!e.getIsPinned(), m = y(o, e, x);
+        return /* @__PURE__ */ r("th", {
+          scope: "col",
+          ref: c ? b(e.id) : void 0,
+          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", c && "bg-slate-100 dark:bg-metal-800", m.className, i && N[i], v),
+          style: m.style,
+          children: /* @__PURE__ */ s("span", {
+            className: "flex items-center gap-2 w-full",
+            children: [P(e.columnDef.header, S()), e.getCanSort() && /* @__PURE__ */ s("div", {
+              className: t("flex flex-col text-slate-400 justify-center items-center gap-1", f),
+              role: "presentation",
+              children: [/* @__PURE__ */ r(D, {
+                className: t("w-2 h-2 cursor-pointer", { "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "asc" }, l),
+                onClick: () => g(e)
+              }), /* @__PURE__ */ r(H, {
+                className: t("w-2 h-2 cursor-pointer", { "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "desc" }, l),
+                onClick: () => k(e)
+              })]
             })]
-          })]
-        })
-      }, b))
+          })
+        }, C);
+      })
     }, a))]
   });
 };
 export {
-  D as Header
+  G as Header
 };

package/dist/components/VirtualizedTable/components/ScrollContainer/ScrollContainer.js

@@ -0,0 +1,75 @@
+import { t as c } from "../../../../utils-DnIJruo0.js";
+import { useTableContext as N } from "../../contexts/table.hook.js";
+import { useLayoutEffect as M, useRef as u, useState as S } from "react";
+import { Fragment as C, jsx as n, jsxs as k } from "react/jsx-runtime";
+var y = (r, e) => {
+  e && e.scrollLeft !== r.scrollLeft && (e.scrollLeft = r.scrollLeft);
+}, O = ({ scrollWidth: r, clientWidth: e, scrollLeft: a }) => ({
+  scrollWidth: r,
+  clientWidth: e,
+  scrollLeft: a
+}), j = (r, e) => r.scrollWidth === e.scrollWidth && r.clientWidth === e.clientWidth && r.scrollLeft === e.scrollLeft, T = ({ className: r, hasPinnedColumns: e = !1, children: a }) => {
+  const { table: m, pinnedWidths: W } = N(), i = u(null), b = u(null), v = u(null), [o, g] = S({
+    scrollWidth: 0,
+    clientWidth: 0,
+    scrollLeft: 0
+  }), d = () => {
+    const t = i.current;
+    t && g((s) => {
+      const l = O(t);
+      return j(s, l) ? s : l;
+    });
+  };
+  M(() => {
+    const t = i.current, s = b.current;
+    if (!t || !s || (d(), typeof ResizeObserver > "u")) return;
+    const l = new ResizeObserver(d);
+    return l.observe(t), l.observe(s), () => l.disconnect();
+  }, []);
+  const p = o.scrollWidth > o.clientWidth, w = (t) => t.reduce((s, l) => s + (W[l] ?? 0), 0), f = w(m.getLeftLeafColumns().map(({ id: t }) => t)), h = w(m.getRightLeafColumns().map(({ id: t }) => t)), L = e && p, x = o.scrollLeft > 0, R = o.scrollLeft < o.scrollWidth - o.clientWidth - 1;
+  return /* @__PURE__ */ k("div", {
+    className: "kvt-scroll-area relative w-full",
+    children: [/* @__PURE__ */ n("div", {
+      ref: i,
+      "data-kvt-overflow": p ? "" : void 0,
+      className: c("kvt-scroll", "w-full", e && "[&::-webkit-scrollbar]:hidden", r),
+      style: e ? { scrollbarWidth: "none" } : void 0,
+      onScroll: ({ currentTarget: t }) => {
+        y(t, v.current), d();
+      },
+      children: /* @__PURE__ */ n("div", {
+        ref: b,
+        className: "kvt-scroll-content w-full min-w-fit",
+        children: a
+      })
+    }), L && /* @__PURE__ */ k(C, { children: [
+      /* @__PURE__ */ n("div", {
+        "aria-hidden": "true",
+        className: c("kvt-scroll-fade pointer-events-none absolute inset-y-0 w-8", "bg-gradient-to-r from-white to-transparent dark:from-metal-900", "transition-opacity duration-200", x ? "opacity-100" : "opacity-0"),
+        style: { left: f }
+      }),
+      /* @__PURE__ */ n("div", {
+        "aria-hidden": "true",
+        className: c("kvt-scroll-fade pointer-events-none absolute inset-y-0 w-8", "bg-gradient-to-l from-white to-transparent dark:from-metal-900", "transition-opacity duration-200", R ? "opacity-100" : "opacity-0"),
+        style: { right: h }
+      }),
+      /* @__PURE__ */ n("div", {
+        ref: v,
+        "aria-hidden": "true",
+        className: c("kvt-scrollbar absolute bottom-0 overflow-x-auto overflow-y-hidden", "[scrollbar-width:thin] [scrollbar-color:var(--color-slate-300)_transparent]", "dark:[scrollbar-color:var(--color-metal-600)_transparent]", "[&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-slate-300", "dark:[&::-webkit-scrollbar-thumb]:bg-metal-600"),
+        style: {
+          left: f,
+          right: h
+        },
+        onScroll: ({ currentTarget: t }) => y(t, i.current),
+        children: /* @__PURE__ */ n("div", {
+          className: "h-px",
+          style: { width: o.scrollWidth - f - h }
+        })
+      })
+    ] })]
+  });
+};
+export {
+  T as ScrollContainer
+};

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

@@ -1,43 +1,50 @@
 import { t as l } from "../../../../utils-DnIJruo0.js";
-import { Button as b } from "../../../Button/Button.js";
-import { t as m } from "../../../../ellipsis-vertical-C_yX7aQe.js";
-import { useTableContext as c } from "../../contexts/table.hook.js";
-import { jsx as r } from "react/jsx-runtime";
-var y = ({ numberOfRows: i, table: o }) => {
-  const { tableLoading: n } = c(), t = Array.from({ length: i });
-  return /* @__PURE__ */ r("tbody", {
+import { Button as p } from "../../../Button/Button.js";
+import { t as g } from "../../../../ellipsis-vertical-C_yX7aQe.js";
+import { HIDE_BELOW_CLASS as m } from "../../constants/responsive.js";
+import { useTableContext as f } from "../../contexts/table.hook.js";
+import { getPinnedCellProps as k } from "../../utils/pinned-columns/pinned-columns.js";
+import { jsx as e } from "react/jsx-runtime";
+var w = ({ numberOfRows: b, table: n }) => {
+  const { tableLoading: c, pinnedWidths: h } = f(), r = Array.from({ length: b });
+  return /* @__PURE__ */ e("tbody", {
     className: "kvt-skeleton text-slate-800 text-sm font-normal relative",
-    children: t.map((h, e) => {
-      const d = o.getAllColumns();
-      return /* @__PURE__ */ r("tr", {
+    children: r.map((y, a) => {
+      const o = n.getVisibleLeafColumns();
+      return /* @__PURE__ */ e("tr", {
         className: l("border-b", "border-b-gray-200", "bg-transparent", "last:border-b-transparent"),
-        children: d.map((a, s) => a.id !== "actions" ? /* @__PURE__ */ r("td", {
-          className: l("px-4", "py-1", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", "dark:[tr:last-child_&]:border-b", a.columnDef.meta?.className, {
-            "[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("div", {
-            className: "animate-in fade-in-0",
-            children: /* @__PURE__ */ r("div", { className: l("bg-gray-200", "dark:bg-metal-700", "animate-pulse", "rounded", "h-5", "w-full") })
-          })
-        }, `skeleton-${a.id}`) : /* @__PURE__ */ r("td", {
-          className: l("px-4", "py-1", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", "dark:[tr:last-child_&]:border-b", a.columnDef.meta?.className, {
-            "[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(b, {
-            variant: "link",
-            shape: "circle",
-            size: "large",
-            disabled: !0,
-            "aria-hidden": "true",
-            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}`);
+        children: o.map((t, s) => {
+          const { hideBelow: d } = t.columnDef.meta ?? {}, i = k(n, t, h);
+          return t.id !== "actions" ? /* @__PURE__ */ e("td", {
+            style: i.style,
+            className: l("px-4", "py-1", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", "dark:[tr:last-child_&]:border-b", i.className, d && m[d], t.columnDef.meta?.className, {
+              "[tr:last-child_&:first-of-type]:rounded-bl-lg": a === r.length - 1 && s === 0,
+              "[tr:last-child_&:last-of-type]:rounded-br-lg": a === r.length - 1 && s === o.length - 1
+            }),
+            children: /* @__PURE__ */ e("div", {
+              className: "animate-in fade-in-0",
+              children: /* @__PURE__ */ e("div", { className: l("bg-gray-200", "dark:bg-metal-700", "animate-pulse", "rounded", "h-5", "w-full") })
+            })
+          }, `skeleton-${t.id}`) : /* @__PURE__ */ e("td", {
+            style: i.style,
+            className: l("px-4", "py-1", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", "dark:[tr:last-child_&]:border-b", i.className, d && m[d], t.columnDef.meta?.className, {
+              "[tr:last-child_&:first-of-type]:rounded-bl-lg": a === r.length - 1 && s === 0,
+              "[tr:last-child_&:last-of-type]:rounded-br-lg": a === r.length - 1 && s === o.length - 1
+            }),
+            children: /* @__PURE__ */ e(p, {
+              variant: "link",
+              shape: "circle",
+              size: "large",
+              disabled: !0,
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ e(g, { className: l("w-5", "h-5", "text-slate-400", "dark:text-metal-700", { "text-gray-300 animate-pulse": c }) })
+            })
+          }, `skeleton-${t.id}`);
+        })
+      }, `skeleton-row-${a}`);
     })
   });
 };
 export {
-  y as Skeleton
+  w as Skeleton
 };