@senitix/ui 0.4.0

package/dist/multi-container-C2UpSw5f.js

@@ -0,0 +1,731 @@
+import { jsx as r, jsxs as F } from "react/jsx-runtime";
+import * as s from "react";
+import { u as B, C as L, g as te, a as j, b as O, c as Q, D as z, d as U, S as $, v as G, h as ne, e as P, f as V, s as X, K as Y, P as Z, p as re, r as ie, i as _ } from "./sortable.esm-Blhf_jh1.js";
+import { c as k } from "./index-CwJPJKOE.js";
+import { c as oe } from "./createLucideIcon-BbeNo6vq.js";
+import { F as H } from "./file-wzTXnWqz.js";
+import { C as se } from "./chevron-right-B3bovvh0.js";
+const R = oe("Folder", [
+  [
+    "path",
+    {
+      d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",
+      key: "1kt360"
+    }
+  ]
+]);
+function ae({
+  id: i,
+  children: e,
+  className: t,
+  disabled: n = !1
+}) {
+  const {
+    attributes: d,
+    listeners: g,
+    setNodeRef: x,
+    transform: b,
+    transition: m,
+    isDragging: c
+  } = B({ id: i, disabled: n }), h = s.useMemo(() => ({
+    transform: L.Transform.toString(b),
+    transition: m,
+    opacity: c ? 0.5 : 1
+  }), [b, m, c]);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: x,
+      style: h,
+      className: k(
+        "rounded-xl border bg-card text-card-foreground p-3 shadow-sm touch-none select-none",
+        c && "z-50 ring-2 ring-primary/30",
+        n && "opacity-50 cursor-not-allowed",
+        !n && !c && "cursor-grab hover:shadow-md hover:border-primary/30",
+        !n && c && "cursor-grabbing",
+        t
+      ),
+      ...d,
+      ...g,
+      children: /* @__PURE__ */ r("div", { className: "min-w-0", children: e })
+    }
+  );
+}
+function de(i, e, t) {
+  const n = {
+    ...i
+  };
+  return e.top + i.y <= t.top ? n.y = t.top - e.top : e.bottom + i.y >= t.top + t.height && (n.y = t.top + t.height - e.bottom), e.left + i.x <= t.left ? n.x = t.left - e.left : e.right + i.x >= t.left + t.width && (n.x = t.left + t.width - e.right), n;
+}
+const q = (i) => {
+  let {
+    transform: e,
+    draggingNodeRect: t,
+    windowRect: n
+  } = i;
+  return !t || !n ? e : de(e, t, n);
+}, J = (i) => {
+  let {
+    activatorEvent: e,
+    draggingNodeRect: t,
+    transform: n
+  } = i;
+  if (t && e) {
+    const d = te(e);
+    if (!d)
+      return n;
+    const g = d.x - t.left, x = d.y - t.top;
+    return {
+      ...n,
+      x: n.x + g - t.width / 2,
+      y: n.y + x - t.height / 2
+    };
+  }
+  return n;
+}, le = {
+  sm: "gap-1",
+  md: "gap-2",
+  lg: "gap-4"
+}, ce = {
+  sideEffects: V({
+    styles: {
+      active: {
+        opacity: "0.5"
+      }
+    }
+  })
+};
+function ke({
+  items: i,
+  onReorder: e,
+  renderItem: t,
+  renderOverlay: n,
+  direction: d = "vertical",
+  className: g,
+  itemClassName: x,
+  disabled: b = !1,
+  gap: m = "md"
+}) {
+  const [c, h] = s.useState(null), u = j(
+    O(Z, {
+      activationConstraint: {
+        distance: 5
+      }
+    }),
+    O(Y, {
+      coordinateGetter: X
+    })
+  ), E = s.useCallback((y) => {
+    h(y.active.id);
+  }, []), A = s.useCallback((y) => {
+    const { active: f, over: D } = y;
+    if (D && f.id !== D.id) {
+      const N = i.findIndex((a) => a.id === f.id), o = i.findIndex((a) => a.id === D.id);
+      N !== -1 && o !== -1 && e(Q(i, N, o));
+    }
+    h(null);
+  }, [i, e]), v = s.useCallback(() => {
+    h(null);
+  }, []), C = s.useMemo(
+    () => i.find((y) => y.id === c),
+    [c, i]
+  ), I = s.useMemo(() => i.map((y) => y.id), [i]);
+  return /* @__PURE__ */ F(
+    z,
+    {
+      sensors: u,
+      collisionDetection: U,
+      onDragStart: E,
+      onDragEnd: A,
+      onDragCancel: v,
+      children: [
+        /* @__PURE__ */ r(
+          $,
+          {
+            items: I,
+            strategy: d === "vertical" ? G : ne,
+            children: /* @__PURE__ */ r(
+              "div",
+              {
+                className: k(
+                  "flex",
+                  d === "vertical" ? "flex-col" : "flex-row flex-wrap",
+                  le[m],
+                  g
+                ),
+                children: i.map((y) => /* @__PURE__ */ r(
+                  ae,
+                  {
+                    id: y.id,
+                    className: x,
+                    disabled: b,
+                    children: t(y)
+                  },
+                  y.id
+                ))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ r(P, { dropAnimation: ce, modifiers: [J, q], children: C ? /* @__PURE__ */ r("div", { className: "rounded-xl border bg-card text-card-foreground p-3 shadow-2xl ring-2 ring-primary/30 cursor-grabbing", children: n ? n(C) : t(C) }) : null })
+      ]
+    }
+  );
+}
+const ue = s.memo(function({
+  id: e,
+  children: t,
+  className: n
+}) {
+  const {
+    attributes: d,
+    listeners: g,
+    setNodeRef: x,
+    transform: b,
+    transition: m,
+    isDragging: c
+  } = B({ id: e }), h = s.useMemo(() => ({
+    transform: L.Transform.toString(b),
+    transition: m,
+    opacity: c ? 0.5 : 1
+  }), [b, m, c]);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: x,
+      style: h,
+      className: k(
+        "rounded-xl border bg-card text-card-foreground p-3 shadow-sm touch-none select-none",
+        c && "ring-2 ring-primary/20",
+        !c && "cursor-grab hover:shadow-md hover:border-primary/30",
+        c && "cursor-grabbing",
+        n
+      ),
+      ...d,
+      ...g,
+      children: /* @__PURE__ */ r("div", { className: "min-w-0", children: t })
+    }
+  );
+});
+function me({
+  column: i,
+  items: e,
+  renderItem: t,
+  renderColumnHeader: n,
+  columnClassName: d,
+  itemClassName: g
+}) {
+  const { setNodeRef: x, isOver: b } = _({
+    id: `column-${i.id}`,
+    data: {
+      type: "column",
+      columnId: i.id
+    }
+  });
+  return /* @__PURE__ */ F(
+    "div",
+    {
+      ref: x,
+      className: k(
+        "flex flex-col min-w-[280px] w-[280px] bg-muted/30 border border-border/50 rounded-xl p-3 transition-colors duration-200",
+        b && "ring-2 ring-primary/30 bg-primary/5",
+        d
+      ),
+      children: [
+        /* @__PURE__ */ F("div", { className: "flex items-center justify-between mb-3 px-1", children: [
+          n ? n(i) : /* @__PURE__ */ r("h3", { className: "font-semibold text-sm text-foreground", children: i.title }),
+          /* @__PURE__ */ r("span", { className: "text-xs font-medium text-muted-foreground bg-background border px-2 py-0.5 rounded-full shadow-sm", children: e.length })
+        ] }),
+        /* @__PURE__ */ r(
+          $,
+          {
+            items: e.map((m) => m.id),
+            strategy: G,
+            children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-2 min-h-[100px] flex-1", children: e.map((m) => /* @__PURE__ */ r(
+              ue,
+              {
+                id: m.id,
+                className: g,
+                children: t(m)
+              },
+              m.id
+            )) })
+          }
+        )
+      ]
+    }
+  );
+}
+const fe = (i) => {
+  const t = re(i).filter(
+    (d) => !String(d.id).startsWith("column-")
+  );
+  return t.length > 0 ? t : ie(i);
+}, ge = {
+  sideEffects: V({
+    styles: {
+      active: {
+        opacity: "0.5"
+      }
+    }
+  })
+};
+function Ee({
+  columns: i,
+  items: e,
+  onItemMove: t,
+  onReorder: n,
+  renderItem: d,
+  renderColumnHeader: g,
+  className: x,
+  columnClassName: b,
+  itemClassName: m
+}) {
+  const [c, h] = s.useState(null), u = s.useRef(null), E = j(
+    O(Z, {
+      activationConstraint: {
+        distance: 5
+      }
+    }),
+    O(Y, {
+      coordinateGetter: X
+    })
+  ), A = s.useCallback(
+    (o) => e.filter((a) => a.columnId === o),
+    [e]
+  ), v = s.useCallback(
+    (o) => e.find((l) => l.id === o)?.columnId,
+    [e]
+  ), C = s.useCallback(
+    (o) => {
+      const a = String(o);
+      return a.startsWith("column-") ? a.replace("column-", "") : v(o);
+    },
+    [v]
+  ), I = s.useCallback((o) => {
+    h(o.active.id), u.current = null;
+  }, []), y = s.useCallback((o) => {
+    const { active: a, over: l } = o;
+    if (!l) return;
+    const p = v(a.id), w = C(l.id);
+    if (!p || !w || p === w || u.current === l.id) return;
+    u.current = l.id;
+    const S = A(w), M = String(l.id);
+    let T;
+    if (M.startsWith("column-"))
+      T = S.length;
+    else {
+      const K = S.findIndex((W) => W.id === l.id);
+      T = K >= 0 ? K : S.length;
+    }
+    t(a.id, p, w, T);
+  }, [v, C, A, t]), f = s.useCallback((o) => {
+    const { active: a, over: l } = o;
+    if (!l) {
+      h(null), u.current = null;
+      return;
+    }
+    const p = v(a.id), w = String(l.id);
+    let S;
+    if (w.startsWith("column-") ? S = w.replace("column-", "") : S = v(l.id), !p) {
+      h(null), u.current = null;
+      return;
+    }
+    if (p === S && a.id !== l.id && n && !w.startsWith("column-")) {
+      const M = A(p), T = M.findIndex((W) => W.id === a.id), K = M.findIndex((W) => W.id === l.id);
+      T !== -1 && K !== -1 && n(p, Q(M, T, K));
+    }
+    h(null), u.current = null;
+  }, [v, A, n]), D = s.useCallback(() => {
+    h(null), u.current = null;
+  }, []), N = s.useMemo(
+    () => e.find((o) => o.id === c),
+    [c, e]
+  );
+  return /* @__PURE__ */ F(
+    z,
+    {
+      sensors: E,
+      collisionDetection: fe,
+      onDragStart: I,
+      onDragOver: y,
+      onDragEnd: f,
+      onDragCancel: D,
+      children: [
+        /* @__PURE__ */ r("div", { className: k("flex gap-4 overflow-x-auto p-1", x), children: i.map((o) => {
+          const a = A(o.id);
+          return /* @__PURE__ */ r(
+            me,
+            {
+              column: o,
+              items: a,
+              renderItem: d,
+              renderColumnHeader: g,
+              columnClassName: b,
+              itemClassName: m
+            },
+            o.id
+          );
+        }) }),
+        /* @__PURE__ */ r(P, { dropAnimation: ge, modifiers: [J, q], children: N ? /* @__PURE__ */ r("div", { className: "rounded-xl border bg-card text-card-foreground p-3 shadow-2xl ring-2 ring-primary/30 cursor-grabbing", children: /* @__PURE__ */ r("div", { className: "min-w-0", children: d(N) }) }) : null })
+      ]
+    }
+  );
+}
+const he = s.memo(function({
+  node: e,
+  depth: t,
+  expanded: n,
+  onToggle: d,
+  renderNode: g
+}) {
+  const {
+    attributes: x,
+    listeners: b,
+    setNodeRef: m,
+    transform: c,
+    transition: h,
+    isDragging: u
+  } = B({ id: e.id }), E = s.useMemo(() => ({
+    transform: L.Transform.toString(c),
+    transition: h,
+    paddingLeft: `${t * 20 + 8}px`,
+    opacity: u ? 0.5 : 1
+  }), [c, h, t, u]), A = e.children && e.children.length > 0, v = e.isFolder || A, C = s.useCallback((I) => {
+    I.stopPropagation(), d();
+  }, [d]);
+  return /* @__PURE__ */ F(
+    "div",
+    {
+      ref: m,
+      style: E,
+      className: k(
+        "flex items-center gap-2 py-2 pr-3 rounded-lg touch-none select-none",
+        u && "bg-muted ring-1 ring-primary/20",
+        !u && "cursor-grab hover:bg-muted/60",
+        u && "cursor-grabbing"
+      ),
+      ...x,
+      ...b,
+      children: [
+        v ? /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: C,
+            className: "flex-shrink-0 p-1 hover:bg-muted rounded-md transition-colors duration-200",
+            children: /* @__PURE__ */ r(
+              se,
+              {
+                className: k(
+                  "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                  n && "rotate-90"
+                )
+              }
+            )
+          }
+        ) : /* @__PURE__ */ r("span", { className: "w-6" }),
+        /* @__PURE__ */ r("span", { className: k(
+          "flex-shrink-0",
+          v ? "text-primary/80" : "text-muted-foreground"
+        ), children: v ? /* @__PURE__ */ r(R, { className: "h-4 w-4" }) : /* @__PURE__ */ r(H, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ r("span", { className: "flex-1 truncate text-sm text-foreground", children: g ? g(e) : e.label })
+      ]
+    }
+  );
+});
+function ee(i, e, t = 0) {
+  const n = [];
+  for (const d of i)
+    n.push({ node: d, depth: t }), d.children && e.has(d.id) && n.push(...ee(d.children, e, t + 1));
+  return n;
+}
+const pe = {
+  sideEffects: V({
+    styles: {
+      active: {
+        opacity: "0.5"
+      }
+    }
+  })
+};
+function Ae({
+  data: i,
+  onMove: e,
+  onToggle: t,
+  renderNode: n,
+  className: d,
+  defaultExpanded: g = /* @__PURE__ */ new Set()
+}) {
+  const [x, b] = s.useState(g), [m, c] = s.useState(null), h = j(
+    O(Z, {
+      activationConstraint: {
+        distance: 5
+      }
+    }),
+    O(Y, {
+      coordinateGetter: X
+    })
+  ), u = s.useMemo(
+    () => ee(i, x),
+    [i, x]
+  ), E = s.useCallback((f) => {
+    b((D) => {
+      const N = new Set(D), o = N.has(f);
+      return o ? N.delete(f) : N.add(f), t?.(f, !o), N;
+    });
+  }, [t]), A = s.useCallback((f) => {
+    c(f.active.id);
+  }, []), v = s.useCallback((f) => {
+    const { active: D, over: N } = f;
+    if (N && D.id !== N.id) {
+      const o = u.findIndex((l) => l.node.id === D.id), a = u.findIndex((l) => l.node.id === N.id);
+      o !== -1 && a !== -1 && e?.(D.id, null, a);
+    }
+    c(null);
+  }, [u, e]), C = s.useCallback(() => {
+    c(null);
+  }, []), I = s.useMemo(
+    () => u.find((f) => f.node.id === m)?.node,
+    [m, u]
+  ), y = s.useMemo(
+    () => u.map((f) => f.node.id),
+    [u]
+  );
+  return /* @__PURE__ */ F(
+    z,
+    {
+      sensors: h,
+      collisionDetection: U,
+      onDragStart: A,
+      onDragEnd: v,
+      onDragCancel: C,
+      children: [
+        /* @__PURE__ */ r(
+          $,
+          {
+            items: y,
+            strategy: G,
+            children: /* @__PURE__ */ r("div", { className: k("border rounded-xl p-3 bg-card shadow-sm", d), children: u.map(({ node: f, depth: D }) => /* @__PURE__ */ r(
+              he,
+              {
+                node: f,
+                depth: D,
+                expanded: x.has(f.id),
+                onToggle: () => E(f.id),
+                renderNode: n
+              },
+              f.id
+            )) })
+          }
+        ),
+        /* @__PURE__ */ r(P, { dropAnimation: pe, modifiers: [J, q], children: I ? /* @__PURE__ */ F("div", { className: "flex items-center gap-2 py-2 px-3 rounded-lg bg-card border shadow-2xl ring-2 ring-primary/30 cursor-grabbing", children: [
+          /* @__PURE__ */ r("span", { className: k(
+            "flex-shrink-0",
+            I.isFolder || I.children && I.children.length > 0 ? "text-primary/80" : "text-muted-foreground"
+          ), children: I.isFolder || I.children && I.children.length > 0 ? /* @__PURE__ */ r(R, { className: "h-4 w-4" }) : /* @__PURE__ */ r(H, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ r("span", { className: "text-sm text-foreground", children: n ? n(I) : I.label })
+        ] }) : null })
+      ]
+    }
+  );
+}
+function xe({ id: i, children: e, className: t, isEmpty: n }) {
+  const { setNodeRef: d, isOver: g } = _({ id: i });
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: d,
+      className: k(
+        "min-h-[100px] rounded-xl transition-colors duration-200",
+        g && "bg-primary/5 ring-2 ring-primary/30",
+        n && "border-2 border-dashed border-muted-foreground/30",
+        t
+      ),
+      children: e
+    }
+  );
+}
+const ve = s.memo(function({
+  id: e,
+  children: t,
+  className: n
+}) {
+  const {
+    attributes: d,
+    listeners: g,
+    setNodeRef: x,
+    transform: b,
+    transition: m,
+    isDragging: c
+  } = B({ id: e }), h = s.useMemo(() => ({
+    transform: L.Transform.toString(b),
+    transition: m,
+    opacity: c ? 0.5 : 1
+  }), [b, m, c]);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: x,
+      style: h,
+      className: k(
+        "rounded-xl border bg-card text-card-foreground p-3 shadow-sm touch-none select-none",
+        c && "ring-2 ring-primary/20",
+        !c && "cursor-grab hover:shadow-md hover:border-primary/30",
+        c && "cursor-grabbing",
+        n
+      ),
+      ...d,
+      ...g,
+      children: /* @__PURE__ */ r("div", { className: "min-w-0", children: t })
+    }
+  );
+}), be = {
+  horizontal: "flex gap-4 overflow-x-auto",
+  vertical: "flex flex-col gap-4",
+  grid: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
+}, Ce = {
+  sideEffects: V({
+    styles: {
+      active: {
+        opacity: "0.5"
+      }
+    }
+  })
+};
+function Te({
+  containers: i,
+  items: e,
+  onItemMove: t,
+  onReorder: n,
+  renderItem: d,
+  renderContainerHeader: g,
+  renderEmptyContainer: x,
+  className: b,
+  containerClassName: m,
+  itemClassName: c,
+  layout: h = "horizontal"
+}) {
+  const [u, E] = s.useState(null), A = j(
+    O(Z, {
+      activationConstraint: {
+        distance: 5
+      }
+    }),
+    O(Y, {
+      coordinateGetter: X
+    })
+  ), v = s.useCallback(
+    (o) => e.filter((a) => a.containerId === o),
+    [e]
+  ), C = s.useCallback(
+    (o) => e.find((l) => l.id === o)?.containerId,
+    [e]
+  ), I = s.useCallback((o) => {
+    E(o.active.id);
+  }, []), y = s.useCallback((o) => {
+    const { active: a, over: l } = o;
+    if (!l) return;
+    const p = C(a.id);
+    let w = C(l.id);
+    if (w || (w = i.find((T) => T.id === l.id)?.id), !p || !w || p === w) return;
+    const S = v(w), M = S.findIndex((T) => T.id === l.id);
+    t(
+      a.id,
+      p,
+      w,
+      M >= 0 ? M : S.length
+    );
+  }, [i, C, v, t]), f = s.useCallback((o) => {
+    const { active: a, over: l } = o;
+    if (!l) {
+      E(null);
+      return;
+    }
+    const p = C(a.id);
+    if (!p) {
+      E(null);
+      return;
+    }
+    const w = C(l.id) || i.find((S) => S.id === l.id)?.id;
+    if (p === w && a.id !== l.id && n) {
+      const S = v(p), M = S.findIndex((K) => K.id === a.id), T = S.findIndex((K) => K.id === l.id);
+      M !== -1 && T !== -1 && n(p, Q(S, M, T));
+    }
+    E(null);
+  }, [i, C, v, n]), D = s.useCallback(() => {
+    E(null);
+  }, []), N = s.useMemo(
+    () => e.find((o) => o.id === u),
+    [u, e]
+  );
+  return /* @__PURE__ */ F(
+    z,
+    {
+      sensors: A,
+      collisionDetection: U,
+      onDragStart: I,
+      onDragOver: y,
+      onDragEnd: f,
+      onDragCancel: D,
+      children: [
+        /* @__PURE__ */ r("div", { className: k(be[h], b), children: i.map((o) => {
+          const a = v(o.id), l = a.length === 0;
+          return /* @__PURE__ */ F(
+            "div",
+            {
+              className: k(
+                "flex flex-col rounded-xl border border-border/50 bg-muted/20 p-4 transition-colors duration-200",
+                h === "horizontal" && "min-w-[280px] w-[280px]",
+                m
+              ),
+              children: [
+                /* @__PURE__ */ r("div", { className: "mb-3", children: g ? g(o, a.length) : /* @__PURE__ */ F("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ r("h3", { className: "font-semibold text-sm text-foreground", children: o.title }),
+                  /* @__PURE__ */ r("span", { className: "text-xs font-medium text-muted-foreground bg-background border px-2 py-0.5 rounded-full shadow-sm", children: a.length })
+                ] }) }),
+                /* @__PURE__ */ r(
+                  xe,
+                  {
+                    id: o.id,
+                    isEmpty: l,
+                    className: "flex-1",
+                    children: /* @__PURE__ */ r(
+                      $,
+                      {
+                        items: a.map((p) => p.id),
+                        strategy: G,
+                        children: /* @__PURE__ */ F("div", { className: "flex flex-col gap-2", children: [
+                          a.map((p) => /* @__PURE__ */ r(
+                            ve,
+                            {
+                              id: p.id,
+                              className: c,
+                              children: d(p)
+                            },
+                            p.id
+                          )),
+                          l && x && /* @__PURE__ */ r("div", { className: "flex items-center justify-center py-8 text-muted-foreground text-sm", children: x(o) })
+                        ] })
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            o.id
+          );
+        }) }),
+        /* @__PURE__ */ r(P, { dropAnimation: Ce, modifiers: [J, q], children: N ? /* @__PURE__ */ r("div", { className: "rounded-xl border bg-card text-card-foreground p-3 shadow-2xl ring-2 ring-primary/30 cursor-grabbing", children: /* @__PURE__ */ r("div", { className: "min-w-0", children: d(N) }) }) : null })
+      ]
+    }
+  );
+}
+export {
+  Ee as K,
+  Te as M,
+  ae as S,
+  Ae as T,
+  ke as a
+};
+//# sourceMappingURL=multi-container-C2UpSw5f.js.map