@sth87/shadcn-design-system 0.0.1

package/dist/esm/components/Masonry/Masonry.js

@@ -0,0 +1,840 @@
+import { jsx as Y } from "react/jsx-runtime";
+import { useComposedRefs as fe, Slot as oe } from "@dsui/ui/index";
+import * as s from "react";
+const f = {
+  RED: 0,
+  BLACK: 1,
+  SENTINEL: 2
+}, X = {
+  REMOVE: 0,
+  PRESERVE: 1
+};
+function he(r, o, e) {
+  let t = r.list, a;
+  for (; t; ) {
+    if (t.index === e) return !1;
+    if (o > t.high) break;
+    a = t, t = t.next;
+  }
+  return a || (r.list = { index: e, high: o, next: t }), a && (a.next = { index: e, high: o, next: a.next }), !0;
+}
+function pe(r, o) {
+  let e = r.list;
+  if (e.index === o)
+    return e.next === null ? X.REMOVE : (r.list = e.next, X.PRESERVE);
+  let t = e;
+  for (e = e.next; e !== null; ) {
+    if (e.index === o)
+      return t.next = e.next, X.PRESERVE;
+    t = e, e = e.next;
+  }
+}
+const y = {
+  low: 0,
+  max: 0,
+  high: 0,
+  color: f.SENTINEL,
+  parent: void 0,
+  right: void 0,
+  left: void 0,
+  list: void 0
+};
+y.parent = y;
+y.left = y;
+y.right = y;
+function W(r) {
+  const o = r.high;
+  r.left === y && r.right === y ? r.max = o : r.left === y ? r.max = Math.max(r.right.max, o) : r.right === y ? r.max = Math.max(r.left.max, o) : r.max = Math.max(Math.max(r.left.max, r.right.max), o);
+}
+function Z(r) {
+  let o = r;
+  for (; o.parent !== y; )
+    W(o.parent), o = o.parent;
+}
+function q(r, o) {
+  if (o.right === y) return;
+  const e = o.right;
+  o.right = e.left, e.left !== y && (e.left.parent = o), e.parent = o.parent, o.parent === y ? r.root = e : o === o.parent.left ? o.parent.left = e : o.parent.right = e, e.left = o, o.parent = e, W(o), W(e);
+}
+function $(r, o) {
+  if (o.left === y) return;
+  const e = o.left;
+  o.left = e.right, e.right !== y && (e.right.parent = o), e.parent = o.parent, o.parent === y ? r.root = e : o === o.parent.right ? o.parent.right = e : o.parent.left = e, e.right = o, o.parent = e, W(o), W(e);
+}
+function J(r, o, e) {
+  o.parent === y ? r.root = e : o === o.parent.left ? o.parent.left = e : o.parent.right = e, e.parent = o.parent;
+}
+function de(r, o) {
+  let e = o, t;
+  for (; e !== y && e.color === f.BLACK; )
+    e === e.parent.left ? (t = e.parent.right, t.color === f.RED && (t.color = f.BLACK, e.parent.color = f.RED, q(r, e.parent), t = e.parent.right), t.left.color === f.BLACK && t.right.color === f.BLACK ? (t.color = f.RED, e = e.parent) : (t.right.color === f.BLACK && (t.left.color = f.BLACK, t.color = f.RED, $(r, t), t = e.parent.right), t.color = e.parent.color, e.parent.color = f.BLACK, t.right.color = f.BLACK, q(r, e.parent), e = r.root)) : (t = e.parent.left, t.color === f.RED && (t.color = f.BLACK, e.parent.color = f.RED, $(r, e.parent), t = e.parent.left), t.right.color === f.BLACK && t.left.color === f.BLACK ? (t.color = f.RED, e = e.parent) : (t.left.color === f.BLACK && (t.right.color = f.BLACK, t.color = f.RED, q(r, t), t = e.parent.left), t.color = e.parent.color, e.parent.color = f.BLACK, t.left.color = f.BLACK, $(r, e.parent), e = r.root));
+  e.color = f.BLACK;
+}
+function me(r) {
+  let o = r;
+  for (; o.left !== y; )
+    o = o.left;
+  return o;
+}
+function ge(r, o) {
+  let e = o, t;
+  for (; e.parent.color === f.RED; )
+    e.parent === e.parent.parent.left ? (t = e.parent.parent.right, t.color === f.RED ? (e.parent.color = f.BLACK, t.color = f.BLACK, e.parent.parent.color = f.RED, e = e.parent.parent) : (e === e.parent.right && (e = e.parent, q(r, e)), e.parent.color = f.BLACK, e.parent.parent.color = f.RED, $(r, e.parent.parent))) : (t = e.parent.parent.left, t.color === f.RED ? (e.parent.color = f.BLACK, t.color = f.BLACK, e.parent.parent.color = f.RED, e = e.parent.parent) : (e === e.parent.left && (e = e.parent, $(r, e)), e.parent.color = f.BLACK, e.parent.parent.color = f.RED, q(r, e.parent.parent)));
+  r.root.color = f.BLACK;
+}
+function we() {
+  const r = {
+    root: y,
+    size: 0
+  }, o = {};
+  return {
+    insert(e, t, a) {
+      let n = r.root, i = y;
+      for (; n !== y && (i = n, e !== i.low); )
+        e < n.low ? n = n.left : n = n.right;
+      if (e === i.low && i !== y) {
+        if (!he(i, t, a)) return;
+        i.high = Math.max(i.high, t), W(i), Z(i), o[a] = i, r.size++;
+        return;
+      }
+      const l = {
+        low: e,
+        high: t,
+        max: t,
+        color: f.RED,
+        parent: i,
+        left: y,
+        right: y,
+        list: { index: a, high: t, next: null }
+      };
+      i === y ? r.root = l : (l.low < i.low ? i.left = l : i.right = l, Z(l)), ge(r, l), o[a] = l, r.size++;
+    },
+    remove(e) {
+      const t = o[e];
+      if (t === void 0) return;
+      delete o[e];
+      const a = pe(t, e);
+      if (a === void 0) return;
+      if (a === X.PRESERVE) {
+        t.high = t.list.high, W(t), Z(t), r.size--;
+        return;
+      }
+      let n = t, i = n.color, l;
+      t.left === y ? (l = t.right, J(r, t, t.right)) : t.right === y ? (l = t.left, J(r, t, t.left)) : (n = me(t.right), i = n.color, l = n.right, n.parent === t ? l.parent = n : (J(r, n, n.right), n.right = t.right, n.right.parent = n), J(r, t, n), n.left = t.left, n.left.parent = n, n.color = t.color), W(l), Z(l), i === f.BLACK && de(r, l), r.size--;
+    },
+    search(e, t, a) {
+      const n = [r.root];
+      for (; n.length !== 0; ) {
+        const i = n.pop();
+        if (i && !(i === y || e > i.max) && (i.left !== y && n.push(i.left), i.right !== y && n.push(i.right), i.low <= t && i.high >= e)) {
+          let l = i.list;
+          for (; l !== null; )
+            l.high >= e && a(l.index, i.low), l = l.next;
+        }
+      }
+    },
+    get size() {
+      return r.size;
+    }
+  };
+}
+function ye(r, o) {
+  if (!r.length || !r[0])
+    throw new Error("At least one constructor is required");
+  function e(c) {
+    let p;
+    if (typeof c == "function")
+      try {
+        p = new c();
+      } catch {
+        p = /* @__PURE__ */ new Map();
+      }
+    else
+      p = c;
+    return {
+      set(u, w) {
+        return p.set(u, w), w;
+      },
+      get(u) {
+        return p.get(u);
+      }
+    };
+  }
+  const t = r.length, a = e(r[0]);
+  let n, i, l, h;
+  const g = t === 1;
+  function S(c) {
+    if (t < 3) {
+      const p = c[0];
+      return n = a.get(p), g ? n : n?.get(c[1]);
+    }
+    for (l = a, h = 0; h < t; h++) {
+      const p = l.get(c[h]);
+      if (!p) return;
+      l = p;
+    }
+    return l;
+  }
+  function T(c, p) {
+    if (t < 3) {
+      if (g)
+        a.set(c[0], p);
+      else if (n = a.get(c[0]), n)
+        n.set(c[1], p);
+      else {
+        if (!r[1])
+          throw new Error(
+            "Second constructor is required for non-single depth cache"
+          );
+        i = e(r[1]), i.set(c[1], p), a.set(c[0], i);
+      }
+      return p;
+    }
+    for (l = a, h = 0; h < t - 1; h++)
+      if (i = l.get(c[h]), i)
+        l = i;
+      else {
+        const u = r[h + 1];
+        if (!u)
+          throw new Error(`Constructor at index ${h + 1} is required`);
+        i = e(u), l.set(c[h], i), l = i;
+      }
+    return l.set(c[t - 1], p), p;
+  }
+  return (...c) => {
+    const p = S(c);
+    return p === void 0 ? T(c, o(...c)) : p;
+  };
+}
+const re = 200, ie = 0, Ee = 300, ve = 2, se = 12, le = 300;
+function Re({
+  width: r,
+  columnWidth: o = re,
+  columnGap: e = ie,
+  rowGap: t,
+  columnCount: a,
+  maxColumnCount: n,
+  linear: i = !1
+}, l = []) {
+  const h = s.useCallback(() => {
+    function u(b, R) {
+      let d = 0, A = b.length - 1;
+      for (; d <= A; ) {
+        const E = d + A >>> 1, C = b[E];
+        if (C === R) return E;
+        C === void 0 || C <= R ? d = E + 1 : A = E - 1;
+      }
+      return -1;
+    }
+    const w = a || Math.min(
+      Math.floor((r + e) / (o + e)),
+      n || Number.POSITIVE_INFINITY
+    ) || 1, O = Math.floor(
+      (r - e * (w - 1)) / w
+    ), z = we(), I = new Array(w).fill(0), x = [], V = new Array(w).fill(0).map(() => []);
+    for (let b = 0; b < w; b++)
+      I[b] = 0, V[b] = [];
+    return {
+      columnCount: w,
+      columnWidth: O,
+      set: (b, R = 0) => {
+        let d = 0;
+        if (i) {
+          const L = b % w;
+          let D = I[0] ?? 0, k = 0;
+          for (let B = 0; B < I.length; B++) {
+            const m = I[B] ?? 0;
+            m < D && (D = m, k = B);
+          }
+          const _ = (I[L] ?? 0) + R, N = D + R * 2.5;
+          d = _ <= N ? L : k;
+        } else
+          for (let L = 1; L < I.length; L++) {
+            const D = I[L], k = I[d];
+            D !== void 0 && k !== void 0 && D < k && (d = L);
+          }
+        const A = I[d];
+        if (A === void 0) return;
+        const E = A;
+        I[d] = E + R + (t ?? e);
+        const C = V[d];
+        C && (C.push(b), x[b] = {
+          left: d * (O + e),
+          top: E,
+          height: R,
+          columnIndex: d
+        }, z.insert(E, E + R, b));
+      },
+      get: (b) => x[b],
+      update: (b) => {
+        const R = new Array(w);
+        let d = 0, A = 0;
+        for (; d < b.length - 1; d++) {
+          const E = b[d];
+          if (typeof E != "number") continue;
+          const C = x[E];
+          if (!C) continue;
+          const L = b[++d];
+          typeof L == "number" && (C.height = L, z.remove(E), z.insert(C.top, C.top + C.height, E), R[C.columnIndex] = R[C.columnIndex] === void 0 ? E : Math.min(
+            E,
+            R[C.columnIndex] ?? E
+          ));
+        }
+        for (d = 0; d < R.length; d++) {
+          const E = R[d];
+          if (E === void 0) continue;
+          const C = V[d];
+          if (!C) continue;
+          const L = u(C, E);
+          if (L === -1) continue;
+          const D = C[L];
+          if (typeof D != "number") continue;
+          const k = x[D];
+          if (!(!k || typeof I[d] != "number"))
+            for (I[d] = k.top + k.height + (t ?? e), A = L + 1; A < C.length; A++) {
+              const N = C[A];
+              if (typeof N != "number") continue;
+              const B = x[N];
+              if (!B) continue;
+              const m = I[d];
+              typeof m == "number" && (B.top = m, I[d] = B.top + B.height + (t ?? e), z.remove(N), z.insert(B.top, B.top + B.height, N));
+            }
+        }
+      },
+      range: (b, R, d) => z.search(b, R, (A, E) => {
+        const C = x[A];
+        C && d(A, C.left, E);
+      }),
+      estimateHeight: (b, R) => {
+        const d = Math.max(0, Math.max.apply(null, I));
+        return b === z.size ? d : d + Math.ceil((b - z.size) / w) * R;
+      },
+      shortestColumn: () => I.length > 1 ? Math.min.apply(null, I) : I[0] ?? 0,
+      size() {
+        return z.size;
+      },
+      all() {
+        return x.filter(Boolean);
+      }
+    };
+  }, [
+    r,
+    o,
+    e,
+    t,
+    a,
+    n,
+    i
+  ]), g = s.useRef(null);
+  g.current === null && (g.current = h());
+  const S = s.useRef(l), T = [
+    r,
+    o,
+    e,
+    t,
+    a,
+    n,
+    i
+  ], c = s.useRef(T), p = !T.every((u, w) => c.current[w] === u);
+  if (p || !l.every((u, w) => S.current[w] === u)) {
+    const u = g.current, w = h();
+    if (S.current = l, c.current = T, p) {
+      const O = u.size();
+      for (let z = 0; z < O; z++) {
+        const I = u.get(z);
+        w.set(z, I !== void 0 ? I.height : 0);
+      }
+    }
+    g.current = w;
+  }
+  return g.current;
+}
+function Ce(r) {
+  const {
+    containerRef: o,
+    defaultWidth: e = 0,
+    defaultHeight: t = 0,
+    delayMs: a = le
+  } = r, n = s.useCallback(() => typeof document > "u" ? { width: e, height: t } : {
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.clientHeight
+  }, [e, t]), [i, l] = s.useState(n()), h = s.useRef(null), g = s.useCallback(
+    (S) => {
+      h.current && clearTimeout(h.current), h.current = setTimeout(() => {
+        l(S);
+      }, a);
+    },
+    [a]
+  );
+  return s.useEffect(() => {
+    function S() {
+      o.current ? g({
+        width: o.current.offsetWidth,
+        height: document.documentElement.clientHeight
+      }) : g(n());
+    }
+    return window?.addEventListener("resize", S, { passive: !0 }), window?.addEventListener("orientationchange", S), window.visualViewport?.addEventListener("resize", S), () => {
+      window?.removeEventListener("resize", S), window?.removeEventListener("orientationchange", S), window.visualViewport?.removeEventListener("resize", S), h.current && clearTimeout(h.current);
+    };
+  }, [g, o, n]), i;
+}
+function te(r) {
+  function o(...e) {
+  }
+  return o.cancel = () => {
+  }, o;
+}
+function Me(r) {
+  const [, o] = s.useState(0), t = s.useMemo(() => typeof window > "u" ? () => ({
+    disconnect: () => {
+    },
+    observe: () => {
+    },
+    unobserve: () => {
+    }
+  }) : ye(
+    [WeakMap],
+    (a, n) => {
+      const i = /* @__PURE__ */ new WeakMap();
+      te();
+      const l = /* @__PURE__ */ new Map();
+      function h(T) {
+        for (const c of T) {
+          if (!c) continue;
+          const p = i.get(c.target);
+          if (p === void 0) continue;
+          let u = l.get(p);
+          u || (u = te(), l.set(p, u)), u(c.target);
+        }
+      }
+      const g = new ResizeObserver(h), S = g.disconnect.bind(g);
+      return g.disconnect = () => {
+        S();
+        for (const [, T] of l)
+          T.cancel();
+      }, g;
+    }
+  ), [])(
+    r,
+    () => o((a) => a + 1)
+  );
+  return s.useEffect(() => () => t.disconnect(), [t]), t;
+}
+function Se({
+  offset: r = 0,
+  fps: o = se
+} = {}) {
+  const [e, t] = be(
+    typeof globalThis.window > "u" ? 0 : globalThis.window.scrollY ?? document.documentElement.scrollTop ?? 0,
+    { fps: o, leading: !0 }
+  ), a = s.useCallback(() => {
+    t(
+      globalThis.window.scrollY ?? document.documentElement.scrollTop ?? 0
+    );
+  }, [t]);
+  s.useEffect(() => {
+    if (!(typeof globalThis.window > "u"))
+      return globalThis.window.addEventListener("scroll", a, { passive: !0 }), () => globalThis.window.removeEventListener("scroll", a);
+  }, [a]);
+  const [n, i] = s.useState(!1), l = s.useRef(0);
+  return s.useEffect(() => {
+    l.current === 1 && i(!0);
+    let h = !1;
+    function g(T, c) {
+      const p = performance.now(), u = {
+        id: requestAnimationFrame(function w(O) {
+          O - p >= c ? T() : u.id = requestAnimationFrame(w);
+        })
+      };
+      return u;
+    }
+    const S = g(
+      () => {
+        h || i(!1);
+      },
+      40 + 1e3 / o
+    );
+    return l.current = 1, () => {
+      h = !0, cancelAnimationFrame(S.id);
+    };
+  }, [o]), { scrollTop: Math.max(0, e - r), isScrolling: n };
+}
+function be(r, o = {}) {
+  const { fps: e = 30, leading: t = !1 } = o, [a, n] = s.useState(r), i = s.useRef(n);
+  i.current = n;
+  const l = 1e3 / e, h = s.useRef(0), g = s.useRef(
+    null
+  ), S = s.useCallback(() => {
+    g.current && clearTimeout(g.current);
+  }, []);
+  s.useEffect(() => () => {
+    h.current = 0, S();
+  }, [S]);
+  const T = s.useCallback(
+    (c) => {
+      const p = typeof performance < "u" ? performance : Date, w = p.now(), O = () => {
+        h.current = w, S(), i.current(c);
+      }, z = h.current;
+      if (t && z === 0)
+        return O();
+      if (w - z > l) {
+        if (z > 0)
+          return O();
+        h.current = w;
+      }
+      S(), g.current = setTimeout(() => {
+        O(), h.current = 0;
+      }, l);
+    },
+    [t, l, S]
+  );
+  return [a, T];
+}
+const Q = "MasonryRoot", G = "MasonryViewport", ne = "MasonryItem", Ie = {
+  [Q]: `\`${Q}\` components must be within \`${Q}\``,
+  [G]: `\`${G}\` components must be within \`${Q}\``,
+  [ne]: `\`${ne}\` must be within \`${G}\``
+}, ce = s.createContext(null);
+function Le(r) {
+  const o = s.useContext(ce);
+  if (!o)
+    throw new Error(Ie[r]);
+  return o;
+}
+const ae = typeof window < "u" ? s.useLayoutEffect : s.useEffect;
+function ze(r) {
+  const {
+    columnWidth: o = re,
+    columnCount: e,
+    maxColumnCount: t,
+    gap: a = ie,
+    itemHeight: n = Ee,
+    defaultWidth: i,
+    defaultHeight: l,
+    overscan: h = ve,
+    scrollFps: g = se,
+    fallback: S,
+    linear: T = !1,
+    virtualize: c = !0,
+    lazyLoad: p = !1,
+    asChild: u,
+    children: w,
+    style: O,
+    ref: z,
+    ...I
+  } = r, x = typeof a == "object" ? a : { column: a, row: a }, V = x.column, b = x.row, R = s.useRef(null), d = fe(z, R), A = Ce({
+    containerRef: R,
+    defaultWidth: i,
+    defaultHeight: l,
+    delayMs: le
+  }), [E, C] = s.useState({ offset: 0, width: 0 });
+  ae(() => {
+    if (!R.current) return;
+    let P = 0, K = R.current;
+    do
+      P += K.offsetTop ?? 0, K = K.offsetParent;
+    while (K);
+    (P !== E.offset || R.current.offsetWidth !== E.width) && C({
+      offset: P,
+      width: R.current.offsetWidth
+    });
+  }, [E, A]);
+  const L = Re({
+    width: E.width ?? A.width,
+    columnWidth: o,
+    columnGap: V,
+    rowGap: b,
+    columnCount: e,
+    maxColumnCount: t,
+    linear: T
+  }), D = Me(L), { scrollTop: k, isScrolling: _ } = Se({
+    offset: E.offset,
+    fps: g
+  }), N = s.useRef(/* @__PURE__ */ new WeakMap()).current, B = s.useRef(/* @__PURE__ */ new Set()), [m, M] = s.useState(
+    () => /* @__PURE__ */ new Set()
+  ), v = !c && p, H = s.useCallback(
+    (P) => (K) => {
+      K && (N.set(K, P), D && D.observe(K), L.get(P) === void 0 && L.set(P, K.offsetHeight));
+    },
+    [N, L, D]
+  ), F = s.useCallback((P) => {
+    let K = !1;
+    P.forEach((ee) => {
+      B.current.has(ee) || (B.current.add(ee), K = !0);
+    }), K && M(new Set(B.current));
+  }, []), U = s.useMemo(
+    () => ({
+      positioner: L,
+      resizeObserver: D,
+      columnWidth: L.columnWidth,
+      onItemRegister: H,
+      scrollTop: k,
+      windowHeight: A.height,
+      itemHeight: n,
+      overscan: h,
+      fallback: S,
+      isScrolling: _,
+      virtualize: c,
+      lazyLoad: v,
+      loadedIndices: m,
+      updateLoadedIndices: F
+    }),
+    [
+      L,
+      D,
+      H,
+      k,
+      A.height,
+      n,
+      h,
+      S,
+      _,
+      c,
+      v,
+      m,
+      F
+    ]
+  ), j = u ? oe : "div";
+  return /* @__PURE__ */ Y(ce.Provider, { value: U, children: /* @__PURE__ */ Y(
+    j,
+    {
+      ...I,
+      "data-slot": "masonry",
+      ref: d,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        ...O
+      },
+      children: /* @__PURE__ */ Y(Ae, { children: w })
+    }
+  ) });
+}
+function Ae(r) {
+  const { children: o, style: e, ref: t, ...a } = r, n = Le(G), [i, l] = s.useState(0), h = s.useRef(null), [g, S] = s.useState(!1);
+  ae(() => {
+    S(!0);
+  }, []);
+  const T = s.Children.toArray(o).filter(
+    (m) => s.isValidElement(m) && (m.type === ue || m.type === Te)
+  ), c = T.length, p = n.positioner.shortestColumn(), u = n.positioner.size(), w = n.windowHeight * n.overscan, O = Math.max(0, n.scrollTop - w / 2), z = n.scrollTop + n.windowHeight + w / 2, I = p < z && u < c, x = [], V = s.useMemo(
+    () => ({
+      position: "absolute",
+      writingMode: "horizontal-tb",
+      visibility: "visible",
+      width: n.columnWidth
+    }),
+    [n.columnWidth]
+  ), b = s.useMemo(
+    () => ({
+      position: "absolute",
+      writingMode: "horizontal-tb",
+      visibility: "visible",
+      width: n.columnWidth,
+      transform: n.isScrolling ? "translateZ(0)" : void 0,
+      willChange: n.isScrolling ? "transform" : void 0
+    }),
+    [n.columnWidth, n.isScrolling]
+  ), R = n.virtualize ? b : V, d = s.useMemo(
+    () => ({
+      position: "absolute",
+      writingMode: "horizontal-tb",
+      visibility: "hidden",
+      width: n.columnWidth,
+      zIndex: -1e3
+    }),
+    [n.columnWidth]
+  ), A = s.useRef([]);
+  if (n.virtualize) {
+    if (n.positioner.range(O, z, (m, M, v) => {
+      const H = T[m];
+      if (!H) return;
+      const F = {
+        ...R,
+        top: v,
+        left: M,
+        ...H.props.style
+      };
+      x.push(
+        s.cloneElement(H, {
+          key: H.key ?? m,
+          ref: n.onItemRegister(m),
+          style: F
+        })
+      );
+    }), I && g) {
+      const m = Math.min(
+        c - u,
+        Math.ceil(
+          (n.scrollTop + w - p) / n.itemHeight * n.positioner.columnCount
+        )
+      );
+      for (let M = u; M < u + m; M++) {
+        const v = T[M];
+        if (!v) continue;
+        const H = {
+          ...d,
+          ...v.props.style
+        };
+        x.push(
+          s.cloneElement(v, {
+            key: v.key ?? M,
+            ref: n.onItemRegister(M),
+            style: H
+          })
+        );
+      }
+    }
+  } else if (n.lazyLoad) {
+    if (u < c && g) {
+      const M = Math.min(
+        c - u,
+        Math.ceil(
+          (n.scrollTop + w - p) / n.itemHeight * n.positioner.columnCount
+        ) + n.positioner.columnCount * 2
+        // Extra buffer for initial load
+      );
+      for (let v = u; v < Math.max(u + M, u + 1) && !(v >= c); v++) {
+        const H = T[v];
+        if (!H) continue;
+        const F = {
+          ...d,
+          ...H.props.style
+        };
+        x.push(
+          s.cloneElement(H, {
+            key: H.key ?? v,
+            ref: n.onItemRegister(v),
+            style: F
+          })
+        );
+      }
+    }
+    const m = [];
+    n.positioner.all().forEach((M, v) => {
+      const H = T[v];
+      if (!H || !M) return;
+      const U = M.top + (M.height ?? n.itemHeight) >= O && M.top <= z, j = n.loadedIndices.has(v);
+      if (U && !j && m.push(v), U || j) {
+        const P = {
+          ...R,
+          top: M.top,
+          left: M.left,
+          ...H.props.style
+        };
+        x.push(
+          s.cloneElement(H, {
+            key: H.key ?? v,
+            ref: n.onItemRegister(v),
+            style: P
+          })
+        );
+      }
+    }), A.current = m;
+  } else {
+    if (u < c && g)
+      for (let m = u; m < c; m++) {
+        const M = T[m];
+        if (!M) continue;
+        const v = {
+          ...d,
+          ...M.props.style
+        };
+        x.push(
+          s.cloneElement(M, {
+            key: M.key ?? m,
+            ref: n.onItemRegister(m),
+            style: v
+          })
+        );
+      }
+    n.positioner.all().forEach((m, M) => {
+      const v = T[M];
+      if (!v || !m) return;
+      const H = {
+        ...R,
+        top: m.top,
+        left: m.left,
+        ...v.props.style
+      };
+      x.push(
+        s.cloneElement(v, {
+          key: v.key ?? M,
+          ref: n.onItemRegister(M),
+          style: H
+        })
+      );
+    });
+  }
+  const E = n.virtualize ? I && g : u < c && g;
+  s.useEffect(() => (E && (h.current && cancelAnimationFrame(h.current), h.current = requestAnimationFrame(() => {
+    l((m) => m + 1);
+  })), () => {
+    h.current && cancelAnimationFrame(h.current);
+  }), [E]);
+  const {
+    lazyLoad: C,
+    updateLoadedIndices: L,
+    scrollTop: D
+  } = n;
+  s.useEffect(() => {
+    C && A.current.length > 0 && (L(A.current), A.current = []);
+  }, [C, L, D]);
+  const k = s.useMemo(() => {
+    const m = n.positioner.estimateHeight(
+      u,
+      n.itemHeight
+    );
+    if (u === c)
+      return m;
+    const M = c - u, v = Math.ceil(
+      M / n.positioner.columnCount * n.itemHeight
+    );
+    return m + v;
+  }, [n.positioner, n.itemHeight, u, c]), _ = s.useMemo(
+    () => ({
+      position: "relative",
+      width: "100%",
+      maxWidth: "100%",
+      height: Math.ceil(k),
+      maxHeight: Math.ceil(k),
+      ...e
+    }),
+    [k, e]
+  ), N = s.useMemo(
+    () => ({
+      position: "relative",
+      width: "100%",
+      maxWidth: "100%",
+      height: Math.ceil(k),
+      maxHeight: Math.ceil(k),
+      willChange: n.isScrolling ? "contents" : void 0,
+      pointerEvents: n.isScrolling ? "none" : void 0,
+      ...e
+    }),
+    [n.isScrolling, k, e]
+  ), B = n.virtualize ? N : _;
+  return !g && n.fallback ? n.fallback : /* @__PURE__ */ Y(
+    "div",
+    {
+      ...a,
+      ref: t,
+      style: B,
+      "data-version": g ? i : void 0,
+      children: x
+    }
+  );
+}
+function ue(r) {
+  const { asChild: o, ref: e, ...t } = r;
+  return /* @__PURE__ */ Y(o ? oe : "div", { "data-slot": "masonry-item", ...t, ref: e });
+}
+const xe = ze, Te = ue;
+export {
+  Te as Item,
+  ue as MasonryItem,
+  ze as MasonryRoot,
+  xe as Root
+};
+//# sourceMappingURL=Masonry.js.map