@mci-ui/mci-ui 0.0.87 → 0.0.89

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

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

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

@@ -1,7 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
-function l({ children: t, title: a }) {
-  return /* @__PURE__ */ e("div", { className: "min-w-0", children: /* @__PURE__ */ e("div", { className: "clamp-2 break-words", title: a ?? (typeof t == "string" ? t : void 0), children: t }) });
+function o({ children: t, title: i }) {
+  const a = typeof t == "string" ? t : void 0;
+  return typeof t != "string" && typeof t != "number" ? /* @__PURE__ */ e("div", { className: "-m-1 inline-flex w-fit max-w-full items-start overflow-visible p-1 align-top", children: t }) : /* @__PURE__ */ e("div", { className: "min-w-0", children: /* @__PURE__ */ e("div", { className: "clamp-2 break-words", title: i ?? a, children: t }) });
 }
 export {
-  l as default
+  o as default
 };

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

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