fiboui 2.6.3 → 2.7.0

package/dist/index-C4qvvr03.js

@@ -0,0 +1,1474 @@
+var Ct = Object.defineProperty;
+var Et = (e, r, t) => r in e ? Ct(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
+var n = (e, r, t) => Et(e, typeof r != "symbol" ? r + "" : r, t);
+import s from "react";
+import { aT as A, aU as T, aV as C, aX as K, aW as P, aZ as it, a_ as bt, b1 as kt, aY as It, au as B, F as nt, be as lt, bf as Bt, bg as At, a3 as W, a8 as x } from "./client-CGjHCx8F.js";
+import { S as D, C as F } from "./index-Db8lVjta.js";
+import { B as yt } from "./index-DVApKYWt.js";
+import { B as Z, I as ot, a as L, A as Tt } from "./icons-GEqYd2M9.js";
+function j(e, r) {
+  if (!(typeof r != "string" || !C(r)))
+    for (const t of K(r))
+      e.bindSignal(t);
+}
+function Y(e) {
+  return typeof e != "string" ? e : C(e) ? P(e) : e;
+}
+function z(e, r) {
+  if (typeof r == "function") {
+    try {
+      z(e, r());
+    } catch {
+    }
+    return;
+  }
+  if (typeof r == "string") {
+    j(e, r);
+    return;
+  }
+  if (Array.isArray(r))
+    for (const t of r) z(e, t);
+}
+function Pt(e) {
+  return typeof e == "string" && C(e) ? P(e) : e;
+}
+function X(e) {
+  return e == null || e === !1 ? null : typeof e == "string" ? Y(e) ?? e : it(e);
+}
+const $t = {
+  green: "var(--fibo-success, #22c55e)",
+  orange: "var(--fibo-warning, #f97316)",
+  red: "var(--fibo-error, #ef4444)",
+  blue: "var(--fibo-info, #3b82f6)",
+  purple: "var(--fibo-tertiary, #a855f7)"
+}, Rt = /* @__PURE__ */ new Set(["script", "iframe", "object", "embed", "link", "style"]);
+function jt(e) {
+  if (typeof e != "string") return "article";
+  const r = e.trim().toLowerCase();
+  return !r || !/^[a-z][a-z0-9]*$/.test(r) || Rt.has(r) ? "article" : r;
+}
+const zt = s.memo((e) => {
+  const {
+    text: r,
+    subtitle: t,
+    number: i,
+    accentColor: o,
+    className: l,
+    style: a,
+    children: c,
+    header: f,
+    footer: g,
+    as: S,
+    ...p
+  } = e;
+  delete p.color;
+  const h = Array.isArray(c) ? c : c == null ? [] : [c], u = p.onClick, _ = p.onKeyDown, d = typeof u == "function", k = [
+    "fibo-card",
+    "rounded-[24px]",
+    "transition-shadow",
+    "duration-300",
+    "p-4",
+    d ? "fibo-clickable" : "",
+    l
+  ].filter(Boolean).join(" "), $ = {
+    ...o ? {
+      borderLeftWidth: 4,
+      borderLeftStyle: "solid",
+      borderLeftColor: o
+    } : {},
+    ...a
+  }, v = X(f), E = X(g);
+  return s.createElement(
+    jt(S),
+    {
+      ...p,
+      className: k,
+      style: $,
+      onClick: u,
+      ...d ? {
+        role: "button",
+        tabIndex: p.tabIndex ?? 0,
+        onKeyDown: (b) => {
+          _ == null || _(b), !b.defaultPrevented && b.target === b.currentTarget && (b.key === "Enter" || b.key === " ") && (b.preventDefault(), b.currentTarget.click());
+        }
+      } : null
+    },
+    v ? s.createElement("header", { className: "fibo-card-header" }, v) : null,
+    s.createElement(
+      "div",
+      { className: "flex flex-col gap-2" },
+      r && s.createElement(
+        "h3",
+        {
+          className: "font-semibold text-[var(--fibo-on-surface-variant)] text-sm uppercase tracking-wide"
+        },
+        r
+      ),
+      i && s.createElement(
+        "p",
+        {
+          className: "font-bold text-[var(--fibo-on-surface)] text-3xl"
+        },
+        i
+      ),
+      t && s.createElement(
+        "p",
+        {
+          className: "text-[var(--fibo-on-surface-variant)] text-xs"
+        },
+        t
+      ),
+      ...h
+    ),
+    E ? s.createElement("footer", { className: "fibo-card-footer" }, E) : null
+  );
+});
+class Gt extends T {
+  constructor() {
+    super(...arguments);
+    n(this, "_text", "");
+    n(this, "_subtitle");
+    n(this, "_number");
+    n(this, "_color");
+    n(this, "_header");
+    n(this, "_footer");
+    n(this, "_as");
+  }
+  text(t) {
+    return this._text = t, j(this, t), this;
+  }
+  /** Alias of `.text()` — same slot as Banner/ListTile/Alert `.title()`. */
+  title(t) {
+    return this.text(t);
+  }
+  subtitle(t) {
+    return this._subtitle = t, j(this, t), this;
+  }
+  number(t) {
+    return this._number = t, j(this, t), this;
+  }
+  children(t) {
+    return z(this, t), super.children(t);
+  }
+  header(t) {
+    return this._header = t, z(this, t), this;
+  }
+  footer(t) {
+    return this._footer = t, z(this, t), this;
+  }
+  as(t) {
+    return this._as = String(t), this;
+  }
+  props(t) {
+    return t && (j(this, t.text), j(this, t.title), j(this, t.subtitle), j(this, t.number), z(this, t.header), z(this, t.footer), "children" in t && z(this, t.children)), super.props(t);
+  }
+  color(t) {
+    return this._color = t, this;
+  }
+  build() {
+    const t = this._color ? $t[this._color] : void 0, {
+      className: i,
+      text: o,
+      title: l,
+      subtitle: a,
+      number: c,
+      header: f,
+      footer: g,
+      as: S,
+      ...p
+    } = this._props, h = [...this._classNames, i].filter(Boolean).join(" "), u = {
+      text: Y(o ?? l ?? this._text),
+      subtitle: Y(a ?? this._subtitle),
+      number: Y(c ?? this._number),
+      header: X(this._header ?? f),
+      footer: X(this._footer ?? g),
+      as: this._as ?? S,
+      accentColor: t,
+      style: this.getStyle(),
+      children: this.processChildren().map(Pt),
+      ...p,
+      className: h
+    };
+    return s.createElement(zt, u);
+  }
+}
+const J = A(Gt);
+function H(e, r) {
+  if (!(typeof r != "string" || !C(r)))
+    for (const t of K(r))
+      e.bindSignal(t);
+}
+function V(e) {
+  return typeof e != "string" ? e : C(e) ? P(e) : e;
+}
+function q(e) {
+  return typeof e == "string" && C(e) ? P(e) : e;
+}
+function U(e, r) {
+  return typeof r == "string" ? (H(e, r), r) : it(r);
+}
+const Ft = 'a, button, input, textarea, select, [role="button"], [role="switch"], [role="checkbox"], [role="menuitem"]';
+function ct(e) {
+  const r = e.target;
+  r != null && r.closest(Ft) && e.stopPropagation();
+}
+const Lt = () => s.createElement(
+  "svg",
+  {
+    width: 12,
+    height: 12,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    "aria-hidden": !0
+  },
+  s.createElement("path", { d: "M9 5l7 7-7 7" })
+), Wt = s.memo((e) => {
+  const {
+    leading: r,
+    title: t,
+    subtitle: i,
+    trailing: o,
+    chevron: l,
+    divider: a,
+    dividerColor: c,
+    onPress: f,
+    href: g,
+    disabled: S,
+    dense: p,
+    onTap: h,
+    className: u,
+    style: _,
+    ...d
+  } = e, k = _ || {}, $ = k.padding ?? (p ? "8px 0" : "14px 0"), v = d.onClick, E = d.onKeyDown, b = typeof f == "function" ? f : typeof h == "function" ? h : void 0, m = !!S, N = typeof g == "string" ? g.trim() : "", y = N && !bt(N) ? N : void 0, w = !!y && !m, R = typeof b == "function" || typeof v == "function" || w, wt = R && !m, vt = typeof t == "string" ? s.createElement(
+    "span",
+    {
+      className: "fibo-list-tile-title",
+      style: { fontSize: 11, letterSpacing: "0.06em", lineHeight: 1.3, margin: 0 }
+    },
+    q(t)
+  ) : t, St = typeof i == "string" ? s.createElement(
+    "span",
+    {
+      className: "fibo-list-tile-subtitle",
+      style: {
+        fontSize: 8,
+        letterSpacing: "0.06em",
+        lineHeight: 1.3,
+        margin: 0,
+        color: "#9a9a9a"
+      }
+    },
+    q(i)
+  ) : i, Q = q(r), O = q(o), at = d.target, Nt = w && at && String(at).toLowerCase() === "_blank" ? kt(d.rel, "noopener noreferrer") : d.rel, xt = (I) => {
+    if (m) {
+      I.preventDefault(), I.stopPropagation();
+      return;
+    }
+    b == null || b(), v == null || v(I);
+  }, G = {
+    className: It("fibo-list-tile flex flex-row items-center w-full", u),
+    style: {
+      padding: $,
+      borderBottom: a ? `1px solid ${c || "#3b3b3b"}` : "none",
+      cursor: m ? "not-allowed" : wt ? "pointer" : void 0,
+      opacity: m ? 0.6 : void 0,
+      pointerEvents: m ? "none" : void 0,
+      ...k
+    },
+    ...d,
+    rel: Nt,
+    onClick: R || m ? xt : v
+  };
+  return w && (G.href = y), m && (G["aria-disabled"] = !0, G.tabIndex = d.tabIndex ?? -1), !w && R && (G.role = "button", m || (G.tabIndex = d.tabIndex ?? 0, G.onKeyDown = (I) => {
+    E == null || E(I), !I.defaultPrevented && I.target === I.currentTarget && (I.key === "Enter" || I.key === " ") && (I.preventDefault(), I.currentTarget.click());
+  })), s.createElement(
+    w ? "a" : "div",
+    G,
+    Q != null && Q !== !1 ? s.createElement(
+      "div",
+      {
+        key: "leading",
+        className: "fibo-list-tile-leading shrink-0 flex items-center",
+        style: { color: "#9a9a9a", marginRight: 12 },
+        onClick: ct
+      },
+      Q
+    ) : null,
+    s.createElement(
+      "div",
+      {
+        key: "body",
+        className: "fibo-list-tile-body flex-1 min-w-0 flex flex-col justify-center"
+      },
+      vt,
+      St
+    ),
+    O != null && O !== !1 ? s.createElement(
+      "div",
+      {
+        key: "trailing",
+        className: "fibo-list-tile-trailing shrink-0 flex items-center",
+        style: { color: "#9a9a9a", marginLeft: 12 },
+        onClick: ct
+      },
+      O
+    ) : null,
+    l ? s.createElement(
+      "div",
+      {
+        key: "chevron",
+        className: "fibo-list-tile-chevron shrink-0 flex items-center",
+        style: { color: "#9a9a9a", marginLeft: O ? 8 : 0 }
+      },
+      s.createElement(Lt)
+    ) : null
+  );
+});
+class Dt extends T {
+  constructor() {
+    super(...arguments);
+    n(this, "_leading");
+    n(this, "_title");
+    n(this, "_subtitle");
+    n(this, "_trailing");
+    n(this, "_chevron", !1);
+    n(this, "_divider", !1);
+    n(this, "_dividerColor");
+    n(this, "_onPress");
+    n(this, "_href");
+    n(this, "_disabled", !1);
+    n(this, "_dense", !1);
+  }
+  leading(t) {
+    return this._leading = U(this, t), this;
+  }
+  icon(t) {
+    return this.leading(t);
+  }
+  title(t) {
+    return this._title = U(this, t), this;
+  }
+  subtitle(t) {
+    return this._subtitle = U(this, t), this;
+  }
+  trailing(t) {
+    return this._trailing = U(this, t), this;
+  }
+  chevron(t = !0) {
+    return this._chevron = t, this;
+  }
+  divider(t = !0, i) {
+    return this._divider = t, i && (this._dividerColor = i), this;
+  }
+  onPress(t) {
+    return this._onPress = t, this;
+  }
+  /** Flutter-style alias of `.onPress()`. */
+  onTap(t) {
+    return this.onPress(t);
+  }
+  href(t) {
+    return this._href = t, this;
+  }
+  disabled(t = !0) {
+    return this._disabled = t, this;
+  }
+  dense(t = !0) {
+    return this._dense = t, this;
+  }
+  build() {
+    const {
+      leading: t,
+      trailing: i,
+      title: o,
+      subtitle: l,
+      onPress: a,
+      onTap: c,
+      href: f,
+      disabled: g,
+      dense: S,
+      ...p
+    } = this._props, h = this._title !== void 0 ? this._title : o, u = this._subtitle !== void 0 ? this._subtitle : l, _ = this._leading !== void 0 ? this._leading : t, d = this._trailing !== void 0 ? this._trailing : i;
+    return typeof h == "string" && H(this, h), typeof u == "string" && H(this, u), typeof _ == "string" && H(this, _), typeof d == "string" && H(this, d), s.createElement(Wt, {
+      ...p,
+      leading: typeof _ == "string" ? V(_) : _,
+      title: typeof h == "string" ? V(h) : h,
+      subtitle: typeof u == "string" ? V(u) : u,
+      trailing: typeof d == "string" ? V(d) : d,
+      chevron: this._chevron,
+      divider: this._divider,
+      dividerColor: this._dividerColor,
+      onPress: this._onPress ?? a ?? c,
+      href: this._href ?? f,
+      disabled: this._disabled || !!g,
+      dense: this._dense || !!S,
+      className: this.getClassName(),
+      style: this.getStyle()
+    });
+  }
+}
+const je = A(Dt);
+function Ht(e, r) {
+  if (!(typeof r != "string" || !C(r)))
+    for (const t of K(r))
+      e.bindSignal(t);
+}
+function Mt(e) {
+  return typeof e != "string" ? e : C(e) ? P(e) : e;
+}
+function Kt(e) {
+  return e != null && typeof e == "object" && !Array.isArray(e) && typeof e.subscribe == "function" && "value" in e;
+}
+function Ot(e, r) {
+  if (e != null && typeof e == "object") {
+    const t = e;
+    if (t._id != null && t._id !== "") return t._id;
+    if (t.id != null && t.id !== "") return t.id;
+    if (t.key != null && t.key !== "") return t.key;
+  }
+  return r;
+}
+function Vt(e, r) {
+  return typeof r.render == "function" ? r.render(e) : e == null || typeof e != "object" || r.accessor == null || r.accessor === "" ? null : e[r.accessor];
+}
+function qt(e) {
+  return typeof e == "string" && C(e) ? s.createElement(nt, {
+    as: "span",
+    compute: () => P(e)
+  }) : it(e);
+}
+function ut(e, r) {
+  return e.sortable === !1 ? !1 : e.sortable === !0 ? !0 : r;
+}
+function dt(e, r) {
+  if (e != null && typeof e == "object" && r.accessor != null && r.accessor !== "") {
+    const i = e[r.accessor];
+    if (i == null || typeof i == "string" || typeof i == "number" || typeof i == "boolean")
+      return i ?? null;
+  }
+  if (typeof r.render != "function") return null;
+  const t = r.render(e);
+  return t == null || typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? t ?? null : null;
+}
+function Ut(e, r) {
+  return e == null && r == null ? 0 : e == null ? 1 : r == null ? -1 : typeof e == "number" && typeof r == "number" ? e - r : typeof e == "boolean" && typeof r == "boolean" ? Number(e) - Number(r) : String(e).localeCompare(String(r), void 0, { numeric: !0, sensitivity: "base" });
+}
+function ht(e, r) {
+  return !e || e.index !== r ? { index: r, dir: "ascending" } : { index: r, dir: e.dir === "ascending" ? "descending" : "ascending" };
+}
+const Yt = s.memo((e) => {
+  const {
+    data: r,
+    columns: t,
+    variant: i,
+    density: o,
+    striped: l,
+    width: a,
+    sortable: c,
+    className: f,
+    style: g,
+    children: S,
+    ...p
+  } = e, h = !!c, [u, _] = s.useState(null), d = {
+    width: "100%",
+    borderCollapse: "separate",
+    borderSpacing: "0",
+    ...g
+  };
+  a && (d.width = typeof a == "number" ? `${a}px` : a);
+  const k = i === "clean" ? ["bg-white", "rounded-2xl", "border", "border-gray-100", "overflow-hidden", "shadow-sm"] : [], v = {
+    compact: "10px 16px",
+    standard: "16px 24px",
+    relaxed: "24px 32px"
+  }[o], E = Array.isArray(r) ? r : [], b = s.useMemo(() => {
+    if (!u) return E;
+    const m = t == null ? void 0 : t[u.index];
+    if (!m || !ut(m, h)) return E;
+    const N = u.dir === "ascending" ? 1 : -1;
+    return E.map((y, w) => ({ row: y, index: w })).sort((y, w) => {
+      const R = Ut(dt(y.row, m), dt(w.row, m));
+      return R === 0 ? y.index - w.index : N * R;
+    }).map((y) => y.row);
+  }, [E, t, u, h]);
+  return B().className(f).classNames(k).props(p).children(
+    s.createElement("table", {
+      style: d,
+      className: ["fibo-table", f].filter(Boolean).join(" ")
+    }, [
+      s.createElement(
+        "thead",
+        { key: "thead", className: "bg-gray-50/50" },
+        s.createElement(
+          "tr",
+          {},
+          t.map((m, N) => {
+            const y = ut(m, h);
+            return s.createElement("th", {
+              key: String(m.accessor ?? N),
+              scope: "col",
+              style: {
+                textAlign: m.align || "left",
+                padding: v,
+                width: m.width,
+                cursor: y ? "pointer" : void 0
+              },
+              className: "text-xs font-bold text-gray-400 uppercase tracking-widest",
+              "aria-sort": y ? (u == null ? void 0 : u.index) === N ? u.dir : "none" : void 0,
+              tabIndex: y ? 0 : void 0,
+              onClick: y ? () => _((w) => ht(w, N)) : void 0,
+              onKeyDown: y ? (w) => {
+                w.key !== "Enter" && w.key !== " " || (w.preventDefault(), _((R) => ht(R, N)));
+              } : void 0
+            }, Mt(m.header) ?? m.header);
+          })
+        )
+      ),
+      s.createElement(
+        "tbody",
+        { key: "tbody" },
+        b.map(
+          (m, N) => s.createElement(
+            "tr",
+            {
+              key: Ot(m, N),
+              className: `group transition-all duration-200 border-b border-gray-50 last:border-b-0 ${l && N % 2 !== 0 ? "bg-gray-50/30" : "bg-transparent"} ${i === "clean" ? "hover:bg-white hover:shadow-md hover:scale-[1.002] hover:z-10 relative" : "hover:bg-gray-50/50"}`
+            },
+            t.map(
+              (y, w) => s.createElement(
+                "td",
+                {
+                  key: w,
+                  style: {
+                    textAlign: y.align || "left",
+                    padding: v,
+                    borderTop: i === "default" ? "1px solid #F3F4F6" : "none"
+                  },
+                  className: "text-sm text-gray-900 font-medium"
+                },
+                qt(Vt(m, y))
+              )
+            )
+          )
+        )
+      )
+    ])
+  ).build();
+});
+class Xt extends T {
+  constructor() {
+    super(...arguments);
+    n(this, "_data", []);
+    /** Live source (`listSignal` / `signal`). Read on each rebuild. */
+    n(this, "_source");
+    n(this, "_columns", []);
+    n(this, "_variant", "clean");
+    n(this, "_density", "standard");
+    n(this, "_striped", !1);
+    n(this, "_width");
+    n(this, "_sortable", !1);
+  }
+  data(t) {
+    return Kt(t) ? (this._source = t, this.bindSignal(t), this) : (this._source = void 0, this._data = t, this);
+  }
+  columns(t) {
+    this._columns = t;
+    for (const i of t) Ht(this, i.header);
+    return this;
+  }
+  variant(t) {
+    return this._variant = t, this;
+  }
+  density(t) {
+    return this._density = t, this;
+  }
+  striped(t = !0) {
+    return this._striped = t, this;
+  }
+  width(t) {
+    return this._width = t, this;
+  }
+  /** Header clicks sort that column ascending, then descending (`aria-sort`). */
+  sortable(t = !0) {
+    return this._sortable = t, this;
+  }
+  build() {
+    const t = {
+      data: this._source ? this._source.value : this._data,
+      columns: this._columns,
+      variant: this._variant,
+      density: this._density,
+      striped: this._striped,
+      width: this._width,
+      sortable: this._sortable,
+      className: this.getClassName(),
+      style: this.getStyle(),
+      ...this._props
+    };
+    return s.createElement(Yt, t);
+  }
+}
+const ze = A(Xt);
+function ft(e, r) {
+  if (!(typeof r != "string" || !C(r)))
+    for (const t of K(r))
+      e.bindSignal(t);
+}
+function Jt(e) {
+  return typeof e != "string" ? e : C(e) ? P(e) : e;
+}
+function Qt(e) {
+  return e != null && typeof e == "object" && !Array.isArray(e) && typeof e.subscribe == "function" && "value" in e;
+}
+function Zt(e, r) {
+  if (e != null && typeof e == "object") {
+    const t = e;
+    if (t._id != null && t._id !== "") return t._id;
+    if (t.id != null && t.id !== "") return t.id;
+    if (t.key != null && t.key !== "") return t.key;
+  }
+  return r;
+}
+function te(e) {
+  const r = e.title;
+  return typeof r == "string" ? r : "";
+}
+function ee(e, r, t) {
+  let i = Zt(e, r);
+  const o = String(i);
+  return t.has(o) && (i = `${o}::${r}`), t.add(String(i)), i;
+}
+const re = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function se(e, r) {
+  if (C(e))
+    return s.createElement(
+      "button",
+      {
+        key: "rm",
+        type: "button",
+        className: "relative shrink-0 opacity-80 text-sm leading-none",
+        onClick: r
+      },
+      s.createElement(nt, {
+        key: "lbl",
+        as: "span",
+        style: re,
+        compute: () => `Remove ${P(e) || "tag"}`
+      }),
+      s.createElement("span", { key: "x", "aria-hidden": !0 }, "×")
+    );
+  const t = e || "tag";
+  return s.createElement(
+    "button",
+    {
+      key: "rm",
+      type: "button",
+      className: "relative shrink-0 opacity-80 text-sm leading-none",
+      "aria-label": `Remove ${t}`,
+      onClick: r
+    },
+    "×"
+  );
+}
+const ie = s.memo((e) => {
+  const { items: r, className: t, style: i, onRemove: o, ...l } = e, a = typeof o == "function", c = /* @__PURE__ */ new Set(), f = (Array.isArray(r) ? r : []).flatMap((g, S) => {
+    if (g == null || typeof g != "object") return [];
+    const p = te(g), h = ee(g, S, c), u = a ? se(p, (d) => {
+      d.stopPropagation(), o(g, S);
+    }) : null;
+    if (C(p)) {
+      const d = s.createElement(nt, {
+        key: a ? "t" : h,
+        as: "span",
+        className: a ? void 0 : "fibo-tag",
+        compute: () => P(p)
+      });
+      return a ? [
+        s.createElement("span", { key: h, className: "fibo-tag" }, d, u)
+      ] : [d];
+    }
+    const _ = Jt(p) ?? p;
+    return a ? [
+      s.createElement("span", { key: h, className: "fibo-tag" }, _, u)
+    ] : [
+      s.createElement("span", { key: h, className: "fibo-tag" }, _)
+    ];
+  });
+  return s.createElement(
+    "div",
+    {
+      className: t,
+      style: i,
+      ...l
+    },
+    ...f
+  );
+});
+class ne extends T {
+  constructor(t = []) {
+    super();
+    n(this, "_items", []);
+    /** Live source (`listSignal` / `signal`). Read on each rebuild. */
+    n(this, "_source");
+    this.items(t);
+  }
+  items(t) {
+    if (Qt(t)) {
+      this._source = t, this.bindSignal(t);
+      for (const i of Array.isArray(t.value) ? t.value : [])
+        ft(this, i == null ? void 0 : i.title);
+      return this;
+    }
+    this._source = void 0, this._items = Array.isArray(t) ? t : [];
+    for (const i of this._items) ft(this, i == null ? void 0 : i.title);
+    return this;
+  }
+  build() {
+    const t = ["fibo-tags", "flex", "gap-2", "flex-wrap", ...this._classNames].filter(Boolean).join(" "), {
+      className: i,
+      style: o,
+      items: l,
+      ...a
+    } = this._props ?? {}, c = typeof i == "string" ? i : "", f = {
+      ...a,
+      items: this._source ? this._source.value : this._items,
+      className: [t, c].filter(Boolean).join(" "),
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "0.5rem",
+        minWidth: 0,
+        ...this.getStyle(),
+        ...o && typeof o == "object" ? o : null
+      }
+    };
+    return s.createElement(ie, f);
+  }
+}
+const Ge = A(ne);
+function et(e, r) {
+  if (!(typeof r != "string" || !C(r)))
+    for (const t of K(r))
+      e.bindSignal(t);
+}
+function pt(e) {
+  return typeof e != "string" ? e : C(e) ? P(e) : e;
+}
+function rt(e, r) {
+  if (typeof r == "function") {
+    try {
+      rt(e, r());
+    } catch {
+    }
+    return;
+  }
+  if (typeof r == "string") {
+    et(e, r);
+    return;
+  }
+  if (Array.isArray(r))
+    for (const t of r) rt(e, t);
+}
+function oe(e) {
+  return typeof e == "string" && C(e) ? P(e) : e;
+}
+function mt(e) {
+  return e === "success" || e === "warning" || e === "error" || e === "info";
+}
+function ae(e, r) {
+  return mt(r) ? r : mt(e) ? e : "info";
+}
+function gt(e) {
+  return e == null || e === !1 ? [] : Array.isArray(e) ? e : [e];
+}
+const le = s.memo((e) => {
+  const {
+    status: r,
+    intent: t,
+    title: i,
+    subtitle: o,
+    className: l,
+    style: a,
+    onClose: c,
+    action: f,
+    children: g,
+    ...S
+  } = e, p = ae(r, t), h = p === "error" || p === "warning", u = typeof c == "function", _ = [i, o].filter(Boolean).join(". "), d = ["fibo-banner", `fibo-banner-${p}`, l].filter(Boolean).join(" ").replace(/\s+/g, " ").trim(), k = s.createElement(
+    "div",
+    { key: "copy", className: "flex flex-col gap-1 min-w-0 flex-1" },
+    i && s.createElement(
+      "h4",
+      {
+        className: "font-semibold text-sm uppercase tracking-wide opacity-90"
+      },
+      i
+    ),
+    o && s.createElement(
+      "p",
+      {
+        className: "opacity-80 text-sm"
+      },
+      o
+    )
+  ), $ = [...gt(f), ...gt(g)].filter(
+    (b) => b != null && b !== !1
+  ), v = [];
+  $.length > 0 && v.push(
+    s.createElement(
+      "div",
+      { key: "actions", className: "flex items-center gap-2 shrink-0" },
+      $
+    )
+  ), u && v.push(
+    s.createElement(
+      "button",
+      {
+        key: "dismiss",
+        type: "button",
+        className: "shrink-0 opacity-80 text-sm leading-none",
+        "aria-label": "Dismiss",
+        onClick: (b) => {
+          b.stopPropagation(), c();
+        }
+      },
+      "×"
+    )
+  );
+  const E = v.length > 0 ? s.createElement("div", { className: "flex items-start gap-2" }, [k, ...v]) : k;
+  return s.createElement(
+    "div",
+    {
+      ...S,
+      className: d,
+      style: a,
+      role: h ? "alert" : "status",
+      "aria-live": h ? "assertive" : "polite",
+      "aria-atomic": !0,
+      "aria-label": S["aria-label"] || _ || void 0
+    },
+    E
+  );
+});
+class ce extends T {
+  constructor(t = "") {
+    super();
+    n(this, "_status", "info");
+    n(this, "_title", "");
+    n(this, "_subtitle");
+    this.title(t);
+  }
+  status(t) {
+    return this._status = t, this;
+  }
+  /** Docs alias: `.status()` is the Banner intent. */
+  intent(t) {
+    return this.status(t);
+  }
+  title(t) {
+    return this._title = t, et(this, t), this;
+  }
+  subtitle(t) {
+    return this._subtitle = t, et(this, t), this;
+  }
+  children(t) {
+    return rt(this, t), super.children(t);
+  }
+  build() {
+    const t = {
+      status: this._status,
+      title: pt(this._title),
+      subtitle: pt(this._subtitle),
+      className: this.getClassName(),
+      style: this.getStyle(),
+      children: this.processChildren().map(oe),
+      ...this._props
+    };
+    return s.createElement(le, t);
+  }
+}
+const Fe = A(ce), ue = {
+  none: "0px",
+  sm: "8px",
+  md: "16px",
+  lg: "24px",
+  xl: "32px"
+};
+function st(e) {
+  return `repeat(${e}, minmax(0, 1fr))`;
+}
+function de(e) {
+  return `repeat(${e}, minmax(0, auto))`;
+}
+function he(e, r) {
+  return r || st(typeof e == "number" ? e : 1);
+}
+function fe(e, r) {
+  if (r) return r;
+  if (typeof e == "number") return de(e);
+}
+function M(e) {
+  return typeof e == "number" ? `${e}px` : ue[e] ?? (e || "16px");
+}
+function pe(e, r, t) {
+  return r == null && t == null ? { gap: e } : {
+    ...r != null ? { rowGap: M(r) } : { rowGap: e },
+    ...t != null ? { columnGap: M(t) } : { columnGap: e }
+  };
+}
+function _t(e) {
+  return e == null || e === !1 ? [] : Array.isArray(e) ? e : [e];
+}
+function tt(e, r) {
+  if (typeof e == "number") return [];
+  const t = Bt.getInstance(), i = ["sm", "md", "lg", "xl"], o = [];
+  for (const l of i) {
+    const a = e[l];
+    if (!a) continue;
+    const c = At(l);
+    r === "masonry" ? o.push(t.registerMedia(c, "column-count", String(a))) : o.push(t.registerMedia(c, "grid-template-columns", st(a)));
+  }
+  return o;
+}
+function me(e) {
+  if (!s.isValidElement(e)) return !1;
+  const r = e.props;
+  return !!(r && typeof r == "object" && (r.colSpan || r.rowSpan || r.colStart != null || r.colEnd != null || r.rowStart != null || r.rowEnd != null || typeof r.className == "string" && /(col|row)-span/.test(r.className)));
+}
+const ge = s.memo((e) => {
+  const {
+    children: r,
+    variant: t = "standard",
+    columns: i = 1,
+    gap: o = "md",
+    rows: l,
+    templateColumns: a,
+    templateRows: c,
+    autoFlow: f,
+    rowGap: g,
+    columnGap: S,
+    className: p,
+    style: h,
+    ...u
+  } = e, _ = _t(r), d = M(o), k = pe(d, g, S), $ = he(i, a), v = fe(l, c);
+  if (t === "bento") {
+    const b = [
+      { col: 2, row: 2 },
+      { col: 1, row: 1 },
+      { col: 1, row: 1 },
+      { col: 1, row: 2 },
+      { col: 2, row: 1 }
+    ], m = {
+      display: "grid",
+      gridTemplateColumns: $,
+      ...v ? { gridTemplateRows: v } : {},
+      ...k,
+      gridAutoFlow: f ?? "dense",
+      ...h
+    };
+    return s.createElement("div", {
+      className: ["fibo-grid", "grid", ...tt(i, "grid"), p].filter(Boolean).join(" "),
+      style: m,
+      ...u
+    }, s.Children.map(_, (N, y) => {
+      if (me(N))
+        return N;
+      const w = b[y % b.length];
+      return s.createElement("div", {
+        key: lt(N, y),
+        style: { gridColumn: `span ${w.col}`, gridRow: `span ${w.row}` }
+      }, N);
+    }));
+  }
+  if (t === "masonry") {
+    const b = S != null ? M(S) : d, m = g != null ? M(g) : d, N = {
+      columnCount: typeof i == "number" ? i : 1,
+      columnGap: b,
+      ...h
+    };
+    return s.createElement("div", {
+      className: ["fibo-grid", ...tt(i, "masonry"), p].filter(Boolean).join(" "),
+      style: N,
+      ...u
+    }, s.Children.map(
+      _,
+      (y, w) => s.createElement("div", {
+        key: lt(y, w),
+        style: { breakInside: "avoid", marginBottom: m }
+      }, y)
+    ));
+  }
+  const E = {
+    display: "grid",
+    gridTemplateColumns: $,
+    ...v ? { gridTemplateRows: v } : {},
+    ...f ? { gridAutoFlow: f } : {},
+    ...k,
+    ...h
+  };
+  return s.createElement("div", {
+    className: ["fibo-grid", "grid", ...tt(i, "grid"), p].filter(Boolean).join(" "),
+    style: E,
+    ...u
+  }, ..._);
+}), be = s.memo((e) => {
+  const {
+    children: r,
+    colSpan: t,
+    rowSpan: i,
+    colStart: o,
+    colEnd: l,
+    rowStart: a,
+    rowEnd: c,
+    className: f,
+    style: g,
+    ...S
+  } = e, p = _t(r), h = [
+    t ? `col-span-${t}` : "",
+    i ? `row-span-${i}` : ""
+  ].filter(Boolean).join(" "), u = {
+    ...t ? { gridColumn: `span ${t}` } : {},
+    ...i ? { gridRow: `span ${i}` } : {},
+    ...o != null ? { gridColumnStart: o } : {},
+    ...l != null ? { gridColumnEnd: l } : {},
+    ...a != null ? { gridRowStart: a } : {},
+    ...c != null ? { gridRowEnd: c } : {},
+    ...g
+  };
+  return s.createElement("div", {
+    className: ["fibo-grid-item", h, f].filter(Boolean).join(" "),
+    style: u,
+    ...S
+  }, ...p);
+});
+class ye extends T {
+  constructor() {
+    super(...arguments);
+    n(this, "_variant", "standard");
+    n(this, "_columns", 1);
+    n(this, "_gap", "md");
+    n(this, "_rowGap");
+    n(this, "_columnGap");
+    n(this, "_rows");
+    n(this, "_templateColumns");
+    n(this, "_templateRows");
+    n(this, "_autoFlow");
+  }
+  variant(t) {
+    return this._variant = t, this;
+  }
+  columns(t) {
+    return this._columns = t, this;
+  }
+  rows(t) {
+    return this._rows = t, this;
+  }
+  gap(t) {
+    return this._gap = t, this;
+  }
+  rowGap(t) {
+    return this._rowGap = t, this;
+  }
+  columnGap(t) {
+    return this._columnGap = t, this;
+  }
+  templateColumns(t) {
+    return this._templateColumns = t, this;
+  }
+  /** CSS name — same as `.templateColumns()`, wins over numeric `.columns()`. */
+  gridTemplateColumns(t) {
+    return this.templateColumns(t);
+  }
+  templateRows(t) {
+    return this._templateRows = t, this;
+  }
+  autoFlow(t) {
+    return this._autoFlow = t, this;
+  }
+  build() {
+    const t = {
+      variant: this._variant,
+      columns: this._columns,
+      gap: this._gap,
+      rowGap: this._rowGap,
+      columnGap: this._columnGap,
+      rows: this._rows,
+      templateColumns: this._templateColumns,
+      templateRows: this._templateRows,
+      autoFlow: this._autoFlow,
+      children: this.processChildren(),
+      className: this.getClassName(),
+      style: this.getStyle(),
+      ...this._props
+    };
+    return s.createElement(ge, t);
+  }
+}
+class _e extends T {
+  constructor() {
+    super(...arguments);
+    n(this, "_colSpan");
+    n(this, "_rowSpan");
+    n(this, "_colStart");
+    n(this, "_colEnd");
+    n(this, "_rowStart");
+    n(this, "_rowEnd");
+  }
+  colSpan(t) {
+    return this._colSpan = t, this;
+  }
+  rowSpan(t) {
+    return this._rowSpan = t, this;
+  }
+  colStart(t) {
+    return this._colStart = t, this;
+  }
+  colEnd(t) {
+    return this._colEnd = t, this;
+  }
+  rowStart(t) {
+    return this._rowStart = t, this;
+  }
+  rowEnd(t) {
+    return this._rowEnd = t, this;
+  }
+  build() {
+    const t = {
+      colSpan: this._colSpan,
+      rowSpan: this._rowSpan,
+      colStart: this._colStart,
+      colEnd: this._colEnd,
+      rowStart: this._rowStart,
+      rowEnd: this._rowEnd,
+      children: this.processChildren(),
+      className: this.getClassName(),
+      style: this.getStyle(),
+      ...this._props
+    };
+    return s.createElement(be, t);
+  }
+}
+const Le = A(ye), We = A(_e), we = s.memo((e) => {
+  const { image: r, title: t, price: i, likes: o, timeLeft: l, className: a, style: c, ...f } = e;
+  return J().classNames(["group", "transition-all", "duration-300", "hover:-translate-y-1"]).style({
+    width: "100%",
+    borderRadius: "24px",
+    border: "none",
+    boxShadow: "0 10px 40px -10px rgba(0,0,0,0.05)",
+    padding: "16px",
+    background: "#fff",
+    ...c
+  }).className(a).props(f).children([
+    B().classNames(["relative", "aspect-square", "overflow-hidden", "rounded-[20px]"]).children([
+      ot().src(r).alt(t || "").classNames(["w-full", "h-full", "object-cover", "bg-gray-200"]).build(),
+      B().classNames(["absolute", "top-3", "right-3"]).children(
+        Z().variant("glass").shape("pill").icon(B().classNames(["text-gray-400", "hover:text-red-500"]).children(L.Heart).build()).text(`${o}`).build()
+      ).build()
+    ]).build(),
+    D().height(16).build(),
+    W().justifyContent("between").alignItems("start").children([
+      F().gap(4).children([
+        x(t).fontWeight(700).fontSize(18).color("#111827").build(),
+        Z().variant("neutral").text("Not for sale x1").build()
+      ]).build(),
+      B().classNames(["text-gray-300"]).children(L.More).build()
+    ]).build(),
+    D().height(16).build(),
+    W().justifyContent("between").alignItems("center").children([
+      F().gap(4).children([
+        x("Current Bid").fontSize(11).fontWeight(600).color("#6B7280").build(),
+        W().gap(4).alignItems("center").children([
+          B().classNames(["text-blue-500"]).children(L.Eth).build(),
+          x(`${i} ETH`).fontSize(15).fontWeight(700).color("#111827").build()
+        ]).build()
+      ]).build(),
+      yt("Place a bid").variant("filled").shape("pill").shadow("soft").style({
+        backgroundColor: "#111827",
+        color: "#fff",
+        padding: "10px 20px",
+        fontSize: "13px",
+        fontWeight: 600
+      }).build()
+    ]).build(),
+    D().height(12).build(),
+    l ? Z().variant("accent").shape("rounded").icon(B().children(L.Clock).build()).text(l).style({ width: "100%" }).build() : null
+  ]).build();
+});
+class ve extends T {
+  constructor() {
+    super(...arguments);
+    n(this, "_image", "");
+    n(this, "_title", "");
+    n(this, "_price", "");
+    n(this, "_likes", "");
+    n(this, "_timeLeft");
+  }
+  image(t) {
+    return this._image = t, this;
+  }
+  title(t) {
+    return this._title = t, this;
+  }
+  price(t) {
+    return this._price = t, this;
+  }
+  likes(t) {
+    return this._likes = t, this;
+  }
+  timeLeft(t) {
+    return this._timeLeft = t, this;
+  }
+  build() {
+    const t = {
+      ...this._props,
+      image: this._image,
+      title: this._title,
+      price: this._price,
+      likes: this._likes,
+      timeLeft: this._timeLeft,
+      className: this.getClassName(),
+      style: this.getStyle()
+    };
+    return s.createElement(we, t);
+  }
+}
+const De = A(ve);
+function Se(e) {
+  if (typeof e != "string") return "";
+  const r = e.trim();
+  return !r || bt(r) ? "" : r;
+}
+const Ne = s.memo((e) => {
+  const { banner: r, avatar: t, name: i, handle: o, stats: l, className: a, style: c, ...f } = e, g = Se(r);
+  return J().style({
+    width: "100%",
+    borderRadius: "24px",
+    border: "none",
+    boxShadow: "0 10px 40px -10px rgba(0,0,0,0.05)",
+    padding: "0",
+    overflow: "hidden",
+    background: "#fff",
+    ...c
+  }).className(a).props(f).children([
+    B().style({
+      height: "100px",
+      backgroundImage: g ? `url(${JSON.stringify(g)})` : void 0,
+      backgroundSize: "cover",
+      backgroundPosition: "center"
+    }).build(),
+    F().padding(20).alignItems("center").style({ marginTop: "-50px" }).children([
+      Tt().image(t).size(80).border("4px solid #fff").build(),
+      D().height(12).build(),
+      W().gap(6).alignItems("center").children([
+        x(i).fontWeight(700).fontSize(18).color("#111827").build(),
+        L.Verify
+      ]).build(),
+      x(o).fontSize(13).color("#6B7280").style({ marginTop: "4px" }).build(),
+      D().height(16).build(),
+      yt("+ Follow").variant("filled").shape("pill").shadow("soft").style({
+        backgroundColor: "#3B82F6",
+        color: "#fff",
+        padding: "8px 24px",
+        fontSize: "13px",
+        fontWeight: 600
+      }).build(),
+      D().height(24).build(),
+      W().classNames(["w-full", "border-t", "border-gray-100", "pt-4"]).justifyContent("between").children([
+        F().alignItems("center").gap(4).children([
+          x(l.items).fontWeight(700).fontSize(14).build(),
+          x("Items").fontSize(11).color("#9CA3AF").build()
+        ]).build(),
+        F().alignItems("center").gap(4).children([
+          x(l.owners).fontWeight(700).fontSize(14).build(),
+          x("Owners").fontSize(11).color("#9CA3AF").build()
+        ]).build(),
+        F().alignItems("center").gap(4).children([
+          W().alignItems("center").gap(2).children([
+            B().width(8).children(L.Eth).build(),
+            x(l.floor).fontWeight(700).fontSize(14).build()
+          ]).build(),
+          x("Floor").fontSize(11).color("#9CA3AF").build()
+        ]).build()
+      ]).build()
+    ]).build()
+  ]).build();
+});
+class xe extends T {
+  constructor() {
+    super(...arguments);
+    n(this, "_banner", "");
+    n(this, "_avatar", "");
+    n(this, "_name", "");
+    n(this, "_handle", "");
+    n(this, "_stats", { items: "0", owners: "0", floor: "0" });
+  }
+  banner(t) {
+    return this._banner = t, this;
+  }
+  avatar(t) {
+    return this._avatar = t, this;
+  }
+  name(t) {
+    return this._name = t, this;
+  }
+  handle(t) {
+    return this._handle = t, this;
+  }
+  stats(t) {
+    return this._stats = t, this;
+  }
+  build() {
+    const t = {
+      ...this._props,
+      banner: this._banner,
+      avatar: this._avatar,
+      name: this._name,
+      handle: this._handle,
+      stats: this._stats,
+      className: this.getClassName(),
+      style: this.getStyle()
+    };
+    return s.createElement(Ne, t);
+  }
+}
+const He = A(xe), Ce = s.memo((e) => {
+  const { image: r, title: t, author: i, items: o, className: l, style: a, ...c } = e;
+  return J().classNames(["group", "cursor-pointer"]).style({
+    width: "100%",
+    borderRadius: "24px",
+    height: "320px",
+    position: "relative",
+    overflow: "hidden",
+    border: "none",
+    ...a
+  }).className(l).props(c).children([
+    ot().src(r).alt(t || "").classNames(["absolute", "inset-0", "w-full", "h-full", "object-cover", "transition-transform", "duration-500"]).style({ position: "absolute", inset: 0, width: "100%", height: "100%" }).build(),
+    B().classNames(["absolute", "inset-0", "bg-gradient-to-t", "from-black/80", "via-black/20", "to-transparent"]).build(),
+    F().classNames(["absolute", "bottom-0", "left-0", "p-6"]).gap(4).children([
+      x(o).color("white").fontSize(12).classNames(["opacity-90", "mb-1", "uppercase", "tracking-wider"]).fontWeight(600).build(),
+      x(t).color("white").fontSize(22).fontWeight(700).build(),
+      W().gap(6).alignItems("center").children([
+        x("Created by").color("white").fontSize(13).classNames(["opacity-80"]).build(),
+        x(i).color("white").fontSize(13).fontWeight(600).build(),
+        L.Verify
+      ]).build()
+    ]).build()
+  ]).build();
+});
+class Ee extends T {
+  constructor() {
+    super(...arguments);
+    n(this, "_image", "");
+    n(this, "_title", "");
+    n(this, "_author", "");
+    n(this, "_items", "");
+  }
+  image(t) {
+    return this._image = t, this;
+  }
+  title(t) {
+    return this._title = t, this;
+  }
+  author(t) {
+    return this._author = t, this;
+  }
+  items(t) {
+    return this._items = t, this;
+  }
+  build() {
+    const t = {
+      ...this._props,
+      image: this._image,
+      title: this._title,
+      author: this._author,
+      items: this._items,
+      className: this.getClassName(),
+      style: this.getStyle()
+    };
+    return s.createElement(Ce, t);
+  }
+}
+const Me = A(Ee), ke = s.memo((e) => {
+  const {
+    image: r,
+    title: t,
+    description: i,
+    date: o,
+    source: l,
+    className: a,
+    style: c,
+    ...f
+  } = e;
+  return J().className(`overflow-hidden hover:shadow-lg transition-shadow duration-300 ${a || ""}`).style(c).props(f).children([
+    r ? ot().src(r).alt(t || "").className("w-full object-cover rounded-[20px] mb-4").style({ height: "200px" }).build() : null,
+    B().className("flex flex-col gap-2").children([
+      t ? x(t).fontSize(18).fontWeight(700).color("#111827").lineHeight(1.25).build() : null,
+      i ? x(i).fontSize(14).color("#4B5563").lineHeight(1.5).className("line-clamp-2").build() : null,
+      l || o ? B().className("flex items-center gap-2 mt-2").children([
+        x(`${l || ""}${l && o ? " • " : ""}${o || ""}`).fontSize(11).fontWeight(600).color("#9CA3AF").textTransform("uppercase").letterSpacing("0.05em").build()
+      ]).build() : null
+    ]).build()
+  ]).build();
+});
+class Ie extends T {
+  constructor() {
+    super(...arguments);
+    n(this, "_image");
+    n(this, "_title");
+    n(this, "_description");
+    n(this, "_date");
+    n(this, "_source");
+  }
+  image(t) {
+    return this._image = t, this;
+  }
+  title(t) {
+    return this._title = t, this;
+  }
+  description(t) {
+    return this._description = t, this;
+  }
+  date(t) {
+    return this._date = t, this;
+  }
+  source(t) {
+    return this._source = t, this;
+  }
+  build() {
+    const t = {
+      ...this._props,
+      image: this._image,
+      title: this._title,
+      description: this._description,
+      date: this._date,
+      source: this._source,
+      className: this.getClassName(),
+      style: this.getStyle()
+    };
+    return s.createElement(ke, t);
+  }
+}
+const Ke = A(Ie);
+export {
+  De as A,
+  Fe as B,
+  J as C,
+  Le as G,
+  je as L,
+  He as P,
+  ze as T,
+  Ge as a,
+  We as b,
+  Me as c,
+  Ke as d
+};