fiboui 2.8.4 → 2.9.0

package/dist/core.js

@@ -1,5 +1,5 @@
-import { C as e, E as t, V as r, a4 as i, a1 as o, a2 as n, Y as l, F as u, N as c, L as S, M as p, X as g, O as T, k as b, z as v, P as E, R as d, A as C, B as R, S as F, a6 as I, p as f, n as m, d as y, c as O, b as P, a as x, a0 as M, W as N, e as _, _ as w, g as A, Z as B, $ as V, T as L, U as h, i as q, l as z, a3 as G, Q as K, o as W, K as X, r as j, D as k, s as D, J as H, G as J, I as Q, H as U, a5 as Y, j as Z, w as $, h as ss, x as as, m as es, f as ts, y as rs, u as is, t as os, v as ns, q as ls } from "./client-DOrZXJAN.js";
-import { a as cs, c as Ss, p as ps, w as gs } from "./page-BOQJIKa5.js";
+import { C as e, E as t, X as r, a6 as i, a3 as o, a4 as n, _ as l, F as u, T as S, L as c, Q as p, Z as g, O as T, n as b, B as v, P as F, R as E, D as d, G as C, S as R, a8 as f, t as m, q as I, d as P, c as y, b as O, a as x, a2 as M, Y as N, e as _, f as w, a0 as A, g as B, $ as V, a1 as D, V as L, W as U, i as h, l as q, a5 as z, U as G, o as K, h as W, N as X, r as j, H as k, s as H, M as J, I as Q, K as Y, J as Z, a7 as $, m as ss, y as as, k as es, z as ts, p as rs, j as is, A as os, u as ns, w as ls, x as us, v as Ss } from "./client-3NdKI2xE.js";
+import { F as ps, P as gs, T as Ts, U as bs, a as vs, c as Fs, p as Es, w as ds } from "./page-xwU8SnoZ.js";
 export {
   e as ComputedSignal,
   t as Easing,
@@ -9,61 +9,67 @@ export {
   n as FiboAppBuilder,
   l as FiboStyles,
   u as FineGrainText,
-  c as INTERACTION_EFFECTS,
-  S as ListSignal,
+  ps as Format,
+  S as INTERACTION_EFFECTS,
+  c as ListSignal,
   p as MOTION_PRESETS,
   g as MotionStyles,
   T as Observable,
   b as Observer,
+  gs as Plural,
   v as Presence,
-  E as ProviderWrapper,
-  d as ReactivityRoot,
-  C as Reveal,
-  R as ScrollProgress,
-  F as Signal,
-  I as ValueBuilder,
-  f as applyResponsiveStyles,
-  m as bindText,
-  y as collection,
-  O as computed,
-  cs as createPage,
-  P as createReactivityRoot,
+  F as ProviderWrapper,
+  E as ReactivityRoot,
+  d as Reveal,
+  C as ScrollProgress,
+  R as Signal,
+  Ts as Transform,
+  bs as Unit,
+  f as ValueBuilder,
+  m as applyResponsiveStyles,
+  I as bindText,
+  P as collection,
+  y as computed,
+  vs as createPage,
+  O as createReactivityRoot,
   x as createStore,
-  Ss as cssCurve,
+  Fs as cssCurve,
   M as endSsrRequest,
   N as ensureInteractionFxCss,
   _ as ensureListId,
-  w as getCss,
-  A as getCurrentScope,
-  B as getMotionCss,
-  V as getStyleTag,
+  w as fiboDevStats,
+  A as getCss,
+  B as getCurrentScope,
+  V as getMotionCss,
+  D as getStyleTag,
   L as interactionEffectClass,
-  h as interactionEffectKebab,
-  q as interp,
-  z as listSignal,
-  G as mount,
-  K as normalizeInteractionEffect,
-  W as observable,
-  ps as page,
+  U as interactionEffectKebab,
+  h as interp,
+  q as listSignal,
+  z as mount,
+  G as normalizeInteractionEffect,
+  K as observable,
+  Es as page,
+  W as resetFiboDevStats,
   X as resolveCssEase,
   j as runInScope,
   k as scrollTo,
-  D as signal,
-  H as springEase,
-  J as startViewTransition,
-  Q as supportsScrollTimeline,
-  U as supportsViewTimeline,
-  Y as toElement,
-  Z as useBuilderState,
-  $ as useMountTransition,
-  ss as useObservable,
-  as as usePrefersReducedMotion,
-  es as useProvider,
-  ts as useReactiveStore,
-  rs as useScrollProgress,
-  is as useSignal,
-  os as useSpring,
-  ns as useStagger,
-  ls as useTransition,
-  gs as withFiboStyles
+  H as signal,
+  J as springEase,
+  Q as startViewTransition,
+  Y as supportsScrollTimeline,
+  Z as supportsViewTimeline,
+  $ as toElement,
+  ss as useBuilderState,
+  as as useMountTransition,
+  es as useObservable,
+  ts as usePrefersReducedMotion,
+  rs as useProvider,
+  is as useReactiveStore,
+  os as useScrollProgress,
+  ns as useSignal,
+  ls as useSpring,
+  us as useStagger,
+  Ss as useTransition,
+  ds as withFiboStyles
 };

package/dist/{icons-DujcjAOD.js → icons-DS8J4SFk.js}

@@ -1,15 +1,15 @@
 var L = Object.defineProperty;
-var R = (t, r, e) => r in t ? L(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
-var i = (t, r, e) => R(t, typeof r != "symbol" ? r + "" : r, e);
+var j = (t, r, e) => r in t ? L(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
+var i = (t, r, e) => j(t, typeof r != "symbol" ? r + "" : r, e);
 import h from "react";
-import { aX as C, aY as E, ay as y, ba as I, a7 as j, ac as H, a$ as W, b2 as M, b0 as D } from "./client-DOrZXJAN.js";
+import { b2 as w, b3 as E, aF as y, bc as I, a9 as R, aj as H, bd as M, b6 as N, b9 as D, b7 as $ } from "./client-3NdKI2xE.js";
 import { jsx as s, jsxs as v } from "react/jsx-runtime";
-function $(t) {
+function V(t) {
   if (typeof t != "string") return "";
   const r = t.trim();
   return !r || I(r) ? "" : r;
 }
-const V = ({ size: t }) => h.createElement(
+const q = ({ size: t }) => h.createElement(
   "svg",
   {
     width: t,
@@ -25,16 +25,16 @@ const V = ({ size: t }) => h.createElement(
     fill: "#6a6a6a"
   })
 ), U = h.memo((t) => {
-  const { image: r, size: e, border: u, shape: g, status: d, initials: b, icon: p, alt: x, className: n, style: o, ...l } = t, c = $(r), _ = typeof e == "number" ? `${e}px` : e, a = typeof e == "number" ? e : 40, F = {
+  const { image: r, size: e, border: u, shape: f, status: d, initials: b, icon: p, alt: x, className: a, style: o, ...n } = t, c = V(r), _ = typeof e == "number" ? `${e}px` : e, l = typeof e == "number" ? e : 40, F = {
     circle: "50%",
     rounded: "24%",
     square: "0"
-  }, k = {
+  }, C = {
     none: "transparent",
     online: "#10B981",
     offline: "#9CA3AF",
     busy: "#EF4444"
-  }, B = d !== "none" ? y().style({
+  }, S = d !== "none" ? y().style({
     position: "absolute",
     bottom: "-2%",
     right: "-2%",
@@ -42,16 +42,16 @@ const V = ({ size: t }) => h.createElement(
     height: "28%",
     minWidth: "10px",
     minHeight: "10px",
-    backgroundColor: k[d],
+    backgroundColor: C[d],
     borderRadius: "50%",
     border: "3px solid #ffffff",
     boxSizing: "content-box"
-  }).build() : null, f = typeof b == "string" ? b.trim().slice(0, 2).toUpperCase() : "", w = c ? null : f || (p === "user" ? h.createElement(V, { size: _ }) : p || null), N = typeof x == "string" && x.trim() || f || "Avatar", A = y().style({
+  }).build() : null, g = typeof b == "string" ? b.trim().slice(0, 2).toUpperCase() : "", B = c ? null : g || (p === "user" ? h.createElement(q, { size: _ }) : p || null), W = typeof x == "string" && x.trim() || g || "Avatar", A = y().style({
     width: "100%",
     height: "100%",
-    borderRadius: F[g],
+    borderRadius: F[f],
     backgroundImage: c ? `url(${JSON.stringify(c)})` : void 0,
-    backgroundColor: c ? void 0 : (o == null ? void 0 : o.backgroundColor) || (f ? "#ddd" : "transparent"),
+    backgroundColor: c ? void 0 : (o == null ? void 0 : o.backgroundColor) || (g ? "#ddd" : "transparent"),
     backgroundSize: "cover",
     backgroundPosition: "center",
     border: u,
@@ -61,23 +61,23 @@ const V = ({ size: t }) => h.createElement(
     justifyContent: "center",
     overflow: "hidden",
     color: (o == null ? void 0 : o.color) || "#555",
-    fontSize: a * 0.42,
+    fontSize: l * 0.42,
     fontWeight: 500,
     lineHeight: 1
-  }).children([w]).build();
-  return y().className(`fibo-avatar ${n || ""}`).props({
-    ...l,
+  }).children([B]).build();
+  return y().className(`fibo-avatar ${a || ""}`).props({
+    ...n,
     role: "img",
-    "aria-label": N
+    "aria-label": W
   }).style({
     position: "relative",
     width: _,
     height: _,
     ...o,
     overflow: "visible"
-  }).children([A, B]).build();
+  }).children([A, S]).build();
 });
-class q extends E {
+class T extends E {
   constructor() {
     super(...arguments);
     i(this, "_image", "");
@@ -134,25 +134,25 @@ class q extends E {
     return h.createElement(U, e);
   }
 }
-const re = C(q);
-function T(t) {
+const ie = w(T);
+function P(t) {
   return t === "success" || t === "warning" || t === "error" || t === "info" ? t : "none";
 }
-function P(t) {
+function G(t) {
   return t === "accent" || t === "outline" || t === "glass" || t === "solid" || t === "dot" || t === "neutral" ? t : "neutral";
 }
-function G(t) {
+function J(t) {
   return t === "pill" ? "pill" : "rounded";
 }
-const J = h.memo((t) => {
-  const { text: r, icon: e, variant: u, intent: g, shape: d, className: b, style: p, ...x } = t, n = T(g), o = P(u), l = G(d), c = {
+const O = h.memo((t) => {
+  const { text: r, icon: e, variant: u, intent: f, shape: d, className: b, style: p, ...x } = t, a = P(f), o = G(u), n = J(d), c = {
     none: { bg: "#F9FAFB", text: "#6B7280", border: "#E5E7EB" },
     success: { bg: "#ECFDF5", text: "#059669", border: "transparent" },
     warning: { bg: "#FFFBEB", text: "#D97706", border: "transparent" },
     error: { bg: "#FFF1F2", text: "#E11D48", border: "transparent" },
     info: { bg: "#EFF6FF", text: "#2563EB", border: "transparent" }
   };
-  let a = { ...{
+  let l = { ...{
     neutral: { backgroundColor: "#F9FAFB", color: "#6B7280", border: "1px solid #E5E7EB" },
     accent: { backgroundColor: "#EFF6FF", color: "#3B82F6", border: "none" },
     outline: { backgroundColor: "transparent", color: "#FFFFFF", border: "1px solid rgba(255,255,255,0.3)" },
@@ -165,29 +165,29 @@ const J = h.memo((t) => {
     solid: { backgroundColor: "#111827", color: "#FFFFFF", border: "none" },
     dot: { backgroundColor: "transparent", color: "#6B7280", border: "1px solid #E5E7EB", padding: "4px 10px" }
   }[o] };
-  if (n !== "none") {
-    const f = c[n];
+  if (a !== "none") {
+    const g = c[a];
     if (o === "solid") {
-      const w = {
+      const B = {
         none: "#111827",
         success: "#059669",
         warning: "#D97706",
         error: "#E11D48",
         info: "#2563EB"
       };
-      a.backgroundColor = w[n], a.color = "#FFFFFF";
-    } else o === "dot" ? (a.color = "#374151", a.borderColor = "#E5E7EB") : (a.backgroundColor = f.bg, a.color = f.text, f.border ? a.border = `1px solid ${f.border}` : a.border = "none");
+      l.backgroundColor = B[a], l.color = "#FFFFFF";
+    } else o === "dot" ? (l.color = "#374151", l.borderColor = "#E5E7EB") : (l.backgroundColor = g.bg, l.color = g.text, g.border ? l.border = `1px solid ${g.border}` : l.border = "none");
   }
   const F = {
     pill: "9999px",
     rounded: "8px"
-  }, k = n === "error" || n === "warning", B = n === "none" ? {} : {
-    role: k ? "alert" : "status",
-    "aria-live": k ? "assertive" : "polite"
+  }, C = a === "error" || a === "warning", S = a === "none" ? {} : {
+    role: C ? "alert" : "status",
+    "aria-live": C ? "assertive" : "polite"
   };
   return y().className(b).style({
-    ...a,
-    borderRadius: F[l],
+    ...l,
+    borderRadius: F[n],
     padding: o === "dot" ? "4px 8px" : "4px 10px",
     display: "inline-flex",
     alignItems: "center",
@@ -199,22 +199,22 @@ const J = h.memo((t) => {
     ...p
   }).props({
     ...x,
-    ...B
+    ...S
   }).children(
-    j().gap(6).alignItems("center").children([
-      o === "dot" && n !== "none" ? y().style({
+    R().gap(6).alignItems("center").children([
+      o === "dot" && a !== "none" ? y().style({
         width: "6px",
         height: "6px",
         borderRadius: "50%",
-        backgroundColor: c[n].text,
-        boxShadow: `0 0 6px ${c[n].text}66`
+        backgroundColor: c[a].text,
+        boxShadow: `0 0 6px ${c[a].text}66`
       }).props({ "aria-hidden": !0 }).build() : null,
       e ? y().classNames(["flex", "items-center"]).children(e).build() : null,
       H(r).fontSize(12).fontWeight(600).style({ color: "inherit" }).build()
     ]).build()
   ).build();
 });
-class O extends E {
+class K extends E {
   constructor() {
     super(...arguments);
     i(this, "_text", "");
@@ -249,56 +249,58 @@ class O extends E {
       style: this.getStyle(),
       ...this._props
     };
-    return h.createElement(J, e);
+    return h.createElement(O, e);
   }
 }
-const ie = C(O);
+const se = w(K);
 function z(t, r) {
-  if (!(typeof r != "string" || !W(r)))
-    for (const e of M(r))
+  if (!(typeof r != "string" || !N(r)))
+    for (const e of D(r))
       t.bindSignal(e);
 }
-function S(t) {
-  return typeof t != "string" ? "" : W(t) ? D(t) : t;
+function k(t) {
+  return typeof t != "string" ? "" : N(t) ? $(t) : t;
 }
-const X = {
+const Q = {
   circle: "50%",
   rounded: "8px",
   square: "0px"
-}, Y = h.memo((t) => {
+}, X = h.memo((t) => {
   const {
     src: r,
     alt: e,
     fit: u,
-    resizable: g,
+    resizable: f,
     clipShape: d,
     frameWidth: b,
     frameHeight: p,
     className: x,
-    style: n,
+    style: a,
     ...o
-  } = t, l = { ...n };
-  if (u && (l.objectFit = u), b && (l.width = `${b}px`), p && (l.height = `${p}px`), g && (l.maxWidth = "100%", p || (l.height = "auto")), d === "circle" || d === "rounded" || d === "square") {
+  } = t, n = { ...a };
+  if (n.display = n.display ?? "block", u && (n.objectFit = u), b && (n.width = `${b}px`), p && (n.height = `${p}px`), f && (n.maxWidth = "100%", p || (n.height = "auto")), d === "circle" || d === "rounded" || d === "square") {
     const F = d;
-    l.overflow = "hidden", l.borderRadius = X[F];
+    n.overflow = "hidden", n.borderRadius = Q[F];
   }
-  const c = S(typeof r == "string" ? r : ""), _ = c && !I(c) ? c : void 0, a = S(typeof e == "string" ? e : "");
+  const c = k(typeof r == "string" ? r : ""), _ = c && !I(c) ? c : void 0, l = k(typeof e == "string" ? e : "");
   return h.createElement("img", {
     ...o,
     src: _,
-    alt: a,
+    alt: l,
     className: x,
-    style: l
+    style: n
   });
 });
-class K extends E {
+class Y extends E {
   constructor(e = "") {
     super();
     i(this, "_src", "");
     i(this, "_alt", "");
     i(this, "_fit", "cover");
     i(this, "_resizable", !1);
-    i(this, "_clipShape");
+    /** Image-native clip (Tailwind / borderRadius on `<img>`). Distinct from
+     * {@link FiboBuilder.clipShape} chrome wrapper. */
+    i(this, "_imageClipShape");
     i(this, "_frameWidth");
     i(this, "_frameHeight");
     i(this, "_foregroundStyle");
@@ -319,36 +321,42 @@ class K extends E {
   scaledToFill() {
     return this._fit = "cover", this;
   }
+  /**
+   * Fixed numeric `{ width, height }` still paints on the `<img>` (tests +
+   * object-fit). Any flexible SwiftUI frame (`maxWidth: Size.infinity`, …)
+   * goes through {@link FiboBuilder.frame} (wrapper).
+   */
   frame(e) {
-    return this._frameWidth = e.width, this._frameHeight = e.height, this;
+    return M(e) ? (this._frameWidth = e.width, this._frameHeight = e.height, this) : super.frame(e);
   }
+  /** Named shapes paint on `<img>`; other radii use base chrome wrapper. */
   clipShape(e) {
-    return this._clipShape = e, this;
+    return e === "circle" || e === "rounded" || e === "square" ? (this._imageClipShape = e, this) : super.clipShape(e);
   }
   foregroundStyle(e) {
     return this._foregroundStyle = e, this;
   }
   build() {
     const e = ["fibo-image", ...this._classNames];
-    this._clipShape === "circle" ? e.push("rounded-full") : this._clipShape === "rounded" && e.push("rounded-lg");
-    const u = e.filter(Boolean).join(" "), g = this.getStyle();
-    this._foregroundStyle && (g.color = this._foregroundStyle);
+    this._imageClipShape === "circle" ? e.push("rounded-full") : this._imageClipShape === "rounded" && e.push("rounded-lg");
+    const u = e.filter(Boolean).join(" "), f = this.getStyle();
+    this._foregroundStyle && (f.color = this._foregroundStyle);
     const d = {
       ...this._props,
-      src: S(this._src),
-      alt: S(this._alt),
+      src: k(this._src),
+      alt: k(this._alt),
       fit: this._fit,
       resizable: this._resizable,
-      clipShape: this._clipShape,
+      clipShape: this._imageClipShape,
       frameWidth: this._frameWidth,
       frameHeight: this._frameHeight,
       className: u,
-      style: g
+      style: f
     };
-    return h.createElement(Y, d);
+    return h.createElement(X, d);
   }
 }
-const se = C(K), m = { "aria-hidden": !0, focusable: "false" }, oe = {
+const oe = w(Y), m = { "aria-hidden": !0, focusable: "false" }, ne = {
   Heart: /* @__PURE__ */ s("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", ...m, children: /* @__PURE__ */ s("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" }) }),
   Eth: /* @__PURE__ */ s("svg", { width: "14", height: "24", viewBox: "0 0 32 32", fill: "currentColor", ...m, children: /* @__PURE__ */ s("path", { d: "M15.925 23.96l-9.815-5.8 9.815 13.84 9.825-13.84-9.825 5.8zm0-23.96l-9.815 16.275 9.815 5.675 9.825-5.675-9.825-16.275zm0 20.3l-8.915-5.265 8.915-12.42 8.925 12.42-8.925 5.265z" }) }),
   Verify: /* @__PURE__ */ s("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "#3B82F6", stroke: "none", role: "img", "aria-label": "Verified", "aria-hidden": !1, focusable: "false", children: /* @__PURE__ */ s("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }),
@@ -376,8 +384,8 @@ const se = C(K), m = { "aria-hidden": !0, focusable: "false" }, oe = {
   ] })
 };
 export {
-  re as A,
-  ie as B,
-  se as I,
-  oe as a
+  ie as A,
+  se as B,
+  oe as I,
+  ne as a
 };

package/dist/{index-rNMzRy8Y.js → index-B6F3yf3H.js}

@@ -2,8 +2,8 @@ var ae = Object.defineProperty;
 var ie = (s, r, e) => r in s ? ae(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
 var i = (s, r, e) => ie(s, typeof r != "symbol" ? r + "" : r, e);
 import t from "react";
-import { aX as I, aY as $, a$ as z, b2 as R, b0 as q, x as le, ba as Z, bl as oe } from "./client-DOrZXJAN.js";
-import { a as F } from "./icons-DujcjAOD.js";
+import { b2 as I, b3 as $, b6 as z, b9 as R, b7 as q, z as le, bc as Z, bA as oe } from "./client-3NdKI2xE.js";
+import { a as F } from "./icons-DS8J4SFk.js";
 function ce(s, r) {
   if (!(typeof r != "string" || !z(r)))
     for (const e of R(r))
@@ -303,7 +303,7 @@ function H(s, r) {
     for (const e of R(r))
       s.bindSignal(e);
 }
-function X(s) {
+function K(s) {
   return typeof s != "string" ? s : z(s) ? q(s) : s;
 }
 const _e = {
@@ -432,8 +432,8 @@ class $e extends $ {
   }
   build() {
     const e = {
-      title: X(this._title),
-      description: X(this._description),
+      title: K(this._title),
+      description: K(this._description),
       intent: this._intent,
       className: this.getClassName(),
       style: this.getStyle(),
@@ -443,7 +443,7 @@ class $e extends $ {
   }
 }
 const Ue = I($e);
-function K(s, r) {
+function X(s, r) {
   if (!(typeof r != "string" || !z(r)))
     for (const e of R(r))
       s.bindSignal(e);
@@ -804,10 +804,10 @@ class Le extends $ {
     return this._variant = e, this;
   }
   label(e) {
-    return this._label = e, K(this, e), this;
+    return this._label = e, X(this, e), this;
   }
   subLabel(e) {
-    return this._subLabel = e, K(this, e), this;
+    return this._subLabel = e, X(this, e), this;
   }
   items(e) {
     return this._items = e, this;

package/dist/{index-C0qI47Zw.js → index-BLEG6Nql.js}

@@ -2,7 +2,7 @@ var w = Object.defineProperty;
 var S = (s, e, t) => e in s ? w(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
 var n = (s, e, t) => S(s, typeof e != "symbol" ? e + "" : e, t);
 import m from "react";
-import { aX as g, aY as d, b8 as N, b9 as C, b0 as j, a$ as _, b2 as z } from "./client-DOrZXJAN.js";
+import { b2 as g, b3 as d, ba as N, bb as C, b7 as j, b6 as _, b9 as z } from "./client-3NdKI2xE.js";
 function B(s, e) {
   if (!(typeof e != "string" || !_(e)))
     for (const t of z(e))
@@ -107,7 +107,7 @@ class $ extends d {
     );
   }
 }
-const Y = g($);
+const R = g($);
 function f(s) {
   return typeof s == "number" ? `${s}px` : s;
 }
@@ -151,8 +151,8 @@ class H extends d {
     });
   }
 }
-const k = g(H);
+const T = g(H);
 export {
-  Y as C,
-  k as S
+  R as C,
+  T as S
 };