@devalok/shilp-sutra 0.15.0 → 0.16.1

package/dist/ui/data-table.js

@@ -1,43 +1,45 @@
 "use client";
-import { jsxs as r, jsx as l } from "react/jsx-runtime";
-import Ne, { useState as d, useRef as J, useEffect as Q, useCallback as ve } from "react";
-import { useReactTable as De, getExpandedRowModel as Ie, getPaginationRowModel as Re, getFilteredRowModel as Fe, getSortedRowModel as Pe, getCoreRowModel as ke, flexRender as M } from "@tanstack/react-table";
-import { useVirtualizer as Ee } from "@tanstack/react-virtual";
-import { IconArrowUp as ze, IconArrowDown as Me, IconArrowsSort as Te, IconSearch as Ve, IconChevronLeft as $e, IconChevronRight as L } from "@tabler/icons-react";
-import { Table as He, TableHeader as je, TableRow as y, TableHead as U, TableBody as T, TableCell as V } from "./table.js";
-import { C as q } from "../_chunks/checkbox.js";
-import { c as i } from "../_chunks/utils.js";
-import { DataTableToolbar as _e } from "./data-table-toolbar.js";
-const Ae = {
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import Pe, { useState as u, useRef as B, useEffect as D, useCallback as V, useMemo as et } from "react";
+import { useReactTable as tt, getExpandedRowModel as lt, getPaginationRowModel as nt, getFilteredRowModel as ot, getSortedRowModel as st, getCoreRowModel as at, flexRender as ee } from "@tanstack/react-table";
+import { useVirtualizer as rt } from "@tanstack/react-virtual";
+import { IconArrowUp as ct, IconArrowDown as dt, IconArrowsSort as it, IconSearch as ut, IconChevronLeft as mt, IconChevronRight as ye, IconX as ft } from "@tabler/icons-react";
+import { Table as gt, TableHeader as ht, TableRow as z, TableHead as Se, TableBody as H, TableCell as O } from "./table.js";
+import { B as pt } from "../_chunks/button.js";
+import { C as Ce } from "../_chunks/checkbox.js";
+import { Skeleton as Ne } from "./skeleton.js";
+import { c as a } from "../_chunks/utils.js";
+import { DataTableToolbar as bt } from "./data-table-toolbar.js";
+const xt = {
   compact: "py-ds-02",
   standard: "py-ds-05",
   comfortable: "py-ds-07"
 };
-function Be({
-  initialValue: v,
-  onSave: S,
-  onCancel: D
+function yt({
+  initialValue: A,
+  onSave: m,
+  onCancel: K
 }) {
-  const [x, h] = d(v), c = J(null);
-  Q(() => {
-    var s, C;
-    (s = c.current) == null || s.focus(), (C = c.current) == null || C.select();
+  const [I, S] = u(A), h = B(null);
+  D(() => {
+    var i, E;
+    (i = h.current) == null || i.focus(), (E = h.current) == null || E.select();
   }, []);
-  const u = ve(() => {
-    S(x);
-  }, [S, x]);
-  return /* @__PURE__ */ l(
+  const p = V(() => {
+    m(I);
+  }, [m, I]);
+  return /* @__PURE__ */ n(
     "input",
     {
-      ref: c,
+      ref: h,
       type: "text",
-      value: x,
-      onChange: (s) => h(s.target.value),
-      onBlur: u,
-      onKeyDown: (s) => {
-        s.key === "Enter" ? (s.preventDefault(), u()) : s.key === "Escape" && (s.preventDefault(), D());
+      value: I,
+      onChange: (i) => S(i.target.value),
+      onBlur: p,
+      onKeyDown: (i) => {
+        i.key === "Enter" ? (i.preventDefault(), p()) : i.key === "Escape" && (i.preventDefault(), K());
       },
-      className: i(
+      className: a(
         "h-ds-xs-plus w-full rounded-ds-md",
         "border border-border-interactive bg-field",
         "px-ds-02 text-ds-sm",
@@ -48,40 +50,97 @@ function Be({
     }
   );
 }
-function Ge({
-  columns: v,
-  data: S,
-  className: D,
-  noResultsText: x,
-  sortable: h = !1,
-  filterable: c = !1,
-  globalFilter: u = !1,
-  paginated: s = !1,
-  pageSize: C,
-  pageSizeOptions: W,
-  selectable: I = !1,
-  onSelectionChange: R,
-  toolbar: $ = !1,
-  density: X = "standard",
-  columnPinning: p,
-  editable: Z = !1,
-  onCellEdit: F,
-  expandable: w = !1,
-  renderExpanded: H,
-  virtualRows: m = !1,
-  virtualRowHeight: ee = 48,
-  maxHeight: te = 600
+const St = 'button, a, input, select, textarea, [role="checkbox"]';
+function Ct({
+  columns: A,
+  data: m,
+  className: K,
+  noResultsText: I,
+  sortable: S = !1,
+  filterable: h = !1,
+  globalFilter: p = !1,
+  paginated: i = !1,
+  pageSize: E,
+  pageSizeOptions: we,
+  selectable: C = !1,
+  onSelectionChange: G,
+  toolbar: te = !1,
+  density: ke = "standard",
+  columnPinning: N,
+  editable: Re = !1,
+  onCellEdit: L,
+  expandable: j = !1,
+  renderExpanded: le,
+  virtualRows: b = !1,
+  virtualRowHeight: ze = 48,
+  maxHeight: De = 600,
+  onSort: T,
+  emptyState: ne,
+  loading: Ie = !1,
+  selectedIds: Y,
+  selectableFilter: oe,
+  getRowId: g,
+  pagination: o,
+  singleExpand: U = !1,
+  stickyHeader: Ee = !1,
+  onRowClick: F,
+  bulkActions: $
 }) {
-  const [le, ne] = d([]), [oe, ae] = d([]), [P, k] = d(""), [se, re] = d({
-    pageIndex: 0,
-    pageSize: C ?? 10
-  }), [j, de] = d({}), [ie, ce] = d({}), [_, ue] = d({
-    left: (p == null ? void 0 : p.left) ?? [],
-    right: (p == null ? void 0 : p.right) ?? []
-  }), [A, me] = d(X), [b, E] = d(null), [ge, fe] = d({}), B = J(null), pe = {
+  const [Te, se] = u([]), [Fe, Me] = u([]), [W, X] = u(""), [Ve, q] = u({
+    pageIndex: o ? o.page - 1 : 0,
+    pageSize: (o == null ? void 0 : o.pageSize) ?? E ?? 10
+  }), [x, ae] = u({}), [je, $e] = u({}), [re, _e] = u({
+    left: (N == null ? void 0 : N.left) ?? [],
+    right: (N == null ? void 0 : N.right) ?? []
+  }), [ce, He] = u(ke), [w, J] = u(null), [Oe, de] = u({}), ie = B(null);
+  D(() => {
+    if (Y) {
+      const e = {};
+      Y.forEach((t) => {
+        e[t] = !0;
+      }), ae(e);
+    }
+  }, [Y]), D(() => {
+    o && q((e) => ({
+      ...e,
+      pageIndex: o.page - 1,
+      pageSize: o.pageSize
+    }));
+  }, [o == null ? void 0 : o.page, o == null ? void 0 : o.pageSize]);
+  const Be = V(
+    (e) => {
+      se((t) => {
+        const l = typeof e == "function" ? e(t) : e;
+        return T && (l.length === 0 && t.length > 0 ? T(t[0].id, !1) : l.length > 0 && T(l[0].id, l[0].desc ? "desc" : "asc")), l;
+      });
+    },
+    [T]
+  ), Ae = V(
+    (e) => {
+      de((t) => {
+        const l = typeof e == "function" ? e(t) : e;
+        if (!U || l === !0 || typeof l != "object") return l;
+        const s = typeof t == "object" ? Object.keys(t).filter((f) => t[f]) : [], R = Object.keys(l).filter((f) => l[f]).filter((f) => !s.includes(f));
+        return R.length > 0 ? { [R[R.length - 1]]: !0 } : l;
+      });
+    },
+    [U]
+  ), Q = B(o == null ? void 0 : o.onPageChange);
+  D(() => {
+    Q.current = o == null ? void 0 : o.onPageChange;
+  }, [o == null ? void 0 : o.onPageChange]);
+  const Ke = V(
+    (e) => {
+      q((t) => {
+        const l = typeof e == "function" ? e(t) : e;
+        return Q.current && l.pageIndex !== t.pageIndex && Q.current(l.pageIndex + 1), l;
+      });
+    },
+    []
+  ), Ge = {
     id: "_select",
-    header: ({ table: e }) => /* @__PURE__ */ l(
-      q,
+    header: ({ table: e }) => /* @__PURE__ */ n(
+      Ce,
       {
         checked: e.getIsAllPageRowsSelected(),
         indeterminate: e.getIsSomePageRowsSelected(),
@@ -89,10 +148,11 @@ function Ge({
         "aria-label": "Select all rows"
       }
     ),
-    cell: ({ row: e }) => /* @__PURE__ */ l(
-      q,
+    cell: ({ row: e }) => /* @__PURE__ */ n(
+      Ce,
       {
         checked: e.getIsSelected(),
+        disabled: !e.getCanSelect(),
         onCheckedChange: (t) => e.toggleSelected(!!t),
         "aria-label": "Select row"
       }
@@ -100,21 +160,21 @@ function Ge({
     enableSorting: !1,
     enableColumnFilter: !1,
     enableHiding: !1
-  }, be = {
+  }, Le = {
     id: "_expand",
     header: () => null,
-    cell: ({ row: e }) => /* @__PURE__ */ l(
+    cell: ({ row: e }) => /* @__PURE__ */ n(
       "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-layer-02 transition-colors",
-        children: /* @__PURE__ */ l(
-          L,
+        children: /* @__PURE__ */ n(
+          ye,
           {
             size: 16,
-            className: i(
+            className: a(
               "transition-transform duration-moderate-02",
               e.getIsExpanded() && "rotate-90"
             ),
@@ -126,280 +186,336 @@ function Ge({
     enableSorting: !1,
     enableColumnFilter: !1,
     enableHiding: !1
-  }, z = [
-    ...I ? [pe] : [],
-    ...w ? [be] : [],
-    ...v
-  ], g = {
-    columnVisibility: ie,
-    columnPinning: _
+  }, k = [
+    ...C ? [Ge] : [],
+    ...j ? [Le] : [],
+    ...A
+  ], M = !!o, Z = i || M, y = {
+    columnVisibility: je,
+    columnPinning: re
   };
-  h && (g.sorting = le), (c || u) && (g.columnFilters = oe, g.globalFilter = P), s && (g.pagination = se), I && (g.rowSelection = j), w && (g.expanded = ge);
-  const n = De({
-    data: S,
-    columns: z,
-    state: g,
-    onColumnVisibilityChange: ce,
-    onColumnPinningChange: ue,
-    getCoreRowModel: ke(),
-    ...h && {
-      onSortingChange: ne,
-      getSortedRowModel: Pe()
+  S && (y.sorting = Te), (h || p) && (y.columnFilters = Fe, y.globalFilter = W), Z && (y.pagination = Ve), C && (y.rowSelection = x), j && (y.expanded = Oe);
+  const ue = S && !!T, r = tt({
+    data: m,
+    columns: k,
+    state: y,
+    onColumnVisibilityChange: $e,
+    onColumnPinningChange: _e,
+    getCoreRowModel: at(),
+    ...S && {
+      onSortingChange: ue ? Be : se,
+      ...ue ? { manualSorting: !0 } : { getSortedRowModel: st() }
+    },
+    ...(h || p) && {
+      onColumnFiltersChange: Me,
+      onGlobalFilterChange: X,
+      getFilteredRowModel: ot()
     },
-    ...(c || u) && {
-      onColumnFiltersChange: ae,
-      onGlobalFilterChange: k,
-      getFilteredRowModel: Fe()
+    ...Z && {
+      onPaginationChange: M ? Ke : q,
+      ...M ? {
+        manualPagination: !0,
+        pageCount: Math.ceil(
+          o.total / o.pageSize
+        )
+      } : { getPaginationRowModel: nt() }
     },
-    ...s && {
-      onPaginationChange: re,
-      getPaginationRowModel: Re()
+    ...C && {
+      onRowSelectionChange: ae,
+      enableRowSelection: oe ? (e) => oe(e.original) : !0
     },
-    ...I && {
-      onRowSelectionChange: de,
-      enableRowSelection: !0
+    ...j && {
+      onExpandedChange: U ? Ae : de,
+      getExpandedRowModel: lt()
     },
-    ...w && {
-      onExpandedChange: fe,
-      getExpandedRowModel: Ie()
-    }
-  });
-  Q(() => {
-    if (R) {
-      const e = n.getFilteredSelectedRowModel().rows.map((t) => t.original);
-      R(e);
+    ...g && {
+      getRowId: (e) => g(e)
     }
-  }, [j, R, n]);
-  function G(e) {
-    const { left: t = [], right: a = [] } = _, o = t.indexOf(e), f = a.indexOf(e);
-    return o !== -1 ? {
+  }), v = B(G);
+  D(() => {
+    v.current = G;
+  }, [G]), D(() => {
+    if (!v.current) return;
+    const e = Object.keys(x).filter((l) => x[l]), t = m.filter((l, s) => {
+      const c = g ? g(m[s]) : String(s);
+      return e.includes(c);
+    });
+    v.current(t);
+  }, [x, m, g]);
+  function me(e) {
+    const { left: t = [], right: l = [] } = re, s = t.indexOf(e), c = l.indexOf(e);
+    return s !== -1 ? {
       className: "sticky bg-layer-01 z-raised",
       style: { left: 0 }
-    } : f !== -1 ? {
+    } : c !== -1 ? {
       className: "sticky bg-layer-01 z-raised",
       style: { right: 0 }
     } : { className: "", style: {} };
   }
-  function xe(e) {
-    if (!Z || e === "_select" || e === "_expand") return !1;
-    const t = n.getColumn(e);
+  function Ye(e) {
+    if (!Re || e === "_select" || e === "_expand") return !1;
+    const t = r.getColumn(e);
     if (!t) return !1;
-    const a = t.columnDef.meta;
-    return (a == null ? void 0 : a.enableEditing) !== !1;
+    const l = t.columnDef.meta;
+    return (l == null ? void 0 : l.enableEditing) !== !1;
   }
-  const he = Ae[A], N = n.getRowModel().rows, O = Ee({
-    count: m ? N.length : 0,
-    getScrollElement: () => B.current,
-    estimateSize: () => ee,
+  const fe = xt[ce], _ = r.getRowModel().rows, ge = rt({
+    count: b ? _.length : 0,
+    getScrollElement: () => ie.current,
+    estimateSize: () => ze,
     overscan: 10
-  });
-  function Y(e, t) {
-    const a = e.getVisibleCells();
-    return /* @__PURE__ */ l(
-      y,
+  }), Ue = (o == null ? void 0 : o.pageSize) ?? E ?? 5, We = k.length, Xe = V(
+    (e, t) => {
+      !F || t.target.closest(St) || F(e);
+    },
+    [F]
+  );
+  function he(e, t) {
+    const l = e.getVisibleCells();
+    return /* @__PURE__ */ n(
+      z,
       {
         "data-state": e.getIsSelected() && "selected",
         style: t,
-        className: m ? "absolute w-full flex" : void 0,
-        children: a.map((o) => {
-          const f = G(o.column.id), Ce = (b == null ? void 0 : b.rowIndex) === e.index && (b == null ? void 0 : b.columnId) === o.column.id;
-          return /* @__PURE__ */ l(
-            V,
+        className: a(
+          b ? "absolute w-full flex" : void 0,
+          F && "cursor-pointer"
+        ),
+        onClick: F ? (s) => Xe(e.original, s) : void 0,
+        children: l.map((s) => {
+          const c = me(s.column.id), R = (w == null ? void 0 : w.rowIndex) === e.index && (w == null ? void 0 : w.columnId) === s.column.id;
+          return /* @__PURE__ */ n(
+            O,
             {
-              className: i(
-                he,
-                f.className,
-                m && "flex-1"
+              className: a(
+                fe,
+                c.className,
+                b && "flex-1"
               ),
-              style: f.style,
+              style: c.style,
               onDoubleClick: () => {
-                xe(o.column.id) && E({
+                Ye(s.column.id) && J({
                   rowIndex: e.index,
-                  columnId: o.column.id
+                  columnId: s.column.id
                 });
               },
-              children: Ce ? /* @__PURE__ */ l(
-                Be,
+              children: R ? /* @__PURE__ */ n(
+                yt,
                 {
-                  initialValue: String(o.getValue() ?? ""),
-                  onSave: (we) => {
-                    F == null || F(e.index, o.column.id, we), E(null);
+                  initialValue: String(s.getValue() ?? ""),
+                  onSave: (f) => {
+                    L == null || L(e.index, s.column.id, f), J(null);
                   },
-                  onCancel: () => E(null)
+                  onCancel: () => J(null)
                 }
-              ) : M(o.column.columnDef.cell, o.getContext())
+              ) : ee(s.column.columnDef.cell, s.getContext())
             },
-            o.id
+            s.id
           );
         })
       },
       e.id
     );
   }
-  function ye(e, t) {
-    return !w || !e.getIsExpanded() || !H ? null : /* @__PURE__ */ l(
-      y,
+  function qe(e, t) {
+    return !j || !e.getIsExpanded() || !le ? null : /* @__PURE__ */ n(
+      z,
       {
         style: t,
-        className: m ? "absolute w-full flex" : void 0,
-        children: /* @__PURE__ */ l(
-          V,
+        className: b ? "absolute w-full flex" : void 0,
+        children: /* @__PURE__ */ n(
+          O,
           {
-            colSpan: z.length,
-            className: i(
+            colSpan: k.length,
+            className: a(
               "bg-layer-02 p-ds-05",
-              m && "flex-1"
+              b && "flex-1"
             ),
-            children: H(e.original)
+            children: le(e.original)
           }
         )
       },
       `${e.id}-expanded`
     );
   }
-  function Se() {
-    if (!N.length)
-      return /* @__PURE__ */ l(T, { children: /* @__PURE__ */ l(y, { children: /* @__PURE__ */ l(
-        V,
+  function Je() {
+    const e = ["w-3/4", "w-1/2", "w-2/3", "w-full"];
+    return /* @__PURE__ */ n(H, { children: Array.from({ length: Ue }, (t, l) => /* @__PURE__ */ n(z, { children: Array.from({ length: We }, (s, c) => {
+      var be, xe;
+      const f = (((be = k[c]) == null ? void 0 : be.id) ?? ((xe = k[c]) == null ? void 0 : xe.header)) === "_select";
+      return /* @__PURE__ */ n(
+        O,
         {
-          colSpan: z.length,
-          className: "h-24 text-center text-text-tertiary",
-          children: x || "No results."
+          className: fe,
+          children: f ? /* @__PURE__ */ n(Ne, { variant: "text", className: "h-4 w-4", animation: "pulse" }) : /* @__PURE__ */ n(Ne, { variant: "text", className: a("h-4", e[c % e.length]), animation: "pulse" })
+        },
+        `skeleton-${l}-${c}`
+      );
+    }) }, `skeleton-${l}`)) });
+  }
+  function Qe() {
+    if (Ie)
+      return Je();
+    if (!_.length)
+      return /* @__PURE__ */ n(H, { children: /* @__PURE__ */ n(z, { children: /* @__PURE__ */ n(
+        O,
+        {
+          colSpan: k.length,
+          className: a(
+            "h-24 text-center",
+            !ne && "text-text-tertiary"
+          ),
+          children: ne || I || "No results."
         }
       ) }) });
-    if (m) {
-      const e = O.getVirtualItems(), t = O.getTotalSize();
-      return /* @__PURE__ */ l(
-        T,
+    if (b) {
+      const e = ge.getVirtualItems(), t = ge.getTotalSize();
+      return /* @__PURE__ */ n(
+        H,
         {
           style: {
             height: `${t}px`,
             position: "relative"
           },
-          children: e.map((a) => {
-            const o = N[a.index];
-            return Y(o, {
+          children: e.map((l) => {
+            const s = _[l.index];
+            return he(s, {
               position: "absolute",
               top: 0,
               left: 0,
               width: "100%",
-              height: `${a.size}px`,
-              transform: `translateY(${a.start}px)`
+              height: `${l.size}px`,
+              transform: `translateY(${l.start}px)`
             });
           })
         }
       );
     }
-    return /* @__PURE__ */ l(T, { children: N.map((e) => /* @__PURE__ */ r(Ne.Fragment, { children: [
-      Y(e),
-      ye(e)
+    return /* @__PURE__ */ n(H, { children: _.map((e) => /* @__PURE__ */ d(Pe.Fragment, { children: [
+      he(e),
+      qe(e)
     ] }, e.id)) });
   }
-  const K = /* @__PURE__ */ r(He, { children: [
-    /* @__PURE__ */ r(je, { children: [
-      n.getHeaderGroups().map((e) => /* @__PURE__ */ l(y, { children: e.headers.map((t) => {
-        const a = h && t.column.getCanSort(), o = t.column.getIsSorted(), f = G(t.column.id);
-        return /* @__PURE__ */ l(
-          U,
-          {
-            className: f.className,
-            style: f.style,
-            children: t.isPlaceholder ? null : a ? /* @__PURE__ */ r(
-              "button",
+  const P = et(() => {
+    if (!$ || !C) return [];
+    const e = Object.keys(x).filter((t) => x[t]);
+    return m.filter((t, l) => {
+      const s = g ? g(m[l]) : String(l);
+      return e.includes(s);
+    });
+  }, [$, C, x, m, g]), Ze = P.length > 0, ve = M ? o.total : r.getFilteredRowModel().rows.length, pe = /* @__PURE__ */ d(gt, { children: [
+    /* @__PURE__ */ d(
+      ht,
+      {
+        className: a(
+          Ee && "sticky top-0 z-10 bg-surface"
+        ),
+        children: [
+          r.getHeaderGroups().map((e) => /* @__PURE__ */ n(z, { children: e.headers.map((t) => {
+            const l = S && t.column.getCanSort(), s = t.column.getIsSorted(), c = me(t.column.id);
+            return /* @__PURE__ */ n(
+              Se,
               {
-                type: "button",
-                className: i(
-                  "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-layer-02 transition-colors"
-                ),
-                onClick: t.column.getToggleSortingHandler(),
-                "aria-label": `Sort by ${typeof t.column.columnDef.header == "string" ? t.column.columnDef.header : t.column.id}`,
-                children: [
-                  M(
-                    t.column.columnDef.header,
-                    t.getContext()
-                  ),
-                  o === "asc" ? /* @__PURE__ */ l(
-                    ze,
-                    {
-                      className: "h-ico-sm w-ico-sm text-text-secondary",
-                      "aria-hidden": "true"
-                    }
-                  ) : o === "desc" ? /* @__PURE__ */ l(
-                    Me,
-                    {
-                      className: "h-ico-sm w-ico-sm text-text-secondary",
-                      "aria-hidden": "true"
-                    }
-                  ) : /* @__PURE__ */ l(
-                    Te,
-                    {
-                      className: "h-ico-sm w-ico-sm text-text-tertiary",
-                      "aria-hidden": "true"
-                    }
-                  )
-                ]
-              }
-            ) : M(
-              t.column.columnDef.header,
-              t.getContext()
-            )
-          },
-          t.id
-        );
-      }) }, e.id)),
-      c && n.getHeaderGroups().map((e) => /* @__PURE__ */ l(y, { children: e.headers.map((t) => /* @__PURE__ */ l(U, { className: "py-ds-01", children: t.isPlaceholder || t.column.columnDef.enableColumnFilter === !1 ? null : /* @__PURE__ */ l(
-        "input",
-        {
-          type: "text",
-          value: t.column.getFilterValue() ?? "",
-          onChange: (a) => t.column.setFilterValue(a.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: i(
-            "h-ds-xs-plus w-full rounded-ds-md",
-            "border border-border bg-field",
-            "px-ds-02 text-ds-sm",
-            "text-text-primary placeholder:text-text-placeholder",
-            "outline-none focus:border-[var(--color-border-focus)]"
-          )
-        }
-      ) }, `${t.id}-filter`)) }, `${e.id}-filters`))
-    ] }),
-    Se()
+                className: c.className,
+                style: c.style,
+                children: t.isPlaceholder ? null : l ? /* @__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-layer-02 transition-colors"
+                    ),
+                    onClick: t.column.getToggleSortingHandler(),
+                    "aria-label": `Sort by ${typeof t.column.columnDef.header == "string" ? t.column.columnDef.header : t.column.id}`,
+                    children: [
+                      ee(
+                        t.column.columnDef.header,
+                        t.getContext()
+                      ),
+                      s === "asc" ? /* @__PURE__ */ n(
+                        ct,
+                        {
+                          className: "h-ico-sm w-ico-sm text-text-secondary",
+                          "aria-hidden": "true"
+                        }
+                      ) : s === "desc" ? /* @__PURE__ */ n(
+                        dt,
+                        {
+                          className: "h-ico-sm w-ico-sm text-text-secondary",
+                          "aria-hidden": "true"
+                        }
+                      ) : /* @__PURE__ */ n(
+                        it,
+                        {
+                          className: "h-ico-sm w-ico-sm text-text-tertiary",
+                          "aria-hidden": "true"
+                        }
+                      )
+                    ]
+                  }
+                ) : ee(
+                  t.column.columnDef.header,
+                  t.getContext()
+                )
+              },
+              t.id
+            );
+          }) }, e.id)),
+          h && r.getHeaderGroups().map((e) => /* @__PURE__ */ n(z, { children: e.headers.map((t) => /* @__PURE__ */ n(Se, { className: "py-ds-01", children: t.isPlaceholder || t.column.columnDef.enableColumnFilter === !1 ? null : /* @__PURE__ */ n(
+            "input",
+            {
+              type: "text",
+              value: t.column.getFilterValue() ?? "",
+              onChange: (l) => t.column.setFilterValue(l.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-border bg-field",
+                "px-ds-02 text-ds-sm",
+                "text-text-primary placeholder:text-text-placeholder",
+                "outline-none focus:border-[var(--color-border-focus)]"
+              )
+            }
+          ) }, `${t.id}-filter`)) }, `${e.id}-filters`))
+        ]
+      }
+    ),
+    Qe()
   ] });
-  return /* @__PURE__ */ r("div", { className: i(D), children: [
-    $ && /* @__PURE__ */ l(
-      _e,
+  return /* @__PURE__ */ d("div", { className: a(K), children: [
+    te && /* @__PURE__ */ n(
+      bt,
       {
-        table: n,
-        globalFilter: u,
-        globalFilterValue: P,
-        onGlobalFilterChange: k,
-        density: A,
-        onDensityChange: me
+        table: r,
+        globalFilter: p,
+        globalFilterValue: W,
+        onGlobalFilterChange: X,
+        density: ce,
+        onDensityChange: He
       }
     ),
-    u && !$ && /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-03 pb-ds-04 border-b border-border-subtle mb-ds-04", children: [
-      /* @__PURE__ */ l(
-        Ve,
+    p && !te && /* @__PURE__ */ d("div", { className: "flex items-center gap-ds-03 pb-ds-04 border-b border-border-subtle mb-ds-04", children: [
+      /* @__PURE__ */ n(
+        ut,
         {
           size: 16,
           className: "text-icon-secondary",
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ n(
         "input",
         {
           type: "text",
-          value: P,
-          onChange: (e) => k(e.target.value),
+          value: W,
+          onChange: (e) => X(e.target.value),
           placeholder: "Search all columns...",
           "aria-label": "Search all columns",
-          className: i(
+          className: a(
             "flex-1 bg-transparent text-ds-md",
             "text-text-primary placeholder:text-text-placeholder",
             "outline-none"
@@ -407,86 +523,131 @@ function Ge({
         }
       )
     ] }),
-    m ? /* @__PURE__ */ l(
+    b ? /* @__PURE__ */ n(
       "div",
       {
-        ref: B,
-        style: { maxHeight: `${te}px`, overflowY: "auto" },
-        children: K
+        ref: ie,
+        style: { maxHeight: `${De}px`, overflowY: "auto" },
+        children: pe
       }
-    ) : K,
-    s && /* @__PURE__ */ r("div", { className: "flex items-center justify-between px-ds-03 py-ds-04 border-t border-border-subtle", children: [
-      /* @__PURE__ */ r("span", { className: "text-ds-sm text-text-secondary", children: [
-        n.getFilteredRowModel().rows.length,
+    ) : pe,
+    Z && /* @__PURE__ */ d("div", { className: "flex items-center justify-between px-ds-03 py-ds-04 border-t border-border-subtle", children: [
+      /* @__PURE__ */ d("span", { className: "text-ds-sm text-text-secondary", children: [
+        ve,
         " total rows"
       ] }),
-      /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-03", children: [
-        /* @__PURE__ */ l(
+      /* @__PURE__ */ d("div", { className: "flex items-center gap-ds-03", children: [
+        !M && /* @__PURE__ */ n(
           "select",
           {
-            value: n.getState().pagination.pageSize,
+            value: r.getState().pagination.pageSize,
             onChange: (e) => {
-              n.setPageSize(Number(e.target.value));
+              r.setPageSize(Number(e.target.value));
             },
             "aria-label": "Rows per page",
-            className: i(
+            className: a(
               "h-ds-sm rounded-ds-md",
               "border border-border bg-field",
               "px-ds-03 text-ds-sm",
               "text-text-primary"
             ),
-            children: (W ?? [10, 20, 50, 100]).map((e) => /* @__PURE__ */ r("option", { value: e, children: [
+            children: (we ?? [10, 20, 50, 100]).map((e) => /* @__PURE__ */ d("option", { value: e, children: [
               e,
               " rows"
             ] }, e))
           }
         ),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ n(
           "button",
           {
             type: "button",
-            disabled: !n.getCanPreviousPage(),
-            onClick: () => n.previousPage(),
+            disabled: !r.getCanPreviousPage(),
+            onClick: () => r.previousPage(),
             "aria-label": "Previous page",
-            className: i(
+            className: a(
               "h-ds-sm w-ds-sm flex items-center justify-center",
               "rounded-ds-md border border-border",
               "enabled:hover:bg-layer-02",
               "disabled:opacity-[0.38] disabled:cursor-not-allowed",
               "transition-colors"
             ),
-            children: /* @__PURE__ */ l($e, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ n(mt, { size: 16, "aria-hidden": "true" })
           }
         ),
-        /* @__PURE__ */ r("span", { className: "text-ds-sm text-text-secondary", children: [
+        /* @__PURE__ */ d("span", { className: "text-ds-sm text-text-secondary", children: [
           "Page ",
-          n.getState().pagination.pageIndex + 1,
+          r.getState().pagination.pageIndex + 1,
           " of",
           " ",
-          n.getPageCount()
+          r.getPageCount()
         ] }),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ n(
           "button",
           {
             type: "button",
-            disabled: !n.getCanNextPage(),
-            onClick: () => n.nextPage(),
+            disabled: !r.getCanNextPage(),
+            onClick: () => r.nextPage(),
             "aria-label": "Next page",
-            className: i(
+            className: a(
               "h-ds-sm w-ds-sm flex items-center justify-center",
               "rounded-ds-md border border-border",
               "enabled:hover:bg-layer-02",
               "disabled:opacity-[0.38] disabled:cursor-not-allowed",
               "transition-colors"
             ),
-            children: /* @__PURE__ */ l(L, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ n(ye, { size: 16, "aria-hidden": "true" })
           }
         )
       ] })
-    ] })
+    ] }),
+    $ && C && Ze && /* @__PURE__ */ d(
+      "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-border bg-surface shadow-lg",
+          "animate-in slide-in-from-bottom-2"
+        ),
+        role: "toolbar",
+        "aria-label": "Bulk actions",
+        children: [
+          /* @__PURE__ */ d("span", { className: "text-ds-sm font-medium text-text-primary whitespace-nowrap", children: [
+            P.length,
+            " selected"
+          ] }),
+          /* @__PURE__ */ n("div", { className: "h-5 w-px bg-border", "aria-hidden": "true" }),
+          $.map((e) => /* @__PURE__ */ n(
+            pt,
+            {
+              size: "sm",
+              variant: e.color === "error" ? "destructive" : "outline",
+              disabled: e.disabled,
+              onClick: () => e.onClick(P),
+              children: e.label
+            },
+            e.label
+          )),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              onClick: () => r.resetRowSelection(),
+              "aria-label": "Clear selection",
+              className: a(
+                "flex items-center justify-center p-ds-01",
+                "rounded-ds-sm hover:bg-layer-02 transition-colors",
+                "text-text-secondary hover:text-text-primary"
+              ),
+              children: /* @__PURE__ */ n(ft, { size: 16, "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
-Ge.displayName = "DataTable";
+Ct.displayName = "DataTable";
 export {
-  Ge as DataTable
+  Ct as DataTable
 };