fiboui 2.2.4 → 2.4.0

package/dist/{index-K-VIFyCP.js → index-ClppTuYv.js}

@@ -1,12 +1,12 @@
 "use client";
-var G = Object.defineProperty;
-var X = (n, s, e) => s in n ? G(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
-var r = (n, s, e) => X(n, typeof s != "symbol" ? s + "" : s, e);
-import i, { useState as V, useRef as D, useLayoutEffect as q } from "react";
-import { w as _, x as b, I as J, G as F, P as K } from "./builder-DxmEDvW3.js";
+var X = Object.defineProperty;
+var q = (n, s, e) => s in n ? X(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
+var r = (n, s, e) => q(n, typeof s != "symbol" ? s + "" : s, e);
+import i, { useState as T, useRef as D, useLayoutEffect as G } from "react";
+import { B as _, D as b, T as J, N as V, P as K } from "./builder-FPfXLYM6.js";
 import { P as W } from "./PluginManager-D5-ApsSN.js";
-import { R as Q, I as U } from "./index-nFXU29Ly.js";
-import { T as ee } from "./index-Des7FiFH.js";
+import { R as Q, I as U } from "./index-kWLK5n5t.js";
+import { T as ee } from "./index-y7-9rhRQ.js";
 import { e as te, L as ie } from "./Link-ElmaMZB8.js";
 class se extends b {
   build() {
@@ -28,7 +28,7 @@ class se extends b {
     );
   }
 }
-const Ie = _(se);
+const Se = _(se);
 class re extends b {
   constructor() {
     super(...arguments);
@@ -91,7 +91,7 @@ class re extends b {
     );
   }
 }
-const Se = _(re);
+const Ie = _(re);
 class ne extends b {
   build() {
     const s = this.getClassName(), e = this.getStyle(), t = this.processChildren();
@@ -214,7 +214,7 @@ class ae extends b {
       content: i.createElement(i.Fragment, null, ...J(e.children)),
       fixed: e.fixed ?? !1
     } : {
-      content: F(e),
+      content: V(e),
       fixed: !1
     };
   }
@@ -222,8 +222,8 @@ class ae extends b {
     return !e || typeof e != "object" || i.isValidElement(e) || "build" in e && typeof e.build == "function" ? !1 : "children" in e && !("type" in e);
   }
   build() {
-    var N, C, z, j, y, E, I, L, R, $, A, O, l, a, m, g, S, M, H, P, T, Y;
-    const e = this.processChildren(), t = this._structure, o = this._headerBar && ((N = t.header) == null ? void 0 : N.visible) !== !1, h = this._footerBar && ((C = t.footer) == null ? void 0 : C.visible) !== !1, c = this._sideBarLeft && ((z = t.sidebarLeft) == null ? void 0 : z.visible) !== !1, d = this._sideBarRight && ((j = t.sidebarRight) == null ? void 0 : j.visible) !== !1, f = c && ((y = t.sidebarLeft) == null ? void 0 : y.fullHeight), p = d && ((E = t.sidebarRight) == null ? void 0 : E.fullHeight), B = i.createElement(
+    var k, C, z, j, y, E, S, L, R, $, A, O, l, a, m, g, I, M, H, P, F, Y;
+    const e = this.processChildren(), t = this._structure, o = this._headerBar && ((k = t.header) == null ? void 0 : k.visible) !== !1, h = this._footerBar && ((C = t.footer) == null ? void 0 : C.visible) !== !1, c = this._sideBarLeft && ((z = t.sidebarLeft) == null ? void 0 : z.visible) !== !1, d = this._sideBarRight && ((j = t.sidebarRight) == null ? void 0 : j.visible) !== !1, f = c && ((y = t.sidebarLeft) == null ? void 0 : y.fullHeight), p = d && ((E = t.sidebarRight) == null ? void 0 : E.fullHeight), B = i.createElement(
       "div",
       {
         key: "scaffold-middle",
@@ -240,7 +240,7 @@ class ae extends b {
           key: "sidebar-left",
           className: "z-20",
           style: {
-            width: (I = t.sidebarLeft) == null ? void 0 : I.width,
+            width: (S = t.sidebarLeft) == null ? void 0 : S.width,
             position: ((L = t.sidebarLeft) == null ? void 0 : L.mode) === "over" ? "absolute" : ((R = t.sidebarLeft) == null ? void 0 : R.behavior) === "fixed" || this._sideBarLeft.fixed ? "sticky" : void 0,
             top: (($ = t.sidebarLeft) == null ? void 0 : $.behavior) === "fixed" || this._sideBarLeft.fixed ? 0 : void 0,
             height: ((A = t.sidebarLeft) == null ? void 0 : A.behavior) === "fixed" || this._sideBarLeft.fixed ? "100%" : void 0,
@@ -278,7 +278,7 @@ class ae extends b {
         key: "header-bar",
         className: "z-30",
         style: {
-          height: (S = t.header) == null ? void 0 : S.height,
+          height: (I = t.header) == null ? void 0 : I.height,
           position: ((M = t.header) == null ? void 0 : M.position) || (this._headerBar.fixed ? "sticky" : "static"),
           top: 0,
           backgroundColor: "var(--fibo-surface, #ffffff)",
@@ -318,7 +318,7 @@ class ae extends b {
       i.createElement("div", {
         key: "sidebar-left-full",
         style: {
-          width: (T = t.sidebarLeft) == null ? void 0 : T.width,
+          width: (F = t.sidebarLeft) == null ? void 0 : F.width,
           overflowY: "auto",
           borderRight: "1px solid var(--fibo-outline, #e0e0e0)",
           backgroundColor: "var(--fibo-surface, #ffffff)",
@@ -408,10 +408,10 @@ class ce extends b {
   }
 }
 const Re = _(ce), de = i.memo((n) => {
-  const { width: s = 260, collapsed: e, className: t, style: o, children: h, ...c } = n, d = te(), f = (d == null ? void 0 : d.currentPath) ?? "", p = e ? 80 : s, w = W.getInstance().getSidebarItems().map((u, k) => {
+  const { width: s = 260, collapsed: e, className: t, style: o, children: h, ...c } = n, d = te(), f = (d == null ? void 0 : d.currentPath) ?? "", p = e ? 80 : s, w = W.getInstance().getSidebarItems().map((u, N) => {
     const x = f === u.path;
     return i.createElement(ie, {
-      key: `plugin-item-${u.path || k}`,
+      key: `plugin-item-${u.path || N}`,
       to: u.path,
       className: "no-underline block mb-1",
       children: Q().padding(12).alignItems("center").gap(12).className(`
@@ -459,7 +459,7 @@ class fe extends b {
   }
 }
 const $e = _(fe), ue = i.memo((n) => {
-  const { sidebar: s, header: e, children: t, className: o, style: h, ...c } = n, [d, f] = V(!1);
+  const { sidebar: s, header: e, children: t, className: o, style: h, ...c } = n, [d, f] = T(!1);
   return i.createElement(
     "div",
     {
@@ -517,10 +517,10 @@ class me extends b {
     r(this, "_header");
   }
   sidebar(e) {
-    return this._sidebar = F(e), this;
+    return this._sidebar = V(e), this;
   }
   header(e) {
-    return this._header = F(e), this;
+    return this._header = V(e), this;
   }
   build() {
     const e = {
@@ -666,19 +666,19 @@ const Me = _(be), ye = i.memo((n) => {
     containerHeight: c = 500,
     className: d,
     style: f
-  } = n, [p, B] = V(0), w = D(null), u = D(/* @__PURE__ */ new Map()), k = D(/* @__PURE__ */ new Map()), x = s.length, v = e !== void 0, N = (l) => v ? e : k.current.get(l) ?? t, C = (l) => {
+  } = n, [p, B] = T(0), w = D(null), u = D(/* @__PURE__ */ new Map()), N = D(/* @__PURE__ */ new Map()), x = s.length, v = e !== void 0, k = (l) => v ? e : N.current.get(l) ?? t, C = (l) => {
     if (v)
       return l * e;
     let a = 0;
     for (let m = 0; m < l; m++)
-      a += N(m);
+      a += k(m);
     return a;
   }, z = () => {
     if (v)
       return x * e;
     let l = 0;
     for (let a = 0; a < x; a++)
-      l += N(a);
+      l += k(a);
     return l;
   }, y = Math.max(0, ((l) => {
     if (v)
@@ -697,21 +697,21 @@ const Me = _(be), ye = i.memo((n) => {
   } else {
     let l = C(y), a = y;
     for (; l < p + c + h * t && a < x; )
-      l += N(a), a++;
+      l += k(a), a++;
     E = Math.min(x, a);
   }
-  const I = s.slice(y, E), L = C(y), R = z(), [$, A] = V(0);
-  q(() => {
+  const S = s.slice(y, E), L = C(y), R = z(), [$, A] = T(0);
+  G(() => {
     if (!o || v) return;
     let l = !1;
-    I.forEach((a, m) => {
-      const g = y + m, S = u.current.get(g);
-      if (S) {
-        const H = S.getBoundingClientRect().height;
-        H > 0 && k.current.get(g) !== H && (k.current.set(g, H), l = !0);
+    S.forEach((a, m) => {
+      const g = y + m, I = u.current.get(g);
+      if (I) {
+        const H = I.getBoundingClientRect().height;
+        H > 0 && N.current.get(g) !== H && (N.current.set(g, H), l = !0);
       }
     }), l && A((a) => a + 1);
-  }, [I, y, o, v, $]);
+  }, [S, y, o, v, $]);
   const O = (l) => {
     B(l.currentTarget.scrollTop);
   };
@@ -747,7 +747,7 @@ const Me = _(be), ye = i.memo((n) => {
           width: "100%"
         }
       },
-      I.map((l, a) => {
+      S.map((l, a) => {
         const m = y + a;
         return i.createElement(
           "div",
@@ -804,14 +804,14 @@ class xe extends b {
 }
 const Pe = _(xe);
 export {
-  Ie as C,
+  Se as C,
   Ae as D,
   Re as H,
   je as L,
   ze as S,
   Pe as V,
   Oe as Z,
-  Se as a,
+  Ie as a,
   He as b,
   Le as c,
   $e as d,

package/dist/{index-CKbAiJg2.js → index-Cnox750A.js}

@@ -3,10 +3,10 @@ var U = Object.defineProperty;
 var G = (n, s, e) => s in n ? U(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
 var r = (n, s, e) => G(n, typeof s != "symbol" ? s + "" : s, e);
 import t from "react";
-import { w as C, x as F } from "./builder-DxmEDvW3.js";
-import { B as j } from "./index-B_NshIUT.js";
-import { T as O } from "./index-Des7FiFH.js";
-import { R as J } from "./index-nFXU29Ly.js";
+import { B as C, D as F } from "./builder-FPfXLYM6.js";
+import { B as j } from "./index-BuatCnp7.js";
+import { T as O } from "./index-y7-9rhRQ.js";
+import { R as J } from "./index-kWLK5n5t.js";
 import { jsxs as $, jsx as f } from "react/jsx-runtime";
 const K = ({ size: n }) => t.createElement(
   "svg",

package/dist/{index-CIUytVXq.js → index-DkH15EIF.js}

@@ -2,11 +2,11 @@
 var oe = Object.defineProperty;
 var le = (n, s, e) => s in n ? oe(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
 var i = (n, s, e) => le(n, typeof s != "symbol" ? s + "" : s, e);
-import t, { useState as D, useRef as L, useLayoutEffect as Z, useEffect as ce } from "react";
-import { w, x as I, G as T, H as q } from "./builder-DxmEDvW3.js";
-import { B as C } from "./index-B_NshIUT.js";
+import t, { useState as D, useRef as L, useLayoutEffect as Q, useEffect as ce } from "react";
+import { B as w, D as I, N as T, Q as Z } from "./builder-FPfXLYM6.js";
+import { B as C } from "./index-BuatCnp7.js";
 import { t as de } from "./bundle-mjs-wppB-TKB.js";
-import { T as me } from "./index-Des7FiFH.js";
+import { T as me } from "./index-y7-9rhRQ.js";
 const he = t.memo((n) => {
   const { text: s, subtitle: e, number: r, color: d, className: p, style: c, children: u, ...g } = n;
   return t.createElement(
@@ -132,7 +132,7 @@ class V {
     }), s.join("; ") + ";";
   }
 }
-const pe = 100, J = 60, Q = 5, fe = t.memo((n) => {
+const pe = 100, q = 60, J = 5, fe = t.memo((n) => {
   const {
     items: s,
     renderItem: e,
@@ -149,7 +149,7 @@ const pe = 100, J = 60, Q = 5, fe = t.memo((n) => {
     customItemHover: o,
     customItemActive: _,
     customItemFocus: y
-  } = n, [H, ee] = D(0), [te, se] = D(0), re = L(null), R = L(/* @__PURE__ */ new Map()), O = L(/* @__PURE__ */ new Map()), F = L(null), b = a === "horizontal", $ = s.length, B = $ > pe, A = (h) => O.current.get(h) ?? J, j = (h) => {
+  } = n, [H, ee] = D(0), [te, se] = D(0), re = L(null), R = L(/* @__PURE__ */ new Map()), O = L(/* @__PURE__ */ new Map()), F = L(null), b = a === "horizontal", $ = s.length, B = $ > pe, A = (h) => O.current.get(h) ?? q, j = (h) => {
     let l = 0;
     for (let f = 0; f < h; f++)
       l += A(f);
@@ -169,14 +169,14 @@ const pe = 100, J = 60, Q = 5, fe = t.memo((n) => {
   };
   let S = 0, X = $, G = 0, M = 0;
   if (B) {
-    S = Math.max(0, ne(H) - Q);
+    S = Math.max(0, ne(H) - J);
     let h = j(S), l = S;
-    for (; h < H + v + Q * J && l < $; )
+    for (; h < H + v + J * q && l < $; )
       h += A(l), l++;
     X = Math.min($, l), G = j(S), M = ie();
   }
   const P = s.slice(S, X);
-  Z(() => {
+  Q(() => {
     if (!B) return;
     let h = !1;
     P.forEach((l, f) => {
@@ -186,7 +186,7 @@ const pe = 100, J = 60, Q = 5, fe = t.memo((n) => {
         z > 0 && O.current.get(N) !== z && (O.current.set(N, z), h = !0);
       }
     }), h && se((l) => l + 1);
-  }, [P, S, B, b, te]), Z(() => {
+  }, [P, S, B, b, te]), Q(() => {
     if (!u || p) return;
     const h = new IntersectionObserver(
       (l) => {
@@ -915,7 +915,7 @@ const Ce = t.memo(({ builder: n }) => {
         return a;
       const _ = m[o % m.length];
       return t.createElement("div", {
-        key: q(a, o),
+        key: Z(a, o),
         style: { gridColumn: `span ${_.col}`, gridRow: `span ${_.row}` }
       }, a);
     }));
@@ -936,7 +936,7 @@ const Ce = t.memo(({ builder: n }) => {
     }, t.Children.map(
       s,
       (a, o) => t.createElement("div", {
-        key: q(a, o),
+        key: Z(a, o),
         className: "break-inside-avoid mb-4"
       }, a)
     ));

package/dist/{index-nFXU29Ly.js → index-kWLK5n5t.js}

@@ -3,7 +3,7 @@ var m = Object.defineProperty;
 var p = (e, t, s) => t in e ? m(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
 var r = (e, t, s) => p(e, typeof t != "symbol" ? t + "" : t, s);
 import o from "react";
-import { w as a, x as u } from "./builder-DxmEDvW3.js";
+import { B as a, D as u } from "./builder-FPfXLYM6.js";
 class g extends u {
   constructor() {
     super(...arguments);
@@ -59,7 +59,7 @@ class g extends u {
     );
   }
 }
-const y = a(g), _ = o.memo((e) => {
+const x = a(g), _ = o.memo((e) => {
   const {
     source: t,
     color: s,
@@ -116,5 +116,5 @@ class f extends u {
 const w = a(f);
 export {
   w as I,
-  y as R
+  x as R
 };

package/dist/index-y7-9rhRQ.js

@@ -0,0 +1,160 @@
+"use client";
+var f = Object.defineProperty;
+var b = (i, e, t) => e in i ? f(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var a = (i, e, t) => b(i, typeof e != "symbol" ? e + "" : e, t);
+import o from "react";
+import { B as c, D as x } from "./builder-FPfXLYM6.js";
+import { F as g } from "./FineGrain-BBvoBgWP.js";
+const p = {
+  h1: {
+    fontSize: "var(--fibo-text-h1-size, 2.25rem)",
+    fontWeight: "var(--fibo-text-h1-weight, 700)",
+    letterSpacing: "var(--fibo-text-h1-tracking, -0.025em)",
+    lineHeight: "var(--fibo-text-h1-height, 1.2)",
+    color: "var(--fibo-text-h1-color, inherit)"
+  },
+  h2: {
+    fontSize: "var(--fibo-text-h2-size, 1.875rem)",
+    fontWeight: "var(--fibo-text-h2-weight, 700)",
+    letterSpacing: "var(--fibo-text-h2-tracking, -0.025em)",
+    lineHeight: "var(--fibo-text-h2-height, 1.25)",
+    color: "var(--fibo-text-h2-color, inherit)"
+  },
+  h3: {
+    fontSize: "var(--fibo-text-h3-size, 1.5rem)",
+    fontWeight: "var(--fibo-text-h3-weight, 600)",
+    letterSpacing: "var(--fibo-text-h3-tracking, -0.02em)",
+    lineHeight: "var(--fibo-text-h3-height, 1.3)",
+    color: "var(--fibo-text-h3-color, inherit)"
+  },
+  h4: {
+    fontSize: "var(--fibo-text-h4-size, 1.25rem)",
+    fontWeight: "var(--fibo-text-h4-weight, 600)",
+    lineHeight: "var(--fibo-text-h4-height, 1.35)",
+    color: "var(--fibo-text-h4-color, inherit)"
+  },
+  h5: {
+    fontSize: "var(--fibo-text-h5-size, 1.125rem)",
+    fontWeight: "var(--fibo-text-h5-weight, 600)",
+    lineHeight: "var(--fibo-text-h5-height, 1.4)",
+    color: "var(--fibo-text-h5-color, inherit)"
+  },
+  h6: {
+    fontSize: "var(--fibo-text-h6-size, 1rem)",
+    fontWeight: "var(--fibo-text-h6-weight, 600)",
+    lineHeight: "var(--fibo-text-h6-height, 1.45)",
+    color: "var(--fibo-text-h6-color, inherit)"
+  },
+  body: {
+    fontSize: "var(--fibo-text-body-size, 1rem)",
+    fontWeight: "var(--fibo-text-body-weight, 400)",
+    lineHeight: "var(--fibo-text-body-height, 1.5)",
+    color: "var(--fibo-text-body-color, inherit)"
+  },
+  caption: {
+    fontSize: "var(--fibo-text-caption-size, 0.875rem)",
+    fontWeight: "var(--fibo-text-caption-weight, 400)",
+    lineHeight: "var(--fibo-text-caption-height, 1.4)",
+    color: "var(--fibo-text-caption-color, inherit)"
+  },
+  label: {
+    fontSize: "var(--fibo-text-label-size, 0.875rem)",
+    fontWeight: "var(--fibo-text-label-weight, 500)",
+    letterSpacing: "var(--fibo-text-label-tracking, 0.01em)",
+    lineHeight: "var(--fibo-text-label-height, 1.4)",
+    color: "var(--fibo-text-label-color, inherit)"
+  }
+};
+function n(i, e) {
+  return {
+    margin: 0,
+    overflowWrap: "anywhere",
+    wordBreak: "break-word",
+    maxWidth: "100%",
+    ...p[i],
+    ...e
+  };
+}
+const m = o.memo((i) => {
+  const { text: e, type: t, className: h, style: r, ...s } = i, l = {
+    h1: "h1",
+    h2: "h2",
+    h3: "h3",
+    h4: "h4",
+    h5: "h5",
+    h6: "h6",
+    body: "p",
+    caption: "span",
+    label: "label"
+  };
+  return o.createElement(
+    l[t],
+    {
+      className: `fibo-text fibo-text-${t} min-w-0 ${h}`,
+      style: n(t, r),
+      ...s
+    },
+    e
+  );
+});
+class v extends x {
+  constructor(t = "") {
+    super();
+    a(this, "_text", "");
+    a(this, "_type", "body");
+    this.text(t);
+  }
+  text(t) {
+    return this._text = t, this;
+  }
+  type(t) {
+    return this._type = t, this;
+  }
+  variant(t) {
+    return this._type = t, this;
+  }
+  nowrap() {
+    return this._classNames.push("whitespace-nowrap"), this;
+  }
+  mono() {
+    return this._classNames.push("font-mono"), this;
+  }
+  muted() {
+    return this._style = { ...this._style, color: "#9a9a9a" }, this;
+  }
+  build() {
+    const t = {
+      h1: "h1",
+      h2: "h2",
+      h3: "h3",
+      h4: "h4",
+      h5: "h5",
+      h6: "h6",
+      body: "p",
+      caption: "span",
+      label: "label"
+    };
+    if (typeof this._text == "function") {
+      const r = this._text;
+      return o.createElement(g, {
+        compute: r,
+        as: t[this._type],
+        className: `fibo-text fibo-text-${this._type} min-w-0 ${this.getClassName()}`,
+        style: n(this._type, this.getStyle()),
+        ...this._props
+      });
+    }
+    const h = {
+      text: this._text,
+      type: this._type,
+      className: this.getClassName(),
+      style: this.getStyle(),
+      ...this._props
+    };
+    return o.createElement(m, h);
+  }
+}
+const z = c(v);
+export {
+  z as T
+};