import { jsx as I } from "react/jsx-runtime";
import { t as T } from "../../classix-DG18itHa.js";
import _, { useMemo as z, useRef as B, useState as h, useEffect as M } from "react";
import { i as N } from "../../icons-06oXnjRF.js";
import { List as k } from "../list/index.js";
import '../../assets/index24.css';const j = "_sortable_c1ptl_5", F = "_dragging_c1ptl_35", G = "_dropping_c1ptl_50", L = "_columns_c1ptl_63", W = "_pseudo_c1ptl_73", s = {
  sortable: j,
  dragging: F,
  dropping: G,
  columns: L,
  pseudo: W,
  "target-above": "_target-above_c1ptl_88",
  "target-below": "_target-below_c1ptl_89"
};
function P({
  children: b,
  className: E,
  columns: u = 1,
  isRearranging: d = !1,
  onChangeOrder: g,
  ...x
}) {
  const v = Number.isFinite(u) ? Math.max(1, Math.floor(u)) : 1, w = z(() => _.Children.toArray(b), [b]), r = B(-1), [i, $] = h({
    height: 0,
    width: 0
  }), [a, f] = h(null), [A, D] = h(null), H = {
    ...x.style,
    "--icon-svg": N("sort", !0),
    "--height": `calc(${i.height}px - var(--scale-16))`,
    "--width": v > 1 ? `calc(${i.width}px - var(--scale-16))` : `${i.width}px`
  }, S = () => {
    r.current = -1, f(null);
  };
  return M(() => {
    d || D(null);
  }, [d]), /* @__PURE__ */ I(k, { className: T(E, s.sortable, v > 1 && s.columns), columns: u, ordered: !0, style: H, ...x, "data-component": "sortable", children: w.map((m, t) => {
    const V = _.isValidElement(m) ? m.key : null;
    return /* @__PURE__ */ I("li", { className: T(a !== null && a > t - 10 && a < t + 10 && s.pseudo, a === t && r.current < t && s["target-below"], a === t && r.current > t && s["target-above"], r.current === t && s.dragging, A === t && d && s.dropping), draggable: !d, onDragEnd: () => S(), onDragOver: (e) => {
      e.preventDefault(), e.dataTransfer.dropEffect = "move";
      const o = r.current;
      if (o < 0 || o === t) return;
      const n = e.currentTarget.getBoundingClientRect(), c = t === o + 1 ? i.height : n.height, l = e.clientY > n.top + c / 2 ? t + 1 : t, p = l > o ? l - 1 : l;
      f(p);
    }, onDragStart: (e) => {
      r.current = t, $({
        height: e.currentTarget.offsetHeight,
        width: e.currentTarget.offsetWidth
      }), e.dataTransfer.setData("text/plain", ""), e.dataTransfer.effectAllowed = "move", f(t);
    }, onDrop: (e) => {
      e.preventDefault();
      const o = r.current, n = a;
      if (o < 0 || n === null || o === n) return;
      D(n);
      const c = w.slice(), [y] = c.splice(o, 1);
      c.splice(n, 0, y), g == null || g(c.map((l, p) => ({
        id: String(_.isValidElement(l) ? l.props["data-id"] ?? `idx-${p}` : `idx-${p}`),
        weight: c.length - 1 - p
      }))), S();
    }, "data-component": "sortable", children: m }, V ?? t);
  }) });
}
export {
  P as Sortable
};
//# sourceMappingURL=index.js.map
