@mci-ui/mci-ui 0.0.86 → 0.0.87

package/dist/shared/ui/mciTable/MciTable.js

@@ -1,153 +1,192 @@
-import { jsx as t, jsxs as r } from "react/jsx-runtime";
-import { ConfoundedSquare as E, SortVertical as G, SortFromTopToBottom as I, SortFromBottomToTop as W } from "@solar-icons/react";
-import { useState as _, useMemo as k, useEffect as H, useCallback as J } from "react";
-import { cn as h } from "../../lib/utils.js";
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { ConfoundedSquare as I, SortVertical as W, SortFromTopToBottom as _, SortFromBottomToTop as H } from "@solar-icons/react";
+import { useState as J, useMemo as x, useEffect as K, useCallback as O } from "react";
+import { cn as a } from "../../lib/utils.js";
 /* empty css                 */
-import T from "../mciCheck/MciCheck.js";
-import z from "../mciSkeleton/MciSkeleton.js";
-import K from "./MciTableClamp2.js";
-import { sortRows as O, normalizeColWidth as Q } from "./mci-table.utils.js";
-function le({
-  columns: m,
-  data: y = [],
-  loading: b = !1,
-  skeletonRows: A = 5,
-  noDataText: M = "",
-  sort: a,
-  onSortChange: v,
-  className: B,
-  headerClassName: N,
-  bodyClassName: w,
-  rowKey: f = "id",
-  rowSelection: l
+import z from "../mciCheck/MciCheck.js";
+import A from "../mciSkeleton/MciSkeleton.js";
+import Q from "./MciTableClamp2.js";
+import { sortRows as U, normalizeColWidth as X } from "./mci-table.utils.js";
+function re({
+  columns: b,
+  data: v = [],
+  loading: p = !1,
+  skeletonRows: B = 5,
+  noDataText: D = "",
+  sort: n,
+  onSortChange: N,
+  className: L,
+  headerClassName: w,
+  bodyClassName: C,
+  darkMode: r = !1,
+  rowKey: u = "id",
+  rowSelection: s
 }) {
-  const [D, C] = _(null), n = a ?? D, u = k(() => Array.isArray(y) ? y : [], [y]), R = k(() => O(u, n, !!a), [u, n, a]);
-  H(() => {
-    a !== void 0 && C(null);
-  }, [a]);
-  const o = k(
-    () => b ? [] : a ? u : R,
-    [b, a, u, R]
-  ), L = J(
+  const [P, R] = J(null), d = n ?? P, g = x(() => Array.isArray(v) ? v : [], [v]), j = x(() => U(g, d, !!n), [g, d, n]);
+  K(() => {
+    n !== void 0 && R(null);
+  }, [n]);
+  const m = x(
+    () => p ? [] : n ? g : j,
+    [p, n, g, j]
+  ), F = O(
     (e) => {
       if (!e.sortable) return;
-      let s = null;
-      n?.key !== e.key ? s = { key: e.key, direction: "asc" } : n.direction === "asc" && (s = { key: e.key, direction: "desc" }), a !== void 0 ? v?.(s) : C(s);
+      let l = null;
+      d?.key !== e.key ? l = { key: e.key, direction: "asc" } : d.direction === "asc" && (l = { key: e.key, direction: "desc" }), n !== void 0 ? N?.(l) : R(l);
     },
-    [n, a, v]
-  ), P = (e) => {
-    if (!l) return;
-    const { onChange: s, getCheckboxProps: c } = l;
+    [d, n, N]
+  ), V = (e) => {
+    if (!s) return;
+    const { onChange: l, getCheckboxProps: o } = s;
     if (e.target.checked) {
-      const i = o.filter((d) => !c?.(d)?.disabled).map((d) => d[f]);
-      s(i);
+      const i = m.filter((h) => !o?.(h)?.disabled).map((h) => h[u]);
+      l(i);
     } else
-      s([]);
-  }, F = (e, s) => {
-    if (!l) return;
-    const { selectedRowKeys: c, onChange: g } = l, p = e[f], i = s ? [...c, p] : c.filter((d) => d !== p);
-    g(i);
-  }, V = k(() => {
-    if (!l || o.length === 0) return !1;
-    const e = o.filter((s) => !l.getCheckboxProps?.(s)?.disabled);
+      l([]);
+  }, q = (e, l) => {
+    if (!s) return;
+    const { selectedRowKeys: o, onChange: y } = s, f = e[u], i = l ? [...o, f] : o.filter((h) => h !== f);
+    y(i);
+  }, E = x(() => {
+    if (!s || m.length === 0) return !1;
+    const e = m.filter((l) => !s.getCheckboxProps?.(l)?.disabled);
     return e.length === 0 ? !1 : e.every(
-      (s) => l.selectedRowKeys.includes(s[f])
+      (l) => s.selectedRowKeys.includes(l[u])
     );
-  }, [l, o, f]), q = (e) => e.sortable ? !n || n.key !== e.key ? /* @__PURE__ */ t(G, { weight: "Linear", size: 20, className: "text-slate-base shrink-0" }) : n.direction === "asc" ? /* @__PURE__ */ t(I, { weight: "Linear", size: 20, className: "text-slate-base shrink-0" }) : /* @__PURE__ */ t(W, { weight: "Linear", size: 20, className: "text-slate-base shrink-0" }) : null, j = () => /* @__PURE__ */ r("colgroup", { children: [
-    l && /* @__PURE__ */ t("col", { style: { width: 48 } }),
-    m.map((e) => /* @__PURE__ */ t("col", { style: { width: Q(e.width) ?? "auto" } }, e.key))
+  }, [s, m, u]), G = (e) => {
+    const l = a(r ? "text-neutral-100" : "text-slate-base", "shrink-0");
+    return e.sortable ? !d || d.key !== e.key ? /* @__PURE__ */ t(W, { weight: "Linear", size: 20, className: l }) : d.direction === "asc" ? /* @__PURE__ */ t(_, { weight: "Linear", size: 20, className: l }) : /* @__PURE__ */ t(H, { weight: "Linear", size: 20, className: l }) : null;
+  }, T = () => /* @__PURE__ */ c("colgroup", { children: [
+    s && /* @__PURE__ */ t("col", { style: { width: 48 } }),
+    b.map((e) => /* @__PURE__ */ t("col", { style: { width: X(e.width) ?? "auto" } }, e.key))
   ] });
   return /* @__PURE__ */ t(
     "div",
     {
-      className: h(
+      className: a(
         "w-full overflow-x-auto pb-0.5",
         "[&::-webkit-scrollbar]:h-1",
         "[&::-webkit-scrollbar-track]:bg-transparent",
-        "[&::-webkit-scrollbar-thumb]:bg-slate-200",
+        r ? "[&::-webkit-scrollbar-thumb]:bg-neutral-200" : "[&::-webkit-scrollbar-thumb]:bg-slate-200",
         "[&::-webkit-scrollbar-thumb]:rounded-full",
-        "hover:[&::-webkit-scrollbar-thumb]:bg-slate-300",
-        B
+        r ? "hover:[&::-webkit-scrollbar-thumb]:bg-neutral-100" : "hover:[&::-webkit-scrollbar-thumb]:bg-slate-300",
+        L
       ),
-      children: /* @__PURE__ */ r("div", { className: "inline-block min-w-full align-middle", children: [
-        /* @__PURE__ */ t("div", { className: "overflow-hidden rounded-xl border border-slate-200 bg-slate-100", children: /* @__PURE__ */ r("table", { className: "w-full table-fixed", children: [
-          j(),
-          /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ r("tr", { children: [
-            l && /* @__PURE__ */ t("th", { className: h("w-12 px-4 py-3", N), children: /* @__PURE__ */ t("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ t(
-              T,
-              {
-                checked: V,
-                onChange: P,
-                variant: "yellow",
-                disabled: b || o.length === 0
-              }
-            ) }) }),
-            m.map((e) => /* @__PURE__ */ t(
-              "th",
-              {
-                onClick: () => L(e),
-                className: h(
-                  "px-4 py-3 text-left text-sm font-medium text-slate-700 transition-colors",
-                  "whitespace-nowrap overflow-hidden text-ellipsis",
-                  e.align === "center" && "text-center",
-                  e.align === "right" && "text-right",
-                  e.sortable && "cursor-pointer hover:bg-slate-200",
-                  N
-                ),
-                children: /* @__PURE__ */ r("div", { className: h("flex items-center gap-2 min-w-0", e.align === "right" && "justify-end"), children: [
-                  /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate", title: e.title, children: e.title }),
-                  q(e)
-                ] })
-              },
-              e.key
-            ))
-          ] }) })
-        ] }) }),
-        /* @__PURE__ */ t("div", { className: "rounded-xl border border-t-0 border-slate-200 bg-white overflow-hidden", children: /* @__PURE__ */ r("table", { className: "w-full table-fixed", children: [
-          j(),
-          /* @__PURE__ */ t("tbody", { className: "divide-y divide-slate-200", children: b ? Array.from({ length: A }).map((e, s) => /* @__PURE__ */ r("tr", { children: [
-            l && /* @__PURE__ */ t("td", { className: "w-12 px-4 py-3", children: /* @__PURE__ */ t(z, { height: 20, width: 20, variant: "rounded" }) }),
-            m.map((c) => /* @__PURE__ */ t("td", { className: "px-4 py-3", children: /* @__PURE__ */ t(z, { height: 30, variant: "rounded" }) }, c.key))
-          ] }, s)) : o.length === 0 ? /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", { colSpan: m.length + (l ? 1 : 0), className: "py-20", children: /* @__PURE__ */ r("div", { className: "flex flex-col items-center justify-center", children: [
-            /* @__PURE__ */ t("div", { className: "relative mb-4", children: /* @__PURE__ */ t(E, { weight: "Bold", size: 64, className: "animate-float text-slate-400" }) }),
-            /* @__PURE__ */ t("p", { className: "text-sm font-medium text-slate-400", children: M })
-          ] }) }) }) : o.map((e, s) => {
-            const c = e[f], g = l?.selectedRowKeys.includes(c), p = l?.getCheckboxProps?.(e)?.disabled;
-            return /* @__PURE__ */ r("tr", { className: "group transition-colors hover:bg-slate-50", children: [
-              l && /* @__PURE__ */ t("td", { className: h("w-12 px-4 py-3 align-top", w), children: /* @__PURE__ */ t("div", { className: "flex items-center justify-center pt-1", children: /* @__PURE__ */ t(
-                T,
-                {
-                  checked: g,
-                  disabled: p,
-                  variant: "yellow",
-                  onChange: (i) => F(e, i.target.checked)
-                }
-              ) }) }),
-              m.map((i) => {
-                const d = e[i.key], x = i.render ? i.render(d, e) : String(d ?? "-");
-                return /* @__PURE__ */ t(
-                  "td",
+      children: /* @__PURE__ */ c("div", { className: "inline-block min-w-full align-middle", children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: a(
+              "overflow-hidden rounded-xl border",
+              r ? "border-neutral-200 bg-neutral-300" : "border-slate-200 bg-slate-100"
+            ),
+            children: /* @__PURE__ */ c("table", { className: "w-full table-fixed", children: [
+              T(),
+              /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ c("tr", { children: [
+                s && /* @__PURE__ */ t("th", { className: a("w-12 px-4 py-3", w), children: /* @__PURE__ */ t("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ t(
+                  z,
                   {
-                    className: h(
-                      "align-top px-4 py-3 text-sm font-normal text-black",
-                      "min-w-0 whitespace-normal",
-                      i.align === "center" && "text-center",
-                      i.align === "right" && "text-right",
-                      w,
-                      i.className
+                    checked: E,
+                    onChange: V,
+                    variant: "yellow",
+                    darkMode: r,
+                    disabled: p || m.length === 0
+                  }
+                ) }) }),
+                b.map((e) => /* @__PURE__ */ t(
+                  "th",
+                  {
+                    onClick: () => F(e),
+                    className: a(
+                      "px-4 py-3 text-left text-sm font-medium transition-colors",
+                      r ? "text-neutral-50" : "text-slate-700",
+                      "whitespace-nowrap overflow-hidden text-ellipsis",
+                      e.align === "center" && "text-center",
+                      e.align === "right" && "text-right",
+                      e.sortable && (r ? "cursor-pointer hover:bg-neutral-200" : "cursor-pointer hover:bg-slate-200"),
+                      w
                     ),
-                    children: /* @__PURE__ */ t(K, { title: typeof x == "string" ? x : void 0, children: x })
+                    children: /* @__PURE__ */ c(
+                      "div",
+                      {
+                        className: a("flex items-center gap-2 min-w-0", e.align === "right" && "justify-end"),
+                        children: [
+                          /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate", title: e.title, children: e.title }),
+                          G(e)
+                        ]
+                      }
+                    )
                   },
-                  i.key
-                );
-              })
-            ] }, s);
-          }) })
-        ] }) })
+                  e.key
+                ))
+              ] }) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: a(
+              "overflow-hidden rounded-xl border border-t-0",
+              r ? "border-neutral-200 bg-transparent" : "border-slate-200 bg-white"
+            ),
+            children: /* @__PURE__ */ c("table", { className: "w-full table-fixed", children: [
+              T(),
+              /* @__PURE__ */ t("tbody", { className: a("divide-y", r ? "divide-neutral-200" : "divide-slate-200"), children: p ? Array.from({ length: B }).map((e, l) => /* @__PURE__ */ c("tr", { children: [
+                s && /* @__PURE__ */ t("td", { className: "w-12 px-4 py-3", children: /* @__PURE__ */ t(A, { height: 20, width: 20, variant: "rounded" }) }),
+                b.map((o) => /* @__PURE__ */ t("td", { className: "px-4 py-3", children: /* @__PURE__ */ t(A, { height: 30, variant: "rounded" }) }, o.key))
+              ] }, l)) : m.length === 0 ? /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("td", { colSpan: b.length + (s ? 1 : 0), className: "py-20", children: /* @__PURE__ */ c("div", { className: "flex flex-col items-center justify-center", children: [
+                /* @__PURE__ */ t("div", { className: "relative mb-4", children: /* @__PURE__ */ t(
+                  I,
+                  {
+                    weight: "Bold",
+                    size: 64,
+                    className: a("animate-float", r ? "text-neutral-100" : "text-slate-400")
+                  }
+                ) }),
+                /* @__PURE__ */ t("p", { className: a("text-sm font-medium", r ? "text-neutral-100" : "text-slate-400"), children: D })
+              ] }) }) }) : m.map((e, l) => {
+                const o = e[u], y = s?.selectedRowKeys.includes(o), f = s?.getCheckboxProps?.(e)?.disabled;
+                return /* @__PURE__ */ c("tr", { className: a("group transition-colors", r ? "hover:bg-neutral-100/35" : "hover:bg-slate-50"), children: [
+                  s && /* @__PURE__ */ t("td", { className: a("w-12 px-4 py-3 align-top", C), children: /* @__PURE__ */ t("div", { className: "flex items-center justify-center pt-1", children: /* @__PURE__ */ t(
+                    z,
+                    {
+                      checked: y,
+                      disabled: f,
+                      variant: "yellow",
+                      darkMode: r,
+                      onChange: (i) => q(e, i.target.checked)
+                    }
+                  ) }) }),
+                  b.map((i) => {
+                    const h = e[i.key], k = i.render ? i.render(h, e) : String(h ?? "-");
+                    return /* @__PURE__ */ t(
+                      "td",
+                      {
+                        className: a(
+                          "align-top px-4 py-3 text-sm font-normal",
+                          r ? "text-neutral-50" : "text-black",
+                          "min-w-0 whitespace-normal",
+                          i.align === "center" && "text-center",
+                          i.align === "right" && "text-right",
+                          C,
+                          i.className
+                        ),
+                        children: /* @__PURE__ */ t(Q, { title: typeof k == "string" ? k : void 0, children: k })
+                      },
+                      i.key
+                    );
+                  })
+                ] }, l);
+              }) })
+            ] })
+          }
+        )
       ] })
     }
   );
 }
 export {
-  le as default
+  re as default
 };

