@anoki/fse-ui/dist/index.es250.js

FSE UI components library

import n from "react";
var b = typeof window > "u", y = b ? n.useEffect : n.useLayoutEffect, $ = 0, v = () => ++$, m = !1;
function x() {
  let [t, s] = n.useState(m ? v : void 0);
  return y(() => {
    t === void 0 && s(v()), m = !0;
  }, []), t === void 0 ? t : `rwb-${t.toString(32)}`;
}
function E() {
  return n.useMemo(() => "useId" in n ? n.useId : x, [])();
}
var p = "__wrap_b", f = "__wrap_n", _ = "__wrap_o", w = (t, s, e) => {
  e = e || document.querySelector(`[data-br="${t}"]`);
  let r = e == null ? void 0 : e.parentElement;
  if (!r) return;
  let l = (d) => e.style.maxWidth = d + "px";
  e.style.maxWidth = "";
  let i = r.clientWidth, u = r.clientHeight, o = i / 2 - 0.25, a = i + 0.5, c;
  if (i) {
    for (l(o), o = Math.max(e.scrollWidth, o); o + 1 < a; ) c = Math.round((o + a) / 2), l(c), r.clientHeight === u ? a = c : o = c;
    l(a * s + i * (1 - s));
  }
  e.__wrap_o || (typeof ResizeObserver < "u" ? (e.__wrap_o = new ResizeObserver(() => {
    self.__wrap_b(0, +e.dataset.brr, e);
  })).observe(r) : process.env.NODE_ENV === "development" && console.warn("The browser you are using does not support the ResizeObserver API. Please consider add polyfill for this API to avoid potential layout shifts or upgrade your browser. Read more: https://github.com/shuding/react-wrap-balancer#browser-support-information"));
}, S = w.toString(), N = '(self.CSS&&CSS.supports("text-wrap","balance")?1:2)', A = (t, s, e = "") => (e && (e = `self.${f}!=1&&${e}`), n.createElement("script", { suppressHydrationWarning: !0, dangerouslySetInnerHTML: { __html: (t ? "" : `self.${f}=self.${f}||${N};self.${p}=${S};`) + e }, nonce: s })), I = n.createContext({ preferNative: !0, hasProvider: !1 }), O = n.forwardRef(({ ratio: t = 1, preferNative: s, nonce: e, children: r, as: l, ...i }, u) => {
  let o = E(), a = n.useRef(), c = n.useContext(I), d = s ?? c.preferNative, g = l || "span";
  return n.useImperativeHandle(u, () => a.current, []), y(() => {
    d && self[f] === 1 || a.current && (self[p] = w)(0, t, a.current);
  }, [r, d, t]), y(() => {
    if (!(d && self[f] === 1)) return () => {
      if (!a.current) return;
      let h = a.current[_];
      h && (h.disconnect(), delete a.current[_]);
    };
  }, [d]), process.env.NODE_ENV === "development" && r && !Array.isArray(r) && typeof r == "object" && "type" in r && typeof r.type == "string" && r.type !== "span" && console.warn(`<Balancer> should not wrap <${r.type}> inside. Instead, it should directly wrap text or inline nodes.

Try changing this:
  <Balancer><${r.type}>content</${r.type}></Balancer>
To:
  <${r.type}><Balancer>content</Balancer></${r.type}>`), n.createElement(n.Fragment, null, n.createElement(g, { ...i, "data-br": o, "data-brr": t, ref: a, style: { display: "inline-block", verticalAlign: "top", textDecoration: "inherit", textWrap: d ? "balance" : "initial" }, suppressHydrationWarning: !0 }, r), A(c.hasProvider, e, `self.${p}("${o}",${t})`));
});
if (!b && process.env.NODE_ENV !== "production") {
  let t = document.querySelector("[data-next-hide-fouc]");
  if (t) {
    let s = (r) => {
      for (let l of r) for (let i of Array.from(l.removedNodes)) {
        if (i !== t) continue;
        e.disconnect();
        let u = document.querySelectorAll("[data-br]");
        for (let o of Array.from(u)) self[p](0, +o.dataset.brr, o);
      }
    }, e = new MutationObserver(s);
    e.observe(document.head, { childList: !0 });
  }
}
var B = O;
export {
  O as Balancer,
  B as default
};
//# sourceMappingURL=index.es250.js.map