@devalok/shilp-sutra 0.17.2 → 0.18.0

package/dist/ui/data-table.js

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