package/dist/shared/ui/mciTable/MciTableColumnsPanel.js

@@ -1,190 +1,197 @@
-import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import { useRef as G, useEffect as K, useMemo as j, useState as h, useCallback as b } from "react";
-import { TransferVertical as _ } from "@solar-icons/react";
-import { useClickOutside as q, cn as f } from "../../lib/utils.js";
+import { jsxs as g, jsx as l } from "react/jsx-runtime";
+import { useRef as K, useEffect as _, useMemo as F, useState as p, useCallback as d } from "react";
+import { TransferVertical as q } from "@solar-icons/react";
+import { useClickOutside as H, cn as s } from "../../lib/utils.js";
 /* empty css                 */
-import H from "../mciCheck/MciCheck.js";
-const J = {
+import J from "../mciCheck/MciCheck.js";
+const U = {
   ru: {
     title: "Настройки",
     close: "Закрыть",
     activeColumns: "Активные колонки",
-    minColumns: (i) => `Минимум ${i} колонок`,
+    minColumns: (c) => `Минимум ${c} колонок`,
     drag: "Перетащить"
   },
   uz: {
     title: "Sozlamalar",
     close: "Yopish",
     activeColumns: "Aktiv ustunlar",
-    minColumns: (i) => `Kamida ${i} ta ustun`,
+    minColumns: (c) => `Kamida ${c} ta ustun`,
     drag: "Sudrash"
   }
 };
-function ee({
-  open: i,
-  onClose: D,
-  columns: s,
-  hidden: w,
-  onToggle: C,
-  onMove: y,
-  onMoveByKey: p,
-  minVisible: T = 5,
-  locale: F = "ru"
+function te({
+  open: c,
+  onClose: C,
+  columns: i,
+  hidden: y,
+  onToggle: T,
+  onMove: k,
+  onMoveByKey: x,
+  minVisible: S = 5,
+  locale: Q = "ru",
+  darkMode: r = !1
 }) {
-  const S = G(null), { handleClick: v } = q(S, D), d = J[F];
-  K(() => {
-    if (i)
+  const I = K(null), { handleClick: v } = H(I, C), m = U[Q];
+  _(() => {
+    if (c)
       return document.addEventListener("mousedown", v), () => document.removeEventListener("mousedown", v);
-  }, [i, v]);
-  const x = j(() => new Set(w), [w]), I = j(() => {
+  }, [c, v]);
+  const w = F(() => new Set(y), [y]), O = F(() => {
     let e = 0;
-    for (const t of s) x.has(t.key) || e++;
+    for (const t of i) w.has(t.key) || e++;
     return e;
-  }, [s, x]), [k, O] = h(null), [E, A] = h(null), [Q, L] = h(null), [m, N] = h("before"), z = b(
-    (e, t, r) => {
-      let a = r === "after" ? t + 1 : t;
-      return e < a && (a -= 1), a;
+  }, [i, w]), [A, E] = p(null), [L, N] = p(null), [Y, z] = p(null), [f, D] = p("before"), P = d(
+    (e, t, a) => {
+      let n = a === "after" ? t + 1 : t;
+      return e < n && (n -= 1), n;
     },
     []
-  ), g = b(() => {
-    O(null), L(null), A(null), N("before");
-  }, []), Y = b(
-    (e, t, r) => {
-      O(t), L(String(r)), A(null), N("before"), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", String(t));
-      const a = new Image();
-      a.src = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", e.dataTransfer.setDragImage(a, 0, 0);
+  ), h = d(() => {
+    E(null), z(null), N(null), D("before");
+  }, []), $ = d(
+    (e, t, a) => {
+      E(t), z(String(a)), N(null), D("before"), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", String(t));
+      const n = new Image();
+      n.src = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", e.dataTransfer.setDragImage(n, 0, 0);
     },
     []
-  ), $ = b(
+  ), B = d(
     (e, t) => {
       e.preventDefault();
-      const r = k ?? Number.parseInt(e.dataTransfer.getData("text/plain") || "-1", 10);
-      if (!Number.isFinite(r) || r < 0) {
-        g();
+      const a = A ?? Number.parseInt(e.dataTransfer.getData("text/plain") || "-1", 10);
+      if (!Number.isFinite(a) || a < 0) {
+        h();
         return;
       }
-      const a = s[r], c = s[t];
-      if (!a || !c) {
-        g();
+      const n = i[a], b = i[t];
+      if (!n || !b) {
+        h();
         return;
       }
-      const l = z(r, t, m);
-      l !== r && (p ? p(a.key, c.key, m) : y(r, l)), g();
+      const o = P(a, t, f);
+      o !== a && (x ? x(n.key, b.key, f) : k(a, o)), h();
     },
-    [s, z, k, m, y, p, g]
-  ), B = b(
+    [i, P, A, f, k, x, h]
+  ), G = d(
     (e, t) => {
-      t || C(e);
+      t || T(e);
     },
-    [C]
+    [T]
   );
-  return i ? /* @__PURE__ */ u(
+  return c ? /* @__PURE__ */ g(
     "div",
     {
-      ref: S,
-      className: f(
+      ref: I,
+      className: s(
         "absolute right-0 top-full z-50 mt-2 w-[320px]",
-        "rounded-2xl p-4 bg-white",
-        "border border-slate-200"
+        "rounded-2xl p-4",
+        r ? "border border-neutral-200 bg-[#22242A] shadow-xl" : "border border-slate-200 bg-white"
       ),
       children: [
-        /* @__PURE__ */ u("div", { className: "flex items-center justify-between gap-4", children: [
-          /* @__PURE__ */ n("h4", { className: "text-slate-600 text-large font-normal", children: d.title }),
-          /* @__PURE__ */ n(
+        /* @__PURE__ */ g("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ l("h4", { className: s("text-large font-normal", r ? "text-neutral-50" : "text-slate-600"), children: m.title }),
+          /* @__PURE__ */ l(
             "button",
             {
               type: "button",
-              onClick: D,
-              className: "rounded-lg px-2 py-1 text-slate-500 hover:bg-slate-100",
-              "aria-label": d.close,
+              onClick: C,
+              className: s(
+                "rounded-lg px-2 py-1",
+                r ? "text-neutral-100 hover:bg-neutral-300" : "text-slate-500 hover:bg-slate-100"
+              ),
+              "aria-label": m.close,
               children: "✕"
             }
           )
         ] }),
-        /* @__PURE__ */ n("div", { className: "my-4 h-px bg-slate-100" }),
-        /* @__PURE__ */ u("p", { className: "mb-3 text-xs text-slate-500", children: [
-          d.activeColumns,
+        /* @__PURE__ */ l("div", { className: s("my-4 h-px", r ? "bg-neutral-200" : "bg-slate-100") }),
+        /* @__PURE__ */ g("p", { className: s("mb-3 text-xs", r ? "text-neutral-100" : "text-slate-500"), children: [
+          m.activeColumns,
           ": ",
-          I,
+          O,
           "/",
-          s.length
+          i.length
         ] }),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ l(
           "div",
           {
-            className: f(
+            className: s(
               "max-h-[275px] overflow-auto",
               "[&::-webkit-scrollbar]:w-1.5",
               "[&::-webkit-scrollbar-track]:bg-transparent",
-              "[&::-webkit-scrollbar-thumb]:bg-slate-200",
+              r ? "[&::-webkit-scrollbar-thumb]:bg-neutral-200" : "[&::-webkit-scrollbar-thumb]:bg-slate-200",
               "[&::-webkit-scrollbar-thumb]:rounded-full",
-              "hover:[&::-webkit-scrollbar-thumb]:bg-slate-300"
+              r ? "hover:[&::-webkit-scrollbar-thumb]:bg-neutral-100" : "hover:[&::-webkit-scrollbar-thumb]:bg-slate-300"
             ),
-            children: s.map((e, t) => {
-              const r = !x.has(e.key), a = r && I <= T, c = E === t, l = Q === e.key;
-              return /* @__PURE__ */ u("div", { className: "relative", children: [
-                c && !l && /* @__PURE__ */ n(
+            children: i.map((e, t) => {
+              const a = !w.has(e.key), n = a && O <= S, b = L === t, o = Y === e.key;
+              return /* @__PURE__ */ g("div", { className: "relative", children: [
+                b && !o && /* @__PURE__ */ l(
                   "div",
                   {
-                    className: f(
-                      "pointer-events-none absolute left-2 right-2 z-10 h-0.5 rounded-full bg-blue-300",
-                      m === "before" ? "top-0" : "bottom-0"
+                    className: s(
+                      "pointer-events-none absolute left-2 right-2 z-10 h-0.5 rounded-full",
+                      r ? "bg-blue-500" : "bg-blue-300",
+                      f === "before" ? "top-0" : "bottom-0"
                     )
                   }
                 ),
-                /* @__PURE__ */ u(
+                /* @__PURE__ */ g(
                   "div",
                   {
                     draggable: !0,
-                    onDragStart: (o) => Y(o, t, e.key),
-                    onDragOver: (o) => {
-                      if (k == null) return;
-                      o.preventDefault(), o.dataTransfer.dropEffect = "move";
-                      const P = o.currentTarget.getBoundingClientRect(), R = o.clientY - P.top > P.height / 2 ? "after" : "before";
-                      E !== t && A(t), m !== R && N(R);
+                    onDragStart: (u) => $(u, t, e.key),
+                    onDragOver: (u) => {
+                      if (A == null) return;
+                      u.preventDefault(), u.dataTransfer.dropEffect = "move";
+                      const R = u.currentTarget.getBoundingClientRect(), j = u.clientY - R.top > R.height / 2 ? "after" : "before";
+                      L !== t && N(t), f !== j && D(j);
                     },
-                    onDrop: (o) => $(o, t),
-                    onDragEnd: g,
-                    className: f(
+                    onDrop: (u) => B(u, t),
+                    onDragEnd: h,
+                    className: s(
                       "group flex items-center py-2 px-1 gap-4",
                       "rounded-md box-border overflow-visible",
                       "transition-[background,transform] duration-150",
-                      !l && !c && "hover:bg-slate-50",
-                      c && !l && "bg-slate-50",
-                      l && "bg-slate-50 opacity-100 scale-[0.99] cursor-grabbing"
+                      !o && !b && (r ? "hover:bg-neutral-300/60" : "hover:bg-slate-50"),
+                      b && !o && (r ? "bg-neutral-300/60" : "bg-slate-50"),
+                      o && (r ? "bg-neutral-300 opacity-100 scale-[0.99] cursor-grabbing" : "bg-slate-50 opacity-100 scale-[0.99] cursor-grabbing")
                     ),
                     children: [
-                      /* @__PURE__ */ n(
+                      /* @__PURE__ */ l(
                         "button",
                         {
                           type: "button",
-                          className: f(
-                            "shrink-0 text-slate-400",
+                          className: s(
+                            "shrink-0",
+                            r ? "text-neutral-100" : "text-slate-400",
                             "cursor-grab active:cursor-grabbing",
-                            "rounded-lg p-1 hover:bg-slate-100",
-                            l && "cursor-grabbing"
+                            r ? "rounded-lg p-1 hover:bg-neutral-200" : "rounded-lg p-1 hover:bg-slate-100",
+                            o && "cursor-grabbing"
                           ),
-                          "aria-label": d.drag,
-                          children: /* @__PURE__ */ n(_, { weight: "Linear", size: 20 })
+                          "aria-label": m.drag,
+                          children: /* @__PURE__ */ l(q, { weight: "Linear", size: 20 })
                         }
                       ),
-                      /* @__PURE__ */ n("div", { className: "shrink-0", children: /* @__PURE__ */ n(
-                        H,
+                      /* @__PURE__ */ l("div", { className: "shrink-0", children: /* @__PURE__ */ l(
+                        J,
                         {
-                          checked: r,
-                          disabled: a,
-                          onChange: () => B(e.key, a),
-                          variant: "blue"
+                          checked: a,
+                          disabled: n,
+                          onChange: () => G(e.key, n),
+                          variant: "blue",
+                          darkMode: r
                         }
                       ) }),
-                      /* @__PURE__ */ u("div", { className: "min-w-0 flex-1", children: [
-                        /* @__PURE__ */ n("h4", { className: "truncate text-slate-700 text-base font-medium", title: e.title, children: e.title }),
-                        a && /* @__PURE__ */ n("p", { className: "text-xs text-slate-400 mt-0.5", children: d.minColumns(T) })
+                      /* @__PURE__ */ g("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ l("h4", { className: s("truncate text-base font-medium", r ? "text-neutral-50" : "text-slate-700"), title: e.title, children: e.title }),
+                        n && /* @__PURE__ */ l("p", { className: s("mt-0.5 text-xs", r ? "text-neutral-100" : "text-slate-400"), children: m.minColumns(S) })
                       ] })
                     ]
                   }
                 ),
-                t !== s.length - 1 && /* @__PURE__ */ n("div", { className: "mx-2 h-px bg-slate-100" })
+                t !== i.length - 1 && /* @__PURE__ */ l("div", { className: s("mx-2 h-px", r ? "bg-neutral-200" : "bg-slate-100") })
               ] }, e.key);
             })
           }
@@ -194,5 +201,5 @@ function ee({
   ) : null;
 }
 export {
-  ee as default
+  te as default
 };