@ck-ui/component-library 0.3.0 → 1.0.0

package/dist/components/Table/_helpers/TableRows.js

@@ -1,403 +1,408 @@
-import { jsx as e, Fragment as V, jsxs as E } from "react/jsx-runtime";
-import { f as _ } from "../../../index-f7TB87Mf.js";
-import { useRef as B, useState as K, useCallback as Q } from "react";
-import { pinnedStyle as O } from "../_utils/table.utils.js";
-import { ROW_MIN_HEIGHT as A } from "../constants.js";
-import { SelectionCell as H } from "./SelectionCell/index.js";
-import { ExpandableRowToggle as J } from "./ExpandableRow/index.js";
+import { jsx as t, Fragment as V, jsxs as I } from "react/jsx-runtime";
+import { f as z } from "../../../index-f7TB87Mf.js";
+import { useRef as q, useState as K, useCallback as Q } from "react";
+import { columnLayoutStyle as O, pinnedStyle as T } from "../_utils/table.utils.js";
+import { ROW_MIN_HEIGHT as W } from "../constants.js";
+import { SelectionCell as j } from "./SelectionCell/index.js";
+import { ExpandableRowToggle as G } from "./ExpandableRow/index.js";
 import { Tooltip as U } from "../../Tooltip/index.js";
