@devalok/shilp-sutra 0.31.0 → 0.32.0

package/dist/ui/data-table.js

@@ -1,164 +1,129 @@
 "use client";
-import { jsxs as d, jsx as n } from "react/jsx-runtime";
-import st, { useState as u, useRef as D, useEffect as E, useCallback as M, useMemo as lt } from "react";
-import { useReactTable as at, getExpandedRowModel as ot, getPaginationRowModel as rt, getFilteredRowModel as it, getSortedRowModel as ct, getCoreRowModel as dt, flexRender as Z } from "@tanstack/react-table";
-import { useVirtualizer as ut } from "@tanstack/react-virtual";
-import { IconArrowUp as ft, IconArrowDown as mt, IconArrowsSort as gt, IconSearch as pt, IconChevronLeft as ht, IconChevronRight as Se, IconX as bt } from "@tabler/icons-react";
-import { Icon as h } from "./icon.js";
-import { Table as xt, TableHeader as yt, TableRow as z, TableHead as Ne, TableBody as P, TableCell as _ } from "./table.js";
-import { Button as Ct } from "./button.js";
-import { Checkbox as we } from "./checkbox.js";
-import { Skeleton as Re } from "./skeleton.js";
-import { cn as a } from "./lib/utils.js";
-import { springs as ee } from "./lib/motion.js";
-import { DataTableToolbar as St } from "./data-table-toolbar.js";
-import { A as Nt, m as te } from "../_chunks/framer.js";
-function ke(f) {
-  if (!f) return "";
-  const o = [];
-  return f.align === "right" && o.push("text-right tabular-nums"), f.align === "center" && o.push("text-center"), f.hideBelow === "sm" && o.push("hidden sm:table-cell"), f.hideBelow === "md" && o.push("hidden md:table-cell"), f.hideBelow === "lg" && o.push("hidden lg:table-cell"), o.join(" ");
-}
-const wt = {
-  compact: "py-ds-02",
-  standard: "py-ds-05",
-  comfortable: "py-ds-07"
-};
-function Rt({
-  initialValue: f,
-  onSave: o,
-  onCancel: B
+import { jsx as l, jsxs as G } from "react/jsx-runtime";
+import { useState as a, useEffect as m, useRef as b, useCallback as K, useMemo as ue } from "react";
+import { useReactTable as Je, getExpandedRowModel as Qe, getPaginationRowModel as Ue, getFilteredRowModel as We, getSortedRowModel as Xe, getCoreRowModel as Ze } from "@tanstack/react-table";
+import { useVirtualizer as ve } from "@tanstack/react-virtual";
+import { IconSearch as et, IconChevronRight as tt } from "@tabler/icons-react";
+import { Icon as me } from "./icon.js";
+import { Table as nt } from "./table.js";
+import { Checkbox as he } from "./checkbox.js";
+import { cn as L } from "./lib/utils.js";
+import { DataTableToolbar as ot } from "./data-table-toolbar.js";
+import { densityPaddingMap as lt, DataTableProvider as at } from "./data-table-context.js";
+import { DataTableHeader as st } from "./data-table-header.js";
+import { DataTableBody as ct } from "./data-table-body.js";
+import { DataTableCards as it } from "./data-table-card.js";
+import { DataTablePagination as rt } from "./data-table-pagination.js";
+import { DataTableBulkActions as dt } from "./data-table-bulk-actions.js";
+function gt({
+  columns: Ce,
+  data: i,
+  className: pe,
+  noResultsText: q,
+  sortable: h = !1,
+  filterable: w = !1,
+  globalFilter: y = !1,
+  paginated: Se = !1,
+  pageSize: P,
+  pageSizeOptions: xe,
+  selectable: s = !1,
+  onSelectionChange: z,
+  toolbar: Y = !1,
+  density: be = "standard",
+  columnPinning: $,
+  editable: A = !1,
+  onCellEdit: J,
+  expandable: C = !1,
+  renderExpanded: Q,
+  virtualRows: f = !1,
+  virtualRowHeight: we = 48,
+  maxHeight: ye = 600,
+  onSort: p,
+  emptyState: U,
+  loading: W = !1,
+  selectedIds: M,
+  selectableFilter: X,
+  getRowId: c,
+  pagination: o,
+  singleExpand: I = !1,
+  stickyHeader: Re = !1,
+  onRowClick: Z,
+  bulkActions: R,
+  mobileView: T = "table"
 }) {
-  const [I, N] = u(f), b = D(null);
-  E(() => {
-    b.current?.focus(), b.current?.select();
+  const [ze, v] = a(!1);
+  m(() => {
+    const e = window.matchMedia("(max-width: 639px)"), t = () => v(e.matches);
+    return e.addEventListener("change", t), v(e.matches), () => e.removeEventListener("change", t);
   }, []);
-  const x = M(() => {
-    o(I);
-  }, [o, I]);
-  return /* @__PURE__ */ n(
-    "input",
-    {
-      ref: b,
-      type: "text",
-      value: I,
-      onChange: (g) => N(g.target.value),
-      onBlur: x,
-      onKeyDown: (g) => {
-        g.key === "Enter" ? (g.preventDefault(), x()) : g.key === "Escape" && (g.preventDefault(), B());
-      },
-      className: a(
-        "h-ds-xs-plus w-full rounded-ds-md",
-        "border border-accent-7 bg-surface-raised-hover",
-        "px-ds-02 text-ds-sm",
-        "text-surface-fg placeholder:text-surface-fg-subtle",
-        "outline-none focus:border-accent-7"
-      ),
-      "aria-label": "Edit cell value"
-    }
-  );
-}
-const kt = 'button, a, input, select, textarea, [role="checkbox"]';
-function zt({
-  columns: f,
-  data: o,
-  className: B,
-  noResultsText: I,
-  sortable: N = !1,
-  filterable: b = !1,
-  globalFilter: x = !1,
-  paginated: g = !1,
-  pageSize: ne,
-  pageSizeOptions: ze,
-  selectable: w = !1,
-  onSelectionChange: H,
-  toolbar: se = !1,
-  density: De = "standard",
-  columnPinning: le,
-  editable: Ee = !1,
-  onCellEdit: Ie,
-  expandable: j = !1,
-  renderExpanded: ae,
-  virtualRows: y = !1,
-  virtualRowHeight: ve = 48,
-  maxHeight: Fe = 600,
-  onSort: v,
-  emptyState: oe,
-  loading: Te = !1,
-  selectedIds: A,
-  selectableFilter: re,
-  getRowId: p,
-  pagination: r,
-  singleExpand: O = !1,
-  stickyHeader: Me = !1,
-  onRowClick: F,
-  bulkActions: V
-}) {
-  const [je, ie] = u([]), [Ve, $e] = u([]), [K, G] = u(""), [Pe, L] = u({
-    pageIndex: r ? r.page - 1 : 0,
-    pageSize: r?.pageSize ?? ne ?? 10
-  }), [C, ce] = u({}), [_e, Be] = u({}), [de, He] = u({
-    left: le?.left ?? [],
-    right: le?.right ?? []
-  }), [ue, Ae] = u(De), [fe, Y] = u(null), [Oe, me] = u({}), ge = D(null), U = D(!1);
-  E(() => {
-    if (A) {
-      U.current = !0;
+  const Me = T === "card" && ze, [Ie, ee] = a([]), [Te, De] = a([]), [D, E] = a(""), [Ee, F] = a({
+    pageIndex: o ? o.page - 1 : 0,
+    pageSize: o?.pageSize ?? P ?? 10
+  }), [r, te] = a({}), [Fe, je] = a({}), [j, ke] = a({
+    left: $?.left ?? [],
+    right: $?.right ?? []
+  }), [ne, Ne] = a(be), [oe, Ve] = a(null), [He, le] = a({}), ae = b(null), k = b(!1);
+  m(() => {
+    if (M) {
+      k.current = !0;
       const e = {};
-      A.forEach((t) => {
+      M.forEach((t) => {
         e[t] = !0;
-      }), ce(e);
+      }), te(e);
     }
-  }, [A]), E(() => {
-    r && L((e) => ({
+  }, [M]), m(() => {
+    o && F((e) => ({
       ...e,
-      pageIndex: r.page - 1,
-      pageSize: r.pageSize
+      pageIndex: o.page - 1,
+      pageSize: o.pageSize
     }));
-  }, [r?.page, r?.pageSize]);
-  const Ke = M(
+  }, [o?.page, o?.pageSize]);
+  const Be = K(
     (e) => {
-      ie((t) => {
-        const s = typeof e == "function" ? e(t) : e;
-        return v && (s.length === 0 && t.length > 0 ? v(t[0].id, !1) : s.length > 0 && v(s[0].id, s[0].desc ? "desc" : "asc")), s;
+      ee((t) => {
+        const n = typeof e == "function" ? e(t) : e;
+        return p && (n.length === 0 && t.length > 0 ? p(t[0].id, !1) : n.length > 0 && p(n[0].id, n[0].desc ? "desc" : "asc")), n;
       });
     },
-    [v]
-  ), Ge = M(
+    [p]
+  ), Oe = K(
     (e) => {
-      me((t) => {
-        const s = typeof e == "function" ? e(t) : e;
-        if (!O || s === !0 || typeof s != "object") return s;
-        const l = typeof t == "object" ? Object.keys(t).filter((m) => t[m]) : [], k = Object.keys(s).filter((m) => s[m]).filter((m) => !l.includes(m));
-        return k.length > 0 ? { [k[k.length - 1]]: !0 } : s;
+      le((t) => {
+        const n = typeof e == "function" ? e(t) : e;
+        if (!I || n === !0 || typeof n != "object") return n;
+        const u = typeof t == "object" ? Object.keys(t).filter((x) => t[x]) : [], _ = Object.keys(n).filter((x) => n[x]).filter((x) => !u.includes(x));
+        return _.length > 0 ? { [_[_.length - 1]]: !0 } : n;
       });
     },
-    [O]
-  ), W = D(r?.onPageChange);
-  E(() => {
-    W.current = r?.onPageChange;
-  }, [r?.onPageChange]);
-  const Le = M(
+    [I]
+  ), N = b(o?.onPageChange);
+  m(() => {
+    N.current = o?.onPageChange;
+  }, [o?.onPageChange]);
+  const _e = K(
     (e) => {
-      L((t) => {
-        const s = typeof e == "function" ? e(t) : e;
-        return W.current && s.pageIndex !== t.pageIndex && W.current(s.pageIndex + 1), s;
+      F((t) => {
+        const n = typeof e == "function" ? e(t) : e;
+        return N.current && n.pageIndex !== t.pageIndex && N.current(n.pageIndex + 1), n;
       });
     },
     []
-  ), Ye = {
+  ), Ge = {
     id: "_select",
-    header: ({ table: e }) => /* @__PURE__ */ n(
-      we,
+    header: ({ table: e }) => /* @__PURE__ */ l(
+      he,
       {
+        size: "sm",
         checked: e.getIsAllPageRowsSelected(),
         indeterminate: e.getIsSomePageRowsSelected(),
         onCheckedChange: (t) => e.toggleAllPageRowsSelected(!!t),
         "aria-label": "Select all rows"
       }
     ),
-    cell: ({ row: e }) => /* @__PURE__ */ n(
-      we,
+    cell: ({ row: e }) => /* @__PURE__ */ l(
+      he,
       {
+        size: "sm",
         checked: e.getIsSelected(),
         disabled: !e.getCanSelect(),
         onCheckedChange: (t) => e.toggleSelected(!!t),
@@ -168,22 +133,22 @@ function zt({
     enableSorting: !1,
     enableColumnFilter: !1,
     enableHiding: !1
-  }, Ue = {
+  }, Ke = {
     id: "_expand",
     header: () => null,
-    cell: ({ row: e }) => /* @__PURE__ */ n(
+    cell: ({ row: e }) => /* @__PURE__ */ l(
       "button",
       {
         type: "button",
         onClick: () => e.toggleExpanded(),
         "aria-label": e.getIsExpanded() ? "Collapse row" : "Expand row",
         className: "flex items-center justify-center p-ds-01 rounded-ds-sm hover:bg-surface-raised transition-colors",
-        children: /* @__PURE__ */ n(
-          h,
+        children: /* @__PURE__ */ l(
+          me,
           {
-            icon: Se,
+            icon: tt,
             size: "sm",
-            className: a(
+            className: L(
               "transition-transform duration-moderate-02",
               e.getIsExpanded() && "rotate-90"
             )
@@ -194,346 +159,155 @@ function zt({
     enableSorting: !1,
     enableColumnFilter: !1,
     enableHiding: !1
-  }, R = [
-    ...w ? [Ye] : [],
-    ...j ? [Ue] : [],
-    ...f
-  ], T = !!r, X = g || T, S = {
-    columnVisibility: _e,
-    columnPinning: de
+  }, V = [
+    ...s ? [Ge] : [],
+    ...C ? [Ke] : [],
+    ...Ce
+  ], S = !!o, H = Se || S, d = {
+    columnVisibility: Fe,
+    columnPinning: j
   };
-  N && (S.sorting = je), (b || x) && (S.columnFilters = Ve, S.globalFilter = K), X && (S.pagination = Pe), w && (S.rowSelection = C), j && (S.expanded = Oe);
-  const pe = N && !!v, i = at({
-    data: o,
-    columns: R,
-    state: S,
-    onColumnVisibilityChange: Be,
-    onColumnPinningChange: He,
-    getCoreRowModel: dt(),
-    ...N && {
-      onSortingChange: pe ? Ke : ie,
-      ...pe ? { manualSorting: !0 } : { getSortedRowModel: ct() }
+  h && (d.sorting = Ie), (w || y) && (d.columnFilters = Te, d.globalFilter = D), H && (d.pagination = Ee), s && (d.rowSelection = r), C && (d.expanded = He);
+  const se = h && !!p, g = Je({
+    data: i,
+    columns: V,
+    state: d,
+    onColumnVisibilityChange: je,
+    onColumnPinningChange: ke,
+    getCoreRowModel: Ze(),
+    ...h && {
+      onSortingChange: se ? Be : ee,
+      ...se ? { manualSorting: !0 } : { getSortedRowModel: Xe() }
     },
-    ...(b || x) && {
-      onColumnFiltersChange: $e,
-      onGlobalFilterChange: G,
-      getFilteredRowModel: it()
+    ...(w || y) && {
+      onColumnFiltersChange: De,
+      onGlobalFilterChange: E,
+      getFilteredRowModel: We()
     },
-    ...X && {
-      onPaginationChange: T ? Le : L,
-      ...T ? {
+    ...H && {
+      onPaginationChange: S ? _e : F,
+      ...S ? {
         manualPagination: !0,
         pageCount: Math.ceil(
-          r.total / r.pageSize
+          o.total / o.pageSize
         )
-      } : { getPaginationRowModel: rt() }
+      } : { getPaginationRowModel: Ue() }
     },
-    ...w && {
-      onRowSelectionChange: ce,
-      enableRowSelection: re ? (e) => re(e.original) : !0
+    ...s && {
+      onRowSelectionChange: te,
+      enableRowSelection: X ? (e) => X(e.original) : !0
     },
-    ...j && {
-      onExpandedChange: O ? Ge : me,
-      getExpandedRowModel: ot()
+    ...C && {
+      onExpandedChange: I ? Oe : le,
+      getExpandedRowModel: Qe()
     },
-    ...p && {
-      getRowId: (e) => p(e)
+    ...c && {
+      getRowId: (e) => c(e)
     }
-  }), q = D(H), J = D(p);
-  E(() => {
-    q.current = H, J.current = p;
-  }, [H, p]), E(() => {
-    if (U.current) {
-      U.current = !1;
+  }), B = b(z), O = b(c);
+  m(() => {
+    B.current = z, O.current = c;
+  }, [z, c]), m(() => {
+    if (k.current) {
+      k.current = !1;
       return;
     }
-    if (!q.current) return;
-    const e = Object.keys(C).filter((s) => C[s]), t = o.filter((s, l) => {
-      const c = J.current ? J.current(o[l]) : String(l);
-      return e.includes(c);
+    if (!B.current) return;
+    const e = Object.keys(r).filter((n) => r[n]), t = i.filter((n, u) => {
+      const fe = O.current ? O.current(i[u]) : String(u);
+      return e.includes(fe);
     });
-    q.current(t);
-  }, [C, o]);
-  function he(e) {
-    const { left: t = [], right: s = [] } = de, l = t.indexOf(e), c = s.indexOf(e);
-    return l !== -1 ? {
-      className: "sticky bg-surface-base z-raised",
-      style: { left: 0 }
-    } : c !== -1 ? {
-      className: "sticky bg-surface-base z-raised",
-      style: { right: 0 }
-    } : { className: "", style: {} };
-  }
-  function We(e) {
-    if (!Ee || e === "_select" || e === "_expand") return !1;
-    const t = i.getColumn(e);
-    return !(!t || t.columnDef.meta?.enableEditing === !1);
-  }
-  const be = wt[ue], $ = i.getRowModel().rows, xe = ut({
-    count: y ? $.length : 0,
-    getScrollElement: () => ge.current,
-    estimateSize: () => ve,
+    B.current(t);
+  }, [r, i]);
+  const ce = lt[ne], Le = g.getRowModel().rows, ie = ve({
+    count: f ? Le.length : 0,
+    getScrollElement: () => ae.current,
+    estimateSize: () => we,
     overscan: 10
-  }), Xe = r?.pageSize ?? ne ?? 5, qe = R.length, Je = M(
-    (e, t) => {
-      !F || t.target.closest(kt) || F(e);
-    },
-    [F]
-  );
-  function ye(e, t) {
-    const s = e.getVisibleCells();
-    return /* @__PURE__ */ n(
-      z,
-      {
-        "data-state": e.getIsSelected() && "selected",
-        style: t,
-        className: a(
-          y ? "absolute w-full flex" : void 0,
-          F && "cursor-pointer"
-        ),
-        onClick: F ? (l) => Je(e.original, l) : void 0,
-        children: s.map((l) => {
-          const c = he(l.column.id), k = fe?.rowIndex === e.index && fe?.columnId === l.column.id;
-          return /* @__PURE__ */ n(
-            _,
-            {
-              className: a(
-                be,
-                c.className,
-                y && "flex-1",
-                ke(l.column.columnDef.meta)
-              ),
-              style: c.style,
-              onDoubleClick: () => {
-                We(l.column.id) && Y({
-                  rowIndex: e.index,
-                  columnId: l.column.id
-                });
-              },
-              children: k ? /* @__PURE__ */ n(
-                Rt,
-                {
-                  initialValue: String(l.getValue() ?? ""),
-                  onSave: (m) => {
-                    Ie?.(e.index, l.column.id, m), Y(null);
-                  },
-                  onCancel: () => Y(null)
-                }
-              ) : Z(l.column.columnDef.cell, l.getContext())
-            },
-            l.id
-          );
-        })
-      },
-      e.id
-    );
-  }
-  function Qe(e, t) {
-    return !j || !e.getIsExpanded() || !ae ? null : /* @__PURE__ */ n(
-      z,
-      {
-        style: t,
-        className: y ? "absolute w-full flex" : void 0,
-        children: /* @__PURE__ */ n(
-          _,
-          {
-            colSpan: R.length,
-            className: a(
-              "bg-surface-raised p-ds-05",
-              y && "flex-1"
-            ),
-            children: ae(e.original)
-          }
-        )
-      },
-      `${e.id}-expanded`
-    );
-  }
-  function Ze() {
-    const e = ["w-3/4", "w-1/2", "w-2/3", "w-full"];
-    return /* @__PURE__ */ n(P, { children: Array.from({ length: Xe }, (t, s) => /* @__PURE__ */ n(z, { children: Array.from({ length: qe }, (l, c) => {
-      const m = (R[c]?.id ?? R[c]?.header) === "_select";
-      return /* @__PURE__ */ n(
-        _,
-        {
-          className: be,
-          children: m ? /* @__PURE__ */ n(Re, { variant: "text", className: "h-4 w-4", animation: "pulse" }) : /* @__PURE__ */ n(Re, { variant: "text", className: a("h-4", e[c % e.length]), animation: "pulse" })
-        },
-        `skeleton-${s}-${c}`
-      );
-    }) }, `skeleton-${s}`)) });
-  }
-  function et() {
-    if (Te)
-      return Ze();
-    if (!$.length)
-      return /* @__PURE__ */ n(P, { children: /* @__PURE__ */ n(z, { children: /* @__PURE__ */ n(
-        _,
-        {
-          colSpan: R.length,
-          className: a(
-            "h-24 text-center",
-            !oe && "text-surface-fg-subtle"
-          ),
-          children: oe || I || "No results."
-        }
-      ) }) });
-    if (y) {
-      const e = xe.getVirtualItems(), t = xe.getTotalSize();
-      return /* @__PURE__ */ n(
-        P,
-        {
-          style: {
-            height: `${t}px`,
-            position: "relative"
-          },
-          children: e.map((s) => {
-            const l = $[s.index];
-            return ye(l, {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: "100%",
-              height: `${s.size}px`,
-              transform: `translateY(${s.start}px)`
-            });
-          })
-        }
-      );
-    }
-    return /* @__PURE__ */ n(P, { children: $.map((e) => /* @__PURE__ */ d(st.Fragment, { children: [
-      ye(e),
-      Qe(e)
-    ] }, e.id)) });
-  }
-  const Q = lt(() => {
-    if (!V || !w) return [];
-    const e = Object.keys(C).filter((t) => C[t]);
-    return o.filter((t, s) => {
-      const l = p ? p(o[s]) : String(s);
-      return e.includes(l);
+  }), re = o?.pageSize ?? P ?? 5, de = ue(() => {
+    if (!R || !s) return [];
+    const e = Object.keys(r).filter((t) => r[t]);
+    return i.filter((t, n) => {
+      const u = c ? c(i[n]) : String(n);
+      return e.includes(u);
     });
-  }, [V, w, C, o, p]), tt = Q.length > 0, nt = T ? r.total : i.getFilteredRowModel().rows.length, Ce = /* @__PURE__ */ d(xt, { children: [
-    /* @__PURE__ */ d(
-      yt,
+  }, [R, s, r, i, c]), qe = de.length > 0, Pe = S ? o.total : g.getFilteredRowModel().rows.length, Ye = ue(
+    () => ({
+      table: g,
+      allColumns: V.map((e) => ({
+        id: e.id,
+        header: e.header
+      })),
+      cellPadding: ce,
+      columnPinningState: j,
+      sortable: h,
+      filterable: w,
+      editable: A,
+      expandable: C,
+      virtualRows: f,
+      selectable: s,
+      mobileView: T,
+      editingCell: oe,
+      setEditingCell: Ve,
+      onCellEdit: J,
+      renderExpanded: Q,
+      onRowClick: Z
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      g,
+      V.length,
+      ce,
+      j,
+      h,
+      w,
+      A,
+      C,
+      f,
+      s,
+      T,
+      oe,
+      J,
+      Q,
+      Z
+    ]
+  ), $e = f ? ie.getVirtualItems() : void 0, Ae = f ? ie.getTotalSize() : void 0, ge = /* @__PURE__ */ G(nt, { children: [
+    /* @__PURE__ */ l(st, { stickyHeader: Re }),
+    /* @__PURE__ */ l(
+      ct,
       {
-        className: a(
-          Me && "sticky top-0 z-10 bg-surface-base"
-        ),
-        children: [
-          i.getHeaderGroups().map((e) => /* @__PURE__ */ n(z, { children: e.headers.map((t) => {
-            const s = N && t.column.getCanSort(), l = t.column.getIsSorted(), c = he(t.column.id);
-            return /* @__PURE__ */ n(
-              Ne,
-              {
-                className: a(c.className, ke(t.column.columnDef.meta)),
-                style: c.style,
-                children: t.isPlaceholder ? null : s ? /* @__PURE__ */ d(
-                  "button",
-                  {
-                    type: "button",
-                    className: a(
-                      "flex items-center gap-ds-01 font-medium",
-                      "cursor-pointer select-none",
-                      "-ml-ds-01 rounded-ds-sm px-ds-01 py-ds-01",
-                      "hover:bg-surface-raised transition-colors"
-                    ),
-                    onClick: t.column.getToggleSortingHandler(),
-                    "aria-label": `Sort by ${typeof t.column.columnDef.header == "string" ? t.column.columnDef.header : t.column.id}`,
-                    children: [
-                      Z(
-                        t.column.columnDef.header,
-                        t.getContext()
-                      ),
-                      /* @__PURE__ */ n(Nt, { mode: "wait", initial: !1, children: l === "asc" ? /* @__PURE__ */ n(
-                        te.span,
-                        {
-                          initial: { opacity: 0, rotate: 90 },
-                          animate: { opacity: 1, rotate: 0 },
-                          exit: { opacity: 0, rotate: -90 },
-                          transition: ee.snappy,
-                          className: "inline-flex",
-                          children: /* @__PURE__ */ n(h, { icon: ft, size: "sm", className: "text-surface-fg-muted" })
-                        },
-                        "asc"
-                      ) : l === "desc" ? /* @__PURE__ */ n(
-                        te.span,
-                        {
-                          initial: { opacity: 0, rotate: -90 },
-                          animate: { opacity: 1, rotate: 0 },
-                          exit: { opacity: 0, rotate: 90 },
-                          transition: ee.snappy,
-                          className: "inline-flex",
-                          children: /* @__PURE__ */ n(h, { icon: mt, size: "sm", className: "text-surface-fg-muted" })
-                        },
-                        "desc"
-                      ) : /* @__PURE__ */ n(
-                        te.span,
-                        {
-                          initial: { opacity: 0 },
-                          animate: { opacity: 1 },
-                          exit: { opacity: 0 },
-                          transition: ee.snappy,
-                          className: "inline-flex",
-                          children: /* @__PURE__ */ n(h, { icon: gt, size: "sm", className: "text-surface-fg-subtle" })
-                        },
-                        "unsorted"
-                      ) })
-                    ]
-                  }
-                ) : Z(
-                  t.column.columnDef.header,
-                  t.getContext()
-                )
-              },
-              t.id
-            );
-          }) }, e.id)),
-          b && i.getHeaderGroups().map((e) => /* @__PURE__ */ n(z, { children: e.headers.map((t) => /* @__PURE__ */ n(Ne, { className: "py-ds-01", children: t.isPlaceholder || t.column.columnDef.enableColumnFilter === !1 ? null : /* @__PURE__ */ n(
-            "input",
-            {
-              type: "text",
-              value: t.column.getFilterValue() ?? "",
-              onChange: (s) => t.column.setFilterValue(s.target.value),
-              placeholder: `Filter ${typeof t.column.columnDef.header == "string" ? t.column.columnDef.header : ""}...`,
-              "aria-label": `Filter ${typeof t.column.columnDef.header == "string" ? t.column.columnDef.header : t.column.id}`,
-              className: a(
-                "h-ds-xs-plus w-full rounded-ds-md",
-                "border border-surface-border-strong bg-surface-raised-hover",
-                "px-ds-02 text-ds-sm",
-                "text-surface-fg placeholder:text-surface-fg-subtle",
-                "outline-none focus:border-accent-7"
-              )
-            }
-          ) }, `${t.id}-filter`)) }, `${e.id}-filters`))
-        ]
+        loading: W,
+        skeletonRowCount: re,
+        noResultsText: q,
+        emptyState: U,
+        virtualItems: $e,
+        totalVirtualSize: Ae
       }
-    ),
-    et()
+    )
   ] });
-  return /* @__PURE__ */ d("div", { className: a(B), children: [
-    se && /* @__PURE__ */ n(
-      St,
+  return /* @__PURE__ */ l(at, { value: Ye, children: /* @__PURE__ */ G("div", { className: L(pe), children: [
+    Y && /* @__PURE__ */ l(
+      ot,
       {
-        table: i,
-        globalFilter: x,
-        globalFilterValue: K,
-        onGlobalFilterChange: G,
-        density: ue,
-        onDensityChange: Ae
+        table: g,
+        globalFilter: y,
+        globalFilterValue: D,
+        onGlobalFilterChange: E,
+        density: ne,
+        onDensityChange: Ne
       }
     ),
-    x && !se && /* @__PURE__ */ d("div", { className: "flex items-center gap-ds-03 pb-ds-04 border-b border-surface-border mb-ds-04", children: [
-      /* @__PURE__ */ n(h, { icon: pt, size: "sm", className: "text-surface-fg-subtle" }),
-      /* @__PURE__ */ n(
+    y && !Y && /* @__PURE__ */ G("div", { className: "flex items-center gap-ds-03 pb-ds-04 border-b border-surface-border mb-ds-04", children: [
+      /* @__PURE__ */ l(me, { icon: et, size: "sm", className: "text-surface-fg-subtle" }),
+      /* @__PURE__ */ l(
         "input",
         {
           type: "text",
-          value: K,
-          onChange: (e) => G(e.target.value),
+          value: D,
+          onChange: (e) => E(e.target.value),
           placeholder: "Search all columns...",
           "aria-label": "Search all columns",
-          className: a(
+          className: L(
             "flex-1 bg-transparent text-ds-md",
             "text-surface-fg placeholder:text-surface-fg-subtle",
             "outline-none"
@@ -541,131 +315,42 @@ function zt({
         }
       )
     ] }),
-    y ? /* @__PURE__ */ n(
-      "div",
+    Me ? /* @__PURE__ */ l(
+      it,
       {
-        ref: ge,
-        style: { maxHeight: `${Fe}px`, overflowY: "auto" },
-        children: Ce
+        loading: W,
+        skeletonRowCount: re,
+        noResultsText: q,
+        emptyState: U
       }
-    ) : Ce,
-    X && /* @__PURE__ */ d("div", { className: "flex items-center justify-between px-ds-03 py-ds-04 border-t border-surface-border", children: [
-      /* @__PURE__ */ d("span", { className: "text-ds-sm text-surface-fg-muted", children: [
-        nt,
-        " total rows"
-      ] }),
-      /* @__PURE__ */ d("div", { className: "flex items-center gap-ds-03", children: [
-        !T && /* @__PURE__ */ n(
-          "select",
-          {
-            value: i.getState().pagination.pageSize,
-            onChange: (e) => {
-              i.setPageSize(Number(e.target.value));
-            },
-            "aria-label": "Rows per page",
-            className: a(
-              "h-ds-sm rounded-ds-md",
-              "border border-surface-border-strong bg-surface-raised-hover",
-              "px-ds-03 text-ds-sm",
-              "text-surface-fg"
-            ),
-            children: (ze ?? [10, 20, 50, 100]).map((e) => /* @__PURE__ */ d("option", { value: e, children: [
-              e,
-              " rows"
-            ] }, e))
-          }
-        ),
-        /* @__PURE__ */ n(
-          "button",
-          {
-            type: "button",
-            disabled: !i.getCanPreviousPage(),
-            onClick: () => i.previousPage(),
-            "aria-label": "Previous page",
-            className: a(
-              "h-ds-sm w-ds-sm flex items-center justify-center",
-              "rounded-ds-md border border-surface-border-strong",
-              "enabled:hover:bg-surface-raised",
-              "disabled:opacity-action-disabled disabled:cursor-not-allowed",
-              "transition-colors"
-            ),
-            children: /* @__PURE__ */ n(h, { icon: ht, size: "sm" })
-          }
-        ),
-        /* @__PURE__ */ d("span", { className: "text-ds-sm text-surface-fg-muted", children: [
-          "Page ",
-          i.getState().pagination.pageIndex + 1,
-          " of",
-          " ",
-          i.getPageCount()
-        ] }),
-        /* @__PURE__ */ n(
-          "button",
-          {
-            type: "button",
-            disabled: !i.getCanNextPage(),
-            onClick: () => i.nextPage(),
-            "aria-label": "Next page",
-            className: a(
-              "h-ds-sm w-ds-sm flex items-center justify-center",
-              "rounded-ds-md border border-surface-border-strong",
-              "enabled:hover:bg-surface-raised",
-              "disabled:opacity-action-disabled disabled:cursor-not-allowed",
-              "transition-colors"
-            ),
-            children: /* @__PURE__ */ n(h, { icon: Se, size: "sm" })
-          }
-        )
-      ] })
-    ] }),
-    V && w && tt && /* @__PURE__ */ d(
+    ) : f ? /* @__PURE__ */ l(
       "div",
       {
-        className: a(
-          "fixed bottom-6 left-1/2 -translate-x-1/2 z-50",
-          "flex items-center gap-ds-04 px-ds-05 py-ds-03",
-          "rounded-ds-lg border border-surface-border-strong bg-surface-overlay shadow-floating",
-          "animate-in slide-in-from-bottom-2"
-        ),
-        role: "toolbar",
-        "aria-label": "Bulk actions",
-        children: [
-          /* @__PURE__ */ d("span", { className: "text-ds-sm font-medium text-surface-fg whitespace-nowrap", children: [
-            Q.length,
-            " selected"
-          ] }),
-          /* @__PURE__ */ n("div", { className: "h-5 w-px bg-surface-border", "aria-hidden": "true" }),
-          V.map((e) => /* @__PURE__ */ n(
-            Ct,
-            {
-              size: "sm",
-              variant: e.color === "error" ? "destructive" : "outline",
-              disabled: e.disabled,
-              onClick: () => e.onClick(Q),
-              children: e.label
-            },
-            e.label
-          )),
-          /* @__PURE__ */ n(
-            "button",
-            {
-              type: "button",
-              onClick: () => i.resetRowSelection(),
-              "aria-label": "Clear selection",
-              className: a(
-                "flex items-center justify-center p-ds-01",
-                "rounded-ds-sm hover:bg-surface-raised transition-colors",
-                "text-surface-fg-muted hover:text-surface-fg"
-              ),
-              children: /* @__PURE__ */ n(h, { icon: bt, size: "sm" })
-            }
-          )
-        ]
+        ref: ae,
+        style: { maxHeight: `${ye}px`, overflowY: "auto" },
+        children: ge
+      }
+    ) : ge,
+    H && /* @__PURE__ */ l(
+      rt,
+      {
+        table: g,
+        totalRowCount: Pe,
+        useServerPagination: S,
+        pageSizeOptions: xe
+      }
+    ),
+    R && s && qe && /* @__PURE__ */ l(
+      dt,
+      {
+        table: g,
+        selectedRows: de,
+        bulkActions: R
       }
     )
-  ] });
+  ] }) });
 }
-zt.displayName = "DataTable";
+gt.displayName = "DataTable";
 export {
-  zt as DataTable
+  gt as DataTable
 };