-import { mergeClasses as j } from "../../../utils/mergeClasses.js";
-function G(r) {
-  const s = r?.align;
-  if (s === "right") return "flex-end";
-  if (s === "center") return "center";
+import { mergeClasses as B } from "../../../utils/mergeClasses.js";
+const _ = [
+  "var(--ckcl-primary-50, #F8FBFF)",
+  // depth 1
+  "var(--ckcl-primary-80, #F1F6FF)",
+  // depth 2
+  "var(--ckcl-primary-100, #D9E6FB)"
+  // depth 3+
+];
+function X(r) {
+  if (r < 1) return;
+  const e = Math.min(r - 1, _.length - 1);
+  return _[e];
 }
-function P(r) {
-  const s = r?.align;
-  if (s === "right") return "right";
-  if (s === "center") return "center";
+function E(r, e, m) {
+  const l = X(r);
+  return l || (e && m % 2 !== 0 ? "var(--ckds-cell-bg-striped, var(--ckcl-primary-50))" : "var(--ckds-cell-bg-default, #ffffff)");
+}
+function H(r) {
+  const e = r?.align;
+  if (e === "right") return "flex-end";
+  if (e === "center") return "center";
+}
+function R(r) {
+  const e = r?.align;
+  if (e === "right") return "right";
+  if (e === "center") return "center";
 }
 function M({
   title: r,
-  wrapText: s,
-  children: g
+  wrapText: e,
+  children: m
 }) {
-  const m = B(null), [x, p] = K(!1), u = Q(() => {
-    m.current && p(m.current.scrollWidth > m.current.offsetWidth);
-  }, []), d = /* @__PURE__ */ e(
+  const l = q(null), [y, g] = K(!1), d = Q(() => {
+    l.current && g(l.current.scrollWidth > l.current.offsetWidth);
+  }, []), o = /* @__PURE__ */ t(
     "div",
     {
-      ref: m,
-      onMouseEnter: s ? void 0 : u,
-      className: `${s ? "whitespace-normal wrap-break-word" : "whitespace-nowrap overflow-hidden text-ellipsis"} w-full`,
-      children: g
+      ref: l,
+      onMouseEnter: e ? void 0 : d,
+      className: `${e ? "whitespace-normal wrap-break-word" : "whitespace-nowrap overflow-hidden text-ellipsis"} w-full`,
+      children: m
     }
   );
-  return s || !x ? d : /* @__PURE__ */ e(U, { title: r, placement: "top", arrow: !0, children: d });
+  return e || !y ? o : /* @__PURE__ */ t(U, { title: r, placement: "top", arrow: !0, children: o });
 }
-function le({
+function ae({
   rows: r,
-  virtualization: s,
-  rowVirtualizer: g,
-  handleMeasure: m,
-  getEstimatedSize: x,
-  lastColId: p,
-  lastNonPinnedColId: u,
+  virtualization: e,
+  rowVirtualizer: m,
+  handleMeasure: l,
+  getEstimatedSize: y,
+  columnSizing: g,
   tableConfig: d,
-  table: h,
-  selectionState: l,
-  selectionConfig: k,
-  onToggleRowSelection: a,
-  expandableConfig: o,
-  expandedIds: y,
-  onToggleExpand: b,
+  table: o,
+  selectionState: i,
+  selectionConfig: h,
+  onToggleRowSelection: k,
+  expandableConfig: a,
+  expandedIds: b,
+  onToggleExpand: p,
   depth: D = 0
 }) {
-  const f = (k?.enabled ?? !1) && !o?.enabled, v = f ? 40 : 0, W = o?.enabled ?? !1, w = o?.indentSize ?? 20, C = o?.childrenKey ?? "children";
-  return s ? /* @__PURE__ */ e(V, { children: g.getVirtualItems().map((i) => {
-    const t = r[i.index], z = t.id, c = f && l?.selectedIds.has(z);
-    return /* @__PURE__ */ E(
+  const f = (h?.enabled ?? !1) && !a?.enabled, u = f ? 40 : 0, F = a?.enabled ?? !1, v = a?.indentSize ?? 20, C = a?.childrenKey ?? "children";
+  return e ? /* @__PURE__ */ t(V, { children: m.getVirtualItems().map((n) => {
+    const s = r[n.index], w = s.id, x = f && i?.selectedIds.has(w);
+    return /* @__PURE__ */ I(
       "tr",
       {
-        ref: (n) => m(i.index, n),
-        "data-index": i.index,
-        className: j("ckds-dragable-tr flex absolute top-0 left-0 w-full"),
+        ref: (c) => l(n.index, c),
+        "data-index": n.index,
+        className: B("ckds-dragable-tr flex absolute top-0 left-0 w-full"),
         style: {
-          transform: `translateY(${i.start}px)`,
-          minHeight: x(i.index)
+          transform: `translateY(${n.start}px)`,
+          minHeight: y(n.index),
+          borderBottom: "1px solid var(--ckcl-black-50, #F4F4F4)"
         },
         children: [
-          f && /* @__PURE__ */ e("td", { className: "ckds-dragable-td flex items-center justify-center", style: { width: 40, minWidth: 40, maxWidth: 40, height: A, flex: "0 0 40px", position: "sticky", left: 0, zIndex: 2, backgroundColor: "var(--ckds-cell-bg-default, #ffffff)" }, children: /* @__PURE__ */ e(H, { checked: !!c, onChange: () => a?.(z) }) }),
-          t.getVisibleCells().map((n, N) => {
-            const I = n.column.id === p, $ = n.column.getIsPinned(), S = I && !$ || n.column.id === u, F = t.original?.status?.toLowerCase?.() === "inactive", T = N === 0;
-            return /* @__PURE__ */ e(
+          f && /* @__PURE__ */ t("td", { className: "ckds-dragable-td flex items-center justify-center", style: { width: 40, minWidth: 40, maxWidth: 40, height: W, flex: "0 0 40px", position: "sticky", left: 0, zIndex: 2, backgroundColor: "var(--ckds-cell-bg-default, #ffffff)" }, children: /* @__PURE__ */ t(j, { checked: !!x, onChange: () => k?.(w) }) }),
+          s.getVisibleCells().map((c, $) => {
+            const N = s.original?.status?.toLowerCase?.() === "inactive", L = $ === 0;
+            return /* @__PURE__ */ t(
               "td",
               {
-                className: j("ckds-dragable-td flex items-center", F ? "text-base-400" : "text-base-content"),
+                className: "ckds-dragable-td flex items-center",
                 style: {
-                  ...O(n.column, h, v),
-                  minHeight: `${x(i.index)}px`,
-                  width: S ? "100%" : n.column.getSize(),
-                  minWidth: n.column.getSize(),
-                  maxWidth: S ? void 0 : n.column.getSize(),
-                  flex: S ? "1 1 auto" : `0 0 ${n.column.getSize()}px`,
-                  justifyContent: G(n.column.columnDef),
-                  textAlign: P(n.column.columnDef),
-                  // Explicit background — Tailwind bg-base-* tokens can be
-                  // overridden by the host app, making sticky cells transparent.
-                  backgroundColor: d.stripedRows && i.index % 2 !== 0 ? "var(--ckds-cell-bg-striped, var(--ckcl-primary-50))" : "var(--ckds-cell-bg-default, #ffffff)"
+                  ...T(c.column, o, u),
+                  minHeight: `${y(n.index)}px`,
+                  ...O(c.column, o.getVisibleLeafColumns(), g),
+                  justifyContent: H(c.column.columnDef),
+                  textAlign: R(c.column.columnDef),
+                  // Explicit color — avoids DaisyUI text-base-* token dependency
+                  color: N ? "var(--ckcl-black-400, #737373)" : "var(--ckcl-black-500, #2b2b2b)",
+                  backgroundColor: E(D, d.stripedRows, n.index)
                 },
-                children: /* @__PURE__ */ e(M, { title: String(n.getValue() ?? ""), wrapText: d.wrapText, children: /* @__PURE__ */ e(
-                  R,
+                children: /* @__PURE__ */ t(M, { title: String(c.getValue() ?? ""), wrapText: d.wrapText, children: /* @__PURE__ */ t(
+                  J,
                   {
-                    isFirstDataCol: T,
-                    hasExpansion: W,
-                    row: t,
+                    isFirstDataCol: L,
+                    hasExpansion: F,
+                    row: s,
                     childrenKey: C,
-                    expandedIds: y,
-                    onToggleExpand: b,
+                    expandedIds: b,
+                    onToggleExpand: p,
                     depth: D,
-                    indentSize: w,
-                    expandableConfig: o,
-                    children: _(n.column.columnDef.cell ?? n.column.columnDef.header, n.getContext())
+                    indentSize: v,
+                    expandableConfig: a,
+                    children: z(c.column.columnDef.cell ?? c.column.columnDef.header, c.getContext())
                   }
                 ) })
               },
-              n.id
+              c.id
             );
           })
         ]
       },
-      t.id
+      s.id
     );
-  }) }) : /* @__PURE__ */ e(V, { children: r.map((i, t) => {
-    const z = i.original, c = z?.status?.toLowerCase?.() === "inactive", n = i.id, N = f && l?.selectedIds.has(n), I = W && y?.has(n), $ = W ? z[C] : void 0, S = Array.isArray($) && $.length > 0;
-    return /* @__PURE__ */ e(
-      X,
+  }) }) : /* @__PURE__ */ t(V, { children: r.map((n, s) => {
+    const w = n.original, x = w?.status?.toLowerCase?.() === "inactive", c = n.id, $ = f && i?.selectedIds.has(c), A = F && b?.has(c), N = F ? w[C] : void 0, L = Array.isArray(N) && N.length > 0;
+    return /* @__PURE__ */ t(
+      Z,
       {
-        row: i,
-        rowIndex: t,
-        isInactive: c,
-        isSelected: !!N,
-        isExpanded: !!I,
-        hasChildren: S,
-        nestedChildren: $,
-        lastColId: p,
-        lastNonPinnedColId: u,
+        row: n,
+        rowIndex: s,
+        isInactive: x,
+        isSelected: !!$,
+        isExpanded: !!A,
+        hasChildren: L,
+        nestedChildren: N,
+        columnSizing: g,
         tableConfig: d,
-        table: h,
+        table: o,
         hasSelection: f,
-        selectionState: l,
-        onToggleRowSelection: a,
-        expandedIds: y,
-        onToggleExpand: b,
-        expandableConfig: o,
+        selectionState: i,
+        onToggleRowSelection: k,
+        expandedIds: b,
+        onToggleExpand: p,
+        expandableConfig: a,
         depth: D,
-        indentSize: w,
+        indentSize: v,
         childrenKey: C
       },
-      i.id
+      n.id
     );
   }) });
 }
-function R({
+function J({
   isFirstDataCol: r,
-  hasExpansion: s,
-  row: g,
-  childrenKey: m,
-  expandedIds: x,
-  onToggleExpand: p,
-  depth: u,
-  indentSize: d,
-  expandableConfig: h,
-  children: l
+  hasExpansion: e,
+  row: m,
+  childrenKey: l,
+  expandedIds: y,
+  onToggleExpand: g,
+  depth: d,
+  indentSize: o,
+  expandableConfig: i,
+  children: h
 }) {
-  if (!r || !s) return /* @__PURE__ */ e(V, { children: l });
-  const a = g.original[m], o = Array.isArray(a) && a.length > 0 || !!h?.renderExpandedContent, y = x?.has(g.id) ?? !1;
-  return /* @__PURE__ */ e(
-    J,
+  if (!r || !e) return /* @__PURE__ */ t(V, { children: h });
+  const a = m.original[l], b = Array.isArray(a) && a.length > 0 || !!i?.renderExpandedContent, p = y?.has(m.id) ?? !1;
+  return /* @__PURE__ */ t(
+    G,
     {
-      isExpanded: y,
-      hasChildren: o,
-      depth: u,
-      indentSize: d,
-      onToggle: () => p?.(g.id),
-      children: l
+      isExpanded: p,
+      hasChildren: b,
+      depth: d,
+      indentSize: o,
+      onToggle: () => g?.(m.id),
+      children: h
     }
   );
 }
-function X({
+function Z({
   row: r,
-  rowIndex: s,
-  isInactive: g,
-  isSelected: m,
-  isExpanded: x,
-  hasChildren: p,
-  nestedChildren: u,
-  lastColId: d,
-  lastNonPinnedColId: h,
-  tableConfig: l,
-  table: k,
-  hasSelection: a,
-  selectionState: o,
-  onToggleRowSelection: y,
-  expandedIds: b,
+  rowIndex: e,
+  isInactive: m,
+  isSelected: l,
+  isExpanded: y,
+  hasChildren: g,
+  nestedChildren: d,
+  columnSizing: o,
+  tableConfig: i,
+  table: h,
+  hasSelection: k,
+  selectionState: a,
+  onToggleRowSelection: b,
+  expandedIds: p,
   onToggleExpand: D,
   expandableConfig: f,
-  depth: v,
-  indentSize: W,
-  childrenKey: w
+  depth: u,
+  indentSize: F,
+  childrenKey: v
 }) {
-  const C = f?.enabled ?? !1, i = a ? 40 : 0;
-  return /* @__PURE__ */ E(V, { children: [
-    /* @__PURE__ */ E("tr", { className: j("ckds-dragable-tr flex w-full"), "data-depth": v, style: { position: "relative", zIndex: 0 }, children: [
-      a && /* @__PURE__ */ e("td", { className: "ckds-dragable-td flex items-center justify-center", style: { width: 40, minWidth: 40, maxWidth: 40, height: A, flex: "0 0 40px", position: "sticky", left: 0, zIndex: 2, backgroundColor: "var(--ckds-cell-bg-default, #ffffff)" }, children: /* @__PURE__ */ e(H, { checked: m, onChange: () => y?.(r.id) }) }),
-      r.getVisibleCells().map((t, z) => {
-        const c = t.column.id === d, n = t.column.getIsPinned(), N = c && !n || t.column.id === h, I = z === 0, $ = l.stripedRows && s % 2 !== 0 ? "var(--ckds-cell-bg-striped, var(--ckcl-primary-50))" : "var(--ckds-cell-bg-default, #ffffff)";
-        return /* @__PURE__ */ e(
+  const C = f?.enabled ?? !1, n = k ? 40 : 0;
+  return /* @__PURE__ */ I(V, { children: [
+    /* @__PURE__ */ I("tr", { className: B("ckds-dragable-tr flex w-full"), "data-depth": u, style: { position: "relative", zIndex: 0, borderBottom: "1px solid var(--ckcl-black-50, #F4F4F4)" }, children: [
+      k && /* @__PURE__ */ t("td", { className: "ckds-dragable-td flex items-center justify-center", style: { width: 40, minWidth: 40, maxWidth: 40, height: W, flex: "0 0 40px", position: "sticky", left: 0, zIndex: 2, backgroundColor: E(u, i.stripedRows, e) }, children: /* @__PURE__ */ t(j, { checked: l, onChange: () => b?.(r.id) }) }),
+      r.getVisibleCells().map((s, w) => {
+        const x = w === 0, c = E(u, i.stripedRows, e);
+        return /* @__PURE__ */ t(
           "td",
           {
-            className: j("ckds-dragable-td flex items-center", g ? "text-base-400" : "text-base-content"),
+            className: "ckds-dragable-td flex items-center",
             style: {
-              ...O(t.column, k, i),
-              ...l.wrapText ? { minHeight: `${A}px` } : { height: `${A}px` },
-              width: N ? "100%" : t.column.getSize(),
-              minWidth: t.column.getSize(),
-              maxWidth: N ? void 0 : t.column.getSize(),
-              flex: N ? "1 1 auto" : `0 0 ${t.column.getSize()}px`,
-              justifyContent: G(t.column.columnDef),
-              textAlign: P(t.column.columnDef),
-              backgroundColor: $
+              ...T(s.column, h, n),
+              ...i.wrapText ? { minHeight: `${W}px` } : { height: `${W}px` },
+              ...O(s.column, h.getVisibleLeafColumns(), o),
+              justifyContent: H(s.column.columnDef),
+              textAlign: R(s.column.columnDef),
+              // Explicit color — avoids DaisyUI text-base-* token dependency
+              color: m ? "var(--ckcl-black-400, #737373)" : "var(--ckcl-black-500, #2b2b2b)",
+              backgroundColor: c
             },
-            children: /* @__PURE__ */ e(M, { title: String(t.getValue() ?? ""), wrapText: l.wrapText, children: /* @__PURE__ */ e(
-              R,
+            children: /* @__PURE__ */ t(M, { title: String(s.getValue() ?? ""), wrapText: i.wrapText, children: /* @__PURE__ */ t(
+              J,
               {
-                isFirstDataCol: I,
+                isFirstDataCol: x,
                 hasExpansion: C,
                 row: r,
-                childrenKey: w,
-                expandedIds: b,
+                childrenKey: v,
+                expandedIds: p,
                 onToggleExpand: D,
-                depth: v,
-                indentSize: W,
+                depth: u,
+                indentSize: F,
                 expandableConfig: f,
-                children: _(t.column.columnDef.cell ?? t.column.columnDef.header, t.getContext())
+                children: z(s.column.columnDef.cell ?? s.column.columnDef.header, s.getContext())
               }
             ) })
           },
-          t.id
+          s.id
         );
       })
     ] }),
-    x && f?.renderExpandedContent && /* @__PURE__ */ E("tr", { className: "ckds-dragable-tr flex w-full", "data-depth": v, children: [
-      a && /* @__PURE__ */ e("td", { className: "ckds-dragable-td", style: { width: 40, minWidth: 40, maxWidth: 40, flex: "0 0 40px", backgroundColor: "var(--ckds-cell-bg-default, #ffffff)" } }),
-      /* @__PURE__ */ e(
+    y && f?.renderExpandedContent && /* @__PURE__ */ I("tr", { className: "ckds-dragable-tr flex w-full", "data-depth": u, children: [
+      k && /* @__PURE__ */ t("td", { className: "ckds-dragable-td", style: { width: 40, minWidth: 40, maxWidth: 40, flex: "0 0 40px", backgroundColor: E(u, i.stripedRows, e) } }),
+      /* @__PURE__ */ t(
         "td",
         {
           className: "ckds-dragable-td",
-          colSpan: k.getVisibleLeafColumns().length,
-          style: { flex: "1 1 auto", padding: 0, backgroundColor: "var(--ckds-cell-bg-default, #ffffff)" },
-          children: f.renderExpandedContent(r.original, v)
+          colSpan: h.getVisibleLeafColumns().length,
+          style: { flex: "1 1 auto", padding: 0, backgroundColor: E(u, i.stripedRows, e) },
+          children: f.renderExpandedContent(r.original, u)
         }
       )
     ] }),
-    x && p && u && !f?.renderExpandedContent && /* @__PURE__ */ e(
-      Y,
+    y && g && d && !f?.renderExpandedContent && /* @__PURE__ */ t(
+      P,
       {
-        nestedChildren: u,
+        nestedChildren: d,
         parentId: r.id,
-        depth: v + 1,
-        lastColId: d,
-        lastNonPinnedColId: h,
-        tableConfig: l,
-        table: k,
-        hasSelection: a,
-        selectionState: o,
-        onToggleRowSelection: y,
-        expandedIds: b,
+        depth: u + 1,
+        columnSizing: o,
+        tableConfig: i,
+        table: h,
+        hasSelection: k,
+        selectionState: a,
+        onToggleRowSelection: b,
+        expandedIds: p,
         onToggleExpand: D,
         expandableConfig: f,
-        indentSize: W,
-        childrenKey: w
+        indentSize: F,
+        childrenKey: v
       }
     )
   ] });
 }
-function Y({
+function P({
   nestedChildren: r,
-  parentId: s,
-  depth: g,
-  lastColId: m,
-  lastNonPinnedColId: x,
-  tableConfig: p,
-  table: u,
+  parentId: e,
+  depth: m,
+  columnSizing: l,
+  tableConfig: y,
+  table: g,
   hasSelection: d,
-  selectionState: h,
-  onToggleRowSelection: l,
-  expandedIds: k,
-  onToggleExpand: a,
-  expandableConfig: o,
-  indentSize: y,
-  childrenKey: b
+  selectionState: o,
+  onToggleRowSelection: i,
+  expandedIds: h,
+  onToggleExpand: k,
+  expandableConfig: a,
+  indentSize: b,
+  childrenKey: p
 }) {
-  const D = u.getVisibleLeafColumns(), f = o?.enabled ?? !1;
-  return /* @__PURE__ */ e(V, { children: r.map((v, W) => {
-    const w = v, C = `${s}.${W}`, i = w[b], t = Array.isArray(i) && i.length > 0, z = k?.has(C) ?? !1, c = d && (h?.selectedIds.has(C) ?? !1), n = w?.status?.toLowerCase?.() === "inactive";
-    return /* @__PURE__ */ e(
-      Z,
+  const D = g.getVisibleLeafColumns(), f = a?.enabled ?? !1;
+  return /* @__PURE__ */ t(V, { children: r.map((u, F) => {
+    const v = u, C = `${e}.${F}`, n = v[p], s = Array.isArray(n) && n.length > 0, w = h?.has(C) ?? !1, x = d && (o?.selectedIds.has(C) ?? !1), c = v?.status?.toLowerCase?.() === "inactive";
+    return /* @__PURE__ */ t(
+      S,
       {
-        childRecord: w,
+        childRecord: v,
         childRowId: C,
-        childIndex: W,
-        childIsInactive: n,
-        childIsSelected: c,
-        childIsExpanded: z,
-        childHasChildren: t,
-        childChildren: i,
-        depth: g,
-        lastColId: m,
-        lastNonPinnedColId: x,
-        tableConfig: p,
-        table: u,
+        childIndex: F,
+        childIsInactive: c,
+        childIsSelected: x,
+        childIsExpanded: w,
+        childHasChildren: s,
+        childChildren: n,
+        depth: m,
+        columnSizing: l,
+        tableConfig: y,
+        table: g,
         visibleCols: D,
         hasSelection: d,
         hasExpansion: f,
-        selectionState: h,
-        onToggleRowSelection: l,
-        expandedIds: k,
-        onToggleExpand: a,
-        expandableConfig: o,
-        indentSize: y,
-        childrenKey: b
+        selectionState: o,
+        onToggleRowSelection: i,
+        expandedIds: h,
+        onToggleExpand: k,
+        expandableConfig: a,
+        indentSize: b,
+        childrenKey: p
       },
       C
     );
   }) });
 }
-function Z({
+function S({
   childRecord: r,
-  childRowId: s,
-  childIndex: g,
-  childIsInactive: m,
-  childIsSelected: x,
-  childIsExpanded: p,
-  childHasChildren: u,
-  childChildren: d,
-  depth: h,
-  lastColId: l,
-  lastNonPinnedColId: k,
-  tableConfig: a,
-  table: o,
-  visibleCols: y,
-  hasSelection: b,
+  childRowId: e,
+  childIndex: m,
+  childIsInactive: l,
+  childIsSelected: y,
+  childIsExpanded: g,
+  childHasChildren: d,
+  childChildren: o,
+  depth: i,
+  columnSizing: h,
+  tableConfig: k,
+  table: a,
+  visibleCols: b,
+  hasSelection: p,
   hasExpansion: D,
   selectionState: f,
-  onToggleRowSelection: v,
-  expandedIds: W,
-  onToggleExpand: w,
+  onToggleRowSelection: u,
+  expandedIds: F,
+  onToggleExpand: v,
   expandableConfig: C,
-  indentSize: i,
-  childrenKey: t
+  indentSize: n,
+  childrenKey: s
 }) {
-  const z = b ? 40 : 0;
-  return /* @__PURE__ */ E(V, { children: [
-    /* @__PURE__ */ E("tr", { className: j("ckds-dragable-tr flex w-full"), "data-depth": h, style: { position: "relative", zIndex: 0 }, children: [
-      b && /* @__PURE__ */ e("td", { className: "ckds-dragable-td flex items-center justify-center", style: { width: 40, minWidth: 40, maxWidth: 40, height: A, flex: "0 0 40px", position: "sticky", left: 0, zIndex: 2, backgroundColor: "var(--ckds-cell-bg-default, #ffffff)" }, children: /* @__PURE__ */ e(H, { checked: x, onChange: () => v?.(s) }) }),
-      y.map((c, n) => {
-        const N = c.id === l, I = c.getIsPinned(), $ = N && !I || c.id === k, S = n === 0, L = r[c.id], F = L != null ? String(L) : "", T = a.stripedRows && g % 2 !== 0 ? "var(--ckds-cell-bg-striped, var(--ckcl-primary-50))" : "var(--ckds-cell-bg-default, #ffffff)", q = S && D ? /* @__PURE__ */ e(
-          J,
+  const w = p ? 40 : 0;
+  return /* @__PURE__ */ I(V, { children: [
+    /* @__PURE__ */ I("tr", { className: B("ckds-dragable-tr flex w-full"), "data-depth": i, style: { position: "relative", zIndex: 0, borderBottom: "1px solid var(--ckcl-black-50, #F4F4F4)" }, children: [
+      p && /* @__PURE__ */ t("td", { className: "ckds-dragable-td flex items-center justify-center", style: { width: 40, minWidth: 40, maxWidth: 40, height: W, flex: "0 0 40px", position: "sticky", left: 0, zIndex: 2, backgroundColor: "var(--ckds-cell-bg-default, #ffffff)" }, children: /* @__PURE__ */ t(j, { checked: y, onChange: () => u?.(e) }) }),
+      b.map((x, c) => {
+        const $ = c === 0, A = r[x.id], N = A != null ? String(A) : "", L = E(i, k.stripedRows, m), Y = $ && D ? /* @__PURE__ */ t(
+          G,
           {
-            isExpanded: p,
-            hasChildren: u,
-            depth: h,
-            indentSize: i,
-            onToggle: () => w?.(s),
-            children: F
+            isExpanded: g,
+            hasChildren: d,
+            depth: i,
+            indentSize: n,
+            onToggle: () => v?.(e),
+            children: N
           }
-        ) : F;
-        return /* @__PURE__ */ e(
+        ) : N;
+        return /* @__PURE__ */ t(
           "td",
           {
-            className: j("ckds-dragable-td flex items-center", m ? "text-base-400" : "text-base-content"),
+            className: "ckds-dragable-td flex items-center",
             style: {
-              ...O(c, o, z),
-              ...a.wrapText ? { minHeight: `${A}px` } : { height: `${A}px` },
-              width: $ ? "100%" : c.getSize(),
-              minWidth: c.getSize(),
-              maxWidth: $ ? void 0 : c.getSize(),
-              flex: $ ? "1 1 auto" : `0 0 ${c.getSize()}px`,
-              backgroundColor: T,
-              justifyContent: G(c.columnDef),
-              textAlign: P(c.columnDef)
+              ...T(x, a, w),
+              ...k.wrapText ? { minHeight: `${W}px` } : { height: `${W}px` },
+              ...O(x, b, h),
+              backgroundColor: L,
+              // Explicit color — avoids DaisyUI text-base-* token dependency
+              color: l ? "var(--ckcl-black-400, #737373)" : "var(--ckcl-black-500, #2b2b2b)",
+              justifyContent: H(x.columnDef),
+              textAlign: R(x.columnDef)
             },
-            children: /* @__PURE__ */ e(M, { title: F, wrapText: a.wrapText, children: q })
+            children: /* @__PURE__ */ t(M, { title: N, wrapText: k.wrapText, children: Y })
           },
-          `${s}-${c.id}`
+          `${e}-${x.id}`
         );
       })
     ] }),
-    p && u && d && /* @__PURE__ */ e(
-      Y,
+    g && d && o && /* @__PURE__ */ t(
+      P,
       {
-        nestedChildren: d,
-        parentId: s,
-        depth: h + 1,
-        lastColId: l,
-        lastNonPinnedColId: k,
-        tableConfig: a,
-        table: o,
-        hasSelection: b,
+        nestedChildren: o,
+        parentId: e,
+        depth: i + 1,
+        columnSizing: h,
+        tableConfig: k,
+        table: a,
+        hasSelection: p,
         selectionState: f,
-        onToggleRowSelection: v,
-        expandedIds: W,
-        onToggleExpand: w,
+        onToggleRowSelection: u,
+        expandedIds: F,
+        onToggleExpand: v,
         expandableConfig: C,
-        indentSize: i,
-        childrenKey: t
+        indentSize: n,
+        childrenKey: s
       }
     )
   ] });
 }
 export {
-  le as default
+  ae as default
 };