fiboui 1.0.2 → 2.1.0

package/dist/index-C4xZywsh.js

@@ -0,0 +1,1024 @@
+"use client";
+var ae = Object.defineProperty;
+var le = (n, s, e) => s in n ? ae(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 q, useEffect as oe } from "react";
+import { h as w, F as I, l as T } from "./builder-6GkZlCaz.js";
+import { B as C } from "./index-BaX5zy8O.js";
+import { t as ce } from "./bundle-mjs-wppB-TKB.js";
+import { T as de } from "./index-zOfPHD00.js";
+const me = t.memo((n) => {
+  const { text: s, subtitle: e, number: r, color: d, className: p, style: o, children: u, ...g } = n;
+  return t.createElement(
+    "div",
+    {
+      className: `rounded-[24px] shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] transition-shadow duration-300 border-none p-4 ${p || ""}`,
+      style: { backgroundColor: "#ffffff", ...o },
+      ...g
+    },
+    t.createElement(
+      "div",
+      { className: "flex flex-col gap-2" },
+      s && t.createElement(
+        "h3",
+        {
+          className: "font-semibold text-[var(--fibo-on-surface-variant)] text-sm uppercase tracking-wide"
+        },
+        s
+      ),
+      r && t.createElement(
+        "p",
+        {
+          className: "font-bold text-[var(--fibo-on-surface)] text-3xl"
+        },
+        r
+      ),
+      e && t.createElement(
+        "p",
+        {
+          className: "text-[var(--fibo-on-surface-variant)] text-xs"
+        },
+        e
+      ),
+      ...u
+    )
+  );
+});
+class he extends I {
+  constructor() {
+    super(...arguments);
+    i(this, "_text", "");
+    i(this, "_subtitle");
+    i(this, "_number");
+    i(this, "_color");
+  }
+  text(e) {
+    return this._text = e, this;
+  }
+  subtitle(e) {
+    return this._subtitle = e, this;
+  }
+  number(e) {
+    return this._number = e, this;
+  }
+  color(e) {
+    return this._color = e, this;
+  }
+  build() {
+    const e = {
+      green: "border-l-green-500",
+      orange: "border-l-orange-500",
+      red: "border-l-red-500",
+      blue: "border-l-blue-500",
+      purple: "border-l-purple-500"
+    }, r = [
+      "fibo-card",
+      this._color ? `border-l-4 ${e[this._color]}` : "",
+      ...this._classNames
+    ].filter(Boolean).join(" "), d = {
+      text: this._text,
+      subtitle: this._subtitle,
+      number: this._number,
+      color: this._color,
+      className: r,
+      style: this.getStyle(),
+      children: this.processChildren(),
+      ...this._props
+    };
+    return t.createElement(me, d);
+  }
+}
+const je = w(he);
+class V {
+  constructor() {
+    i(this, "styles", /* @__PURE__ */ new Map());
+  }
+  bg(s) {
+    return this.styles.set("background-color", s), this;
+  }
+  color(s) {
+    return this.styles.set("color", s), this;
+  }
+  opacity(s) {
+    return this.styles.set("opacity", String(s)), this;
+  }
+  borderColor(s) {
+    return this.styles.set("border-color", s), this;
+  }
+  transform(s) {
+    return this.styles.set("transform", s), this;
+  }
+  scale(s) {
+    return this.styles.set("transform", `scale(${s})`), this;
+  }
+  translateX(s) {
+    const e = typeof s == "number" ? `${s}px` : s;
+    return this.styles.set("transform", `translateX(${e})`), this;
+  }
+  translateY(s) {
+    const e = typeof s == "number" ? `${s}px` : s;
+    return this.styles.set("transform", `translateY(${e})`), this;
+  }
+  shadow(s) {
+    return this.styles.set("box-shadow", s), this;
+  }
+  css(s, e) {
+    return this.styles.set(s, e), this;
+  }
+  toCSSString() {
+    const s = [];
+    return this.styles.forEach((e, r) => {
+      s.push(`${r}: ${e}`);
+    }), s.join("; ") + ";";
+  }
+}
+const ue = 100, J = 60, K = 5, pe = t.memo((n) => {
+  const {
+    items: s,
+    renderItem: e,
+    variant: r,
+    separator: d,
+    loading: p,
+    threshold: o,
+    onEndReached: u,
+    className: g,
+    style: x,
+    containerHeight: v = 500,
+    resetItemStyles: m = !1,
+    direction: a = "vertical",
+    customItemHover: c,
+    customItemActive: _,
+    customItemFocus: y
+  } = n, [H, Q] = D(0), [ee, te] = D(0), se = L(null), R = L(/* @__PURE__ */ new Map()), O = L(/* @__PURE__ */ new Map()), F = L(null), b = a === "horizontal", $ = s.length, B = $ > ue, A = (h) => O.current.get(h) ?? J, j = (h) => {
+    let l = 0;
+    for (let f = 0; f < h; f++)
+      l += A(f);
+    return l;
+  }, re = () => {
+    let h = 0;
+    for (let l = 0; l < $; l++)
+      h += A(l);
+    return h;
+  }, ie = (h) => {
+    let l = 0, f = $ - 1;
+    for (; l < f; ) {
+      const N = Math.floor((l + f) / 2);
+      j(N) < h ? l = N + 1 : f = N;
+    }
+    return Math.max(0, l - 1);
+  };
+  let S = 0, X = $, G = 0, M = 0;
+  if (B) {
+    S = Math.max(0, ie(H) - K);
+    let h = j(S), l = S;
+    for (; h < H + v + K * J && l < $; )
+      h += A(l), l++;
+    X = Math.min($, l), G = j(S), M = re();
+  }
+  const P = s.slice(S, X);
+  q(() => {
+    if (!B) return;
+    let h = !1;
+    P.forEach((l, f) => {
+      const N = S + f, k = R.current.get(N);
+      if (k) {
+        const Z = k.getBoundingClientRect(), z = b ? Z.width : Z.height;
+        z > 0 && O.current.get(N) !== z && (O.current.set(N, z), h = !0);
+      }
+    }), h && te((l) => l + 1);
+  }, [P, S, B, b, ee]), q(() => {
+    if (!u || p) return;
+    const h = new IntersectionObserver(
+      (l) => {
+        l[0].isIntersecting && (u == null || u());
+      },
+      { threshold: o }
+    );
+    return F.current && h.observe(F.current), () => h.disconnect();
+  }, [p, s.length, u, o]);
+  const ne = (h) => {
+    B && Q(b ? h.currentTarget.scrollLeft : h.currentTarget.scrollTop);
+  };
+  oe(() => {
+    if (typeof document > "u" || !c && !_ && !y) return;
+    const h = "fibo-list-custom-styles";
+    let l = document.getElementById(h);
+    l || (l = document.createElement("style"), l.id = h, document.head.appendChild(l));
+    let f = "";
+    return c && (f += `.fibo-list-item-custom-hover:hover { ${c} }
+`), _ && (f += `.fibo-list-item-custom-active:active { ${_} }
+`), y && (f += `.fibo-list-item-custom-focus:focus { ${y} }
+`), l.textContent = f, () => {
+    };
+  }, [c, _, y]);
+  const Y = {
+    default: { gap: "0px" },
+    card: { gap: "12px" },
+    floating: { gap: "8px" }
+  }, W = m ? {
+    default: {},
+    card: {},
+    floating: {}
+  } : {
+    default: {
+      padding: "12px 16px",
+      borderBottom: d ? "1px solid #F3F4F6" : "none",
+      backgroundColor: "transparent",
+      transition: "background-color 0.2s"
+    },
+    card: {
+      padding: "16px",
+      backgroundColor: "#fff",
+      borderRadius: "16px",
+      boxShadow: "0 2px 8px -2px rgba(0,0,0,0.05)",
+      border: "1px solid #F3F4F6",
+      transition: "transform 0.2s, box-shadow 0.2s"
+    },
+    floating: {
+      padding: "8px 12px",
+      borderRadius: "12px",
+      backgroundColor: "transparent",
+      transition: "background-color 0.2s"
+    }
+  }, E = [];
+  c && E.push("fibo-list-item-custom-hover"), _ && E.push("fibo-list-item-custom-active"), y && E.push("fibo-list-item-custom-focus");
+  const U = m ? {
+    default: [...E],
+    card: [...E],
+    floating: [...E]
+  } : {
+    default: ["hover:bg-gray-50", "first:rounded-t-xl", "last:rounded-b-xl", ...E],
+    card: ["hover:-translate-y-0.5", "hover:shadow-md", ...E],
+    floating: ["hover:bg-white", "hover:shadow-sm", ...E]
+  };
+  return B ? t.createElement(
+    "div",
+    {
+      ref: se,
+      className: `fibo-list fibo-list-virtualized ${g || ""}`,
+      style: {
+        height: b ? void 0 : `${v}px`,
+        width: b ? `${v}px` : void 0,
+        overflowY: b ? "hidden" : "auto",
+        overflowX: b ? "auto" : "hidden",
+        position: "relative",
+        display: "flex",
+        flexDirection: b ? "row" : "column",
+        ...Y[r],
+        ...x
+      },
+      onScroll: ne
+    },
+    t.createElement("div", {
+      style: {
+        height: b ? "1px" : `${M}px`,
+        width: b ? `${M}px` : "1px",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        visibility: "hidden",
+        pointerEvents: "none"
+      }
+    }),
+    t.createElement(
+      "div",
+      {
+        style: {
+          transform: b ? `translateX(${G}px)` : `translateY(${G}px)`,
+          width: b ? "auto" : "100%",
+          height: b ? "100%" : void 0,
+          display: b ? "flex" : void 0,
+          flexDirection: b ? "row" : void 0
+        }
+      },
+      P.map((h, l) => {
+        const f = S + l, N = e ? e(h, f) : null;
+        return t.cloneElement(
+          C().style(W[r]).classNames(U[r]).children(N).build(),
+          {
+            key: `item-${f}`,
+            ref: (k) => {
+              k ? R.current.set(f, k) : R.current.delete(f);
+            }
+          }
+        );
+      })
+    ),
+    u && t.createElement("div", {
+      ref: F,
+      className: "py-4 flex justify-center w-full"
+    }, p ? t.createElement("div", { className: "animate-spin rounded-full h-5 w-5 border-2 border-gray-300 border-b-blue-600" }) : t.createElement("div", { style: { height: "20px" } }))
+  ) : C().className(g).classNames(["flex", a === "horizontal" ? "flex-row" : "flex-col", "w-full"]).style({
+    ...Y[r],
+    ...x
+  }).children(
+    t.createElement(t.Fragment, {}, [
+      ...s.map(
+        (h, l) => t.cloneElement(
+          C().style(W[r]).classNames(U[r]).children(
+            e ? e(h, l) : null
+          ).build(),
+          { key: `item-${l}` }
+        )
+      ),
+      u && t.createElement("div", {
+        ref: F,
+        className: "py-4 flex justify-center w-full"
+      }, p ? t.createElement("div", { className: "animate-spin rounded-full h-5 w-5 border-2 border-gray-300 border-b-blue-600" }) : t.createElement("div", { style: { height: "20px" } }))
+    ])
+  ).build();
+});
+class fe extends I {
+  constructor() {
+    super(...arguments);
+    i(this, "_items", []);
+    i(this, "_renderItem");
+    i(this, "_variant", "default");
+    i(this, "_separator", !1);
+    i(this, "_onEndReached");
+    i(this, "_loading", !1);
+    i(this, "_threshold", 0.5);
+    i(this, "_containerHeight", 500);
+    i(this, "_resetItemStyles", !1);
+    i(this, "_direction", "vertical");
+    i(this, "_customItemHover");
+    i(this, "_customItemActive");
+    i(this, "_customItemFocus");
+  }
+  items(e) {
+    return this._items = e, this;
+  }
+  renderItem(e) {
+    return this._renderItem = e, this;
+  }
+  variant(e) {
+    return this._variant = e, this;
+  }
+  separator(e = !0) {
+    return this._separator = e, this;
+  }
+  onEndReached(e) {
+    return this._onEndReached = e, this;
+  }
+  loading(e) {
+    return this._loading = e, this;
+  }
+  threshold(e) {
+    return this._threshold = e, this;
+  }
+  containerHeight(e) {
+    return this._containerHeight = e, this;
+  }
+  resetItemStyles(e = !0) {
+    return this._resetItemStyles = e, this;
+  }
+  direction(e) {
+    return this._direction = e, this;
+  }
+  reset() {
+    return this._resetItemStyles = !0, this;
+  }
+  itemHover(e) {
+    if (typeof e == "function") {
+      const r = new V();
+      e(r), this._customItemHover = r.toCSSString();
+    } else
+      this._customItemHover = e;
+    return this;
+  }
+  itemActive(e) {
+    if (typeof e == "function") {
+      const r = new V();
+      e(r), this._customItemActive = r.toCSSString();
+    } else
+      this._customItemActive = e;
+    return this;
+  }
+  itemFocus(e) {
+    if (typeof e == "function") {
+      const r = new V();
+      e(r), this._customItemFocus = r.toCSSString();
+    } else
+      this._customItemFocus = e;
+    return this;
+  }
+  build() {
+    const e = {
+      items: this._items,
+      renderItem: this._renderItem,
+      variant: this._variant,
+      separator: this._separator,
+      loading: this._loading,
+      threshold: this._threshold,
+      onEndReached: this._onEndReached,
+      containerHeight: this._containerHeight,
+      resetItemStyles: this._resetItemStyles,
+      direction: this._direction,
+      customItemHover: this._customItemHover,
+      customItemActive: this._customItemActive,
+      customItemFocus: this._customItemFocus,
+      className: this.getClassName(),
+      style: this.getStyle()
+    };
+    return t.createElement(pe, e);
+  }
+}
+const Ge = w(fe), ge = () => t.createElement(
+  "svg",
+  {
+    width: 12,
+    height: 12,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    "aria-hidden": !0
+  },
+  t.createElement("path", { d: "M9 5l7 7-7 7" })
+), _e = t.memo((n) => {
+  const {
+    leading: s,
+    title: e,
+    subtitle: r,
+    trailing: d,
+    chevron: p,
+    divider: o,
+    dividerColor: u,
+    onPress: g,
+    className: x,
+    style: v,
+    ...m
+  } = n, a = v || {}, c = a.padding ?? "14px 0", _ = typeof e == "string" ? t.createElement(
+    "span",
+    {
+      className: "fibo-list-tile-title",
+      style: { fontSize: 11, letterSpacing: "0.06em", lineHeight: 1.3, margin: 0 }
+    },
+    e
+  ) : e, y = typeof r == "string" ? t.createElement(
+    "span",
+    {
+      className: "fibo-list-tile-subtitle",
+      style: {
+        fontSize: 8,
+        letterSpacing: "0.06em",
+        lineHeight: 1.3,
+        margin: 0,
+        color: "#9a9a9a"
+      }
+    },
+    r
+  ) : r;
+  return t.createElement(
+    "div",
+    {
+      className: ce("fibo-list-tile flex flex-row items-center w-full", x),
+      style: {
+        padding: c,
+        borderBottom: o ? `1px solid ${u || "#3b3b3b"}` : "none",
+        cursor: g ? "pointer" : void 0,
+        ...a
+      },
+      onClick: g,
+      role: g ? "button" : void 0,
+      ...m
+    },
+    s ? t.createElement(
+      "div",
+      {
+        key: "leading",
+        className: "fibo-list-tile-leading shrink-0 flex items-center",
+        style: { color: "#9a9a9a", marginRight: 12 }
+      },
+      s
+    ) : null,
+    t.createElement(
+      "div",
+      {
+        key: "body",
+        className: "fibo-list-tile-body flex-1 min-w-0 flex flex-col justify-center"
+      },
+      _,
+      y
+    ),
+    d ? t.createElement(
+      "div",
+      {
+        key: "trailing",
+        className: "fibo-list-tile-trailing shrink-0 flex items-center",
+        style: { color: "#9a9a9a", marginLeft: 12 }
+      },
+      d
+    ) : null,
+    p ? t.createElement(
+      "div",
+      {
+        key: "chevron",
+        className: "fibo-list-tile-chevron shrink-0 flex items-center",
+        style: { color: "#9a9a9a", marginLeft: d ? 8 : 0 }
+      },
+      t.createElement(ge)
+    ) : null
+  );
+});
+class be extends I {
+  constructor() {
+    super(...arguments);
+    i(this, "_leading");
+    i(this, "_title");
+    i(this, "_subtitle");
+    i(this, "_trailing");
+    i(this, "_chevron", !1);
+    i(this, "_divider", !1);
+    i(this, "_dividerColor");
+    i(this, "_onPress");
+  }
+  leading(e) {
+    return this._leading = T(e), this;
+  }
+  icon(e) {
+    return this.leading(e);
+  }
+  title(e) {
+    return this._title = typeof e == "string" ? e : T(e), this;
+  }
+  subtitle(e) {
+    return this._subtitle = typeof e == "string" ? e : T(e), this;
+  }
+  trailing(e) {
+    return this._trailing = T(e), this;
+  }
+  chevron(e = !0) {
+    return this._chevron = e, this;
+  }
+  divider(e = !0, r) {
+    return this._divider = e, r && (this._dividerColor = r), this;
+  }
+  onPress(e) {
+    return this._onPress = e, this;
+  }
+  build() {
+    return t.createElement(_e, {
+      leading: this._leading,
+      title: this._title,
+      subtitle: this._subtitle,
+      trailing: this._trailing,
+      chevron: this._chevron,
+      divider: this._divider,
+      dividerColor: this._dividerColor,
+      onPress: this._onPress,
+      className: this.getClassName(),
+      style: this.getStyle(),
+      ...this._props
+    });
+  }
+}
+const Me = w(be), ye = t.memo((n) => {
+  const {
+    data: s,
+    columns: e,
+    variant: r,
+    density: d,
+    striped: p,
+    width: o,
+    className: u,
+    style: g
+  } = n, x = {
+    width: "100%",
+    borderCollapse: "separate",
+    borderSpacing: "0",
+    ...g
+  };
+  o && (x.width = typeof o == "number" ? `${o}px` : o);
+  const v = r === "clean" ? ["bg-white", "rounded-2xl", "border", "border-gray-100", "overflow-hidden", "shadow-sm"] : [], a = {
+    compact: "10px 16px",
+    standard: "16px 24px",
+    relaxed: "24px 32px"
+  }[d];
+  return C().className(u).classNames(v).children(
+    t.createElement("table", { style: x }, [
+      t.createElement(
+        "thead",
+        { key: "thead", className: "bg-gray-50/50" },
+        t.createElement(
+          "tr",
+          {},
+          e.map(
+            (c, _) => t.createElement("th", {
+              key: String(c.accessor ?? c.header ?? _),
+              scope: "col",
+              style: {
+                textAlign: c.align || "left",
+                padding: a,
+                width: c.width
+              },
+              className: "text-xs font-bold text-gray-400 uppercase tracking-widest"
+            }, c.header)
+          )
+        )
+      ),
+      t.createElement(
+        "tbody",
+        { key: "tbody" },
+        s.map(
+          (c, _) => t.createElement(
+            "tr",
+            {
+              key: (c == null ? void 0 : c.id) ?? (c == null ? void 0 : c.key) ?? _,
+              className: `group transition-all duration-200 border-b border-gray-50 last:border-b-0 ${p && _ % 2 !== 0 ? "bg-gray-50/30" : "bg-transparent"} ${r === "clean" ? "hover:bg-white hover:shadow-md hover:scale-[1.002] hover:z-10 relative" : "hover:bg-gray-50/50"}`
+            },
+            e.map(
+              (y, H) => t.createElement(
+                "td",
+                {
+                  key: H,
+                  style: {
+                    textAlign: y.align || "left",
+                    padding: a,
+                    borderTop: r === "default" ? "1px solid #F3F4F6" : "none"
+                  },
+                  className: "text-sm text-gray-900 font-medium"
+                },
+                y.render ? y.render(c) : y.accessor ? c[y.accessor] : null
+              )
+            )
+          )
+        )
+      )
+    ])
+  ).build();
+});
+class xe extends I {
+  constructor() {
+    super(...arguments);
+    i(this, "_data", []);
+    i(this, "_columns", []);
+    i(this, "_variant", "clean");
+    i(this, "_density", "standard");
+    i(this, "_striped", !1);
+    i(this, "_width");
+  }
+  data(e) {
+    return this._data = e, this;
+  }
+  columns(e) {
+    return this._columns = e, this;
+  }
+  variant(e) {
+    return this._variant = e, this;
+  }
+  density(e) {
+    return this._density = e, this;
+  }
+  striped(e = !0) {
+    return this._striped = e, this;
+  }
+  width(e) {
+    return this._width = e, this;
+  }
+  build() {
+    const e = {
+      data: this._data,
+      columns: this._columns,
+      variant: this._variant,
+      density: this._density,
+      striped: this._striped,
+      width: this._width,
+      className: this.getClassName(),
+      style: this.getStyle()
+    };
+    return t.createElement(ye, e);
+  }
+}
+const Pe = w(xe), ve = t.memo((n) => {
+  const { items: s, className: e, style: r, ...d } = n, p = s.map(
+    (o, u) => t.createElement(
+      "span",
+      {
+        key: o.title ? `${o.title}-${u}` : `tag-${u}`,
+        className: "fibo-tag"
+      },
+      o.title
+    )
+  );
+  return t.createElement(
+    "div",
+    {
+      className: e,
+      style: r,
+      ...d
+    },
+    ...p
+  );
+});
+class Ee extends I {
+  constructor(e = []) {
+    super();
+    i(this, "_items", []);
+    this._items = e;
+  }
+  items(e) {
+    return this._items = e, this;
+  }
+  build() {
+    const e = ["fibo-tags", "flex", "gap-2", "flex-wrap", ...this._classNames].filter(Boolean).join(" "), r = {
+      items: this._items,
+      className: e,
+      style: this.getStyle(),
+      ...this._props
+    };
+    return t.createElement(ve, r);
+  }
+}
+const ze = w(Ee), Ne = t.memo((n) => {
+  const { status: s, title: e, subtitle: r, className: d, style: p, ...o } = n;
+  return t.createElement(
+    "div",
+    {
+      className: d,
+      style: p,
+      ...o
+    },
+    t.createElement(
+      "div",
+      { className: "flex flex-col gap-1" },
+      e && t.createElement(
+        "h4",
+        {
+          className: "font-semibold text-sm uppercase tracking-wide opacity-90"
+        },
+        e
+      ),
+      r && t.createElement(
+        "p",
+        {
+          className: "opacity-80 text-sm"
+        },
+        r
+      )
+    )
+  );
+});
+class we extends I {
+  constructor(e = "") {
+    super();
+    i(this, "_status", "info");
+    i(this, "_title", "");
+    i(this, "_subtitle");
+    this._title = e;
+  }
+  status(e) {
+    return this._status = e, this;
+  }
+  title(e) {
+    return this._title = e, this;
+  }
+  subtitle(e) {
+    return this._subtitle = e, this;
+  }
+  build() {
+    const r = [
+      "fibo-banner",
+      `fibo-banner-${this._status}`,
+      ...this._classNames
+    ].filter(Boolean).join(" "), d = {
+      status: this._status,
+      title: this._title,
+      subtitle: this._subtitle,
+      className: r,
+      style: this.getStyle(),
+      ...this._props
+    };
+    return t.createElement(Ne, d);
+  }
+}
+const Ve = w(we);
+class Ie extends I {
+  constructor() {
+    super(...arguments);
+    i(this, "_title", "");
+    i(this, "_content", null);
+    i(this, "_defaultExpanded", !1);
+    i(this, "_expanded");
+    i(this, "_onToggle");
+  }
+  title(e) {
+    return this._title = e, this;
+  }
+  content(e) {
+    return this._content = T(e), this;
+  }
+  isOpen(e) {
+    return this._expanded = e, this;
+  }
+  defaultOpen(e) {
+    return this._defaultExpanded = e, this;
+  }
+  onToggle(e) {
+    return this._onToggle = e, this;
+  }
+  build() {
+    return t.createElement(Se, {
+      builder: this,
+      ...this._props
+    });
+  }
+}
+const Se = t.memo(({ builder: n }) => {
+  const s = t.useId(), e = `${s}-content`, r = n._expanded !== void 0, [d, p] = D(n._defaultExpanded), o = r ? n._expanded : d, u = () => {
+    r || p(!o), n._onToggle && n._onToggle(!o);
+  };
+  return C().classNames(["w-full", "border", "border-gray-200", "rounded-xl", "overflow-hidden", "bg-white", "transition-all", "duration-300"]).className(n.getClassName()).style(n.getStyle()).children([
+    t.createElement("button", {
+      key: "header",
+      type: "button",
+      id: s,
+      "aria-expanded": o,
+      "aria-controls": e,
+      className: "w-full flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50 transition-colors select-none text-left bg-transparent border-0",
+      onClick: u
+    }, [
+      t.createElement(
+        t.Fragment,
+        { key: "title" },
+        typeof n._title == "string" ? de(n._title).fontWeight(600).fontSize(15).color("#1F2937").build() : n._title
+      ),
+      t.createElement("span", {
+        key: "chevron",
+        className: "transition-transform duration-300",
+        style: { transform: o ? "rotate(180deg)" : "rotate(0deg)" },
+        "aria-hidden": !0
+      }, t.createElement("svg", {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: "text-gray-400"
+      }, t.createElement("polyline", { points: "6 9 12 15 18 9" })))
+    ]),
+    C().props({
+      id: e,
+      role: "region",
+      "aria-labelledby": s,
+      hidden: !o || void 0
+    }).classNames(["transition-all", "duration-300", "ease-in-out", "overflow-hidden"]).style({
+      maxHeight: o ? "500px" : "0px",
+      opacity: o ? 1 : 0
+    }).children(
+      C().classNames(["p-4", "pt-0", "text-gray-600", "text-sm"]).children(n._content).build()
+    ).build()
+  ]).build();
+}), De = w(Ie), Ce = t.memo((n) => {
+  const {
+    children: s,
+    variant: e = "standard",
+    columns: r = 1,
+    gap: d = "md",
+    className: p,
+    style: o,
+    ...u
+  } = n, g = (m) => typeof m == "number" ? "" : {
+    none: "gap-0",
+    sm: "gap-2",
+    md: "gap-4",
+    lg: "gap-6",
+    xl: "gap-8"
+  }[m] || "gap-4", x = (m) => {
+    if (typeof m == "number") return m + "px";
+  }, v = (m) => {
+    if (typeof m == "number") return `grid-cols-${m}`;
+    let a = [];
+    return m.sm && a.push(`sm:grid-cols-${m.sm}`), m.md && a.push(`md:grid-cols-${m.md}`), m.lg && a.push(`lg:grid-cols-${m.lg}`), m.xl && a.push(`xl:grid-cols-${m.xl}`), a.join(" ") || "grid-cols-1";
+  };
+  if (e === "bento") {
+    const m = [
+      { col: 2, row: 2 },
+      { col: 1, row: 1 },
+      { col: 1, row: 1 },
+      { col: 1, row: 2 },
+      { col: 2, row: 1 }
+    ];
+    return t.createElement("div", {
+      className: `grid ${v(r)} ${g(d)} ${p}`,
+      style: {
+        gap: x(d),
+        gridAutoFlow: "dense",
+        ...o
+      },
+      ...u
+    }, t.Children.map(s, (a, c) => {
+      if (t.isValidElement(a) && typeof a.props.className == "string" && a.props.className.includes("col-span"))
+        return a;
+      const _ = m[c % m.length];
+      return t.createElement("div", {
+        key: t.isValidElement(a) && a.key != null ? a.key : c,
+        style: { gridColumn: `span ${_.col}`, gridRow: `span ${_.row}` }
+      }, a);
+    }));
+  }
+  if (e === "masonry") {
+    const m = (a) => {
+      if (typeof a == "number") return `columns-${a}`;
+      let c = [];
+      return a.sm && c.push(`sm:columns-${a.sm}`), a.md && c.push(`md:columns-${a.md}`), a.lg && c.push(`lg:columns-${a.lg}`), a.xl && c.push(`xl:columns-${a.xl}`), c.join(" ") || "columns-1";
+    };
+    return t.createElement("div", {
+      className: `${m(r)} ${g(d)} space-y-4 ${p}`,
+      style: {
+        columnGap: x(d),
+        ...o
+      },
+      ...u
+    }, t.Children.map(
+      s,
+      (a) => t.createElement("div", { className: "break-inside-avoid mb-4" }, a)
+    ));
+  }
+  return t.createElement("div", {
+    className: `grid ${v(r)} ${g(d)} ${p}`,
+    style: {
+      gap: x(d),
+      ...o
+    },
+    ...u
+  }, s);
+}), $e = t.memo((n) => {
+  const { children: s, colSpan: e, rowSpan: r, className: d, style: p, ...o } = n, u = () => {
+    let g = [];
+    return e && g.push(`col-span-${e}`), r && g.push(`row-span-${r}`), g.join(" ");
+  };
+  return t.createElement("div", {
+    className: `${u()} ${d}`,
+    style: p,
+    ...o
+  }, s);
+});
+class ke extends I {
+  constructor() {
+    super(...arguments);
+    i(this, "_variant", "standard");
+    i(this, "_columns", 1);
+    i(this, "_gap", "md");
+  }
+  variant(e) {
+    return this._variant = e, this;
+  }
+  columns(e) {
+    return this._columns = e, this;
+  }
+  gap(e) {
+    return this._gap = e, this;
+  }
+  build() {
+    const e = {
+      variant: this._variant,
+      columns: this._columns,
+      gap: this._gap,
+      children: this.processChildren(),
+      className: this.getClassName(),
+      style: this.getStyle(),
+      ...this._props
+    };
+    return t.createElement(Ce, e);
+  }
+}
+class Be extends I {
+  constructor() {
+    super(...arguments);
+    i(this, "_colSpan");
+    i(this, "_rowSpan");
+  }
+  colSpan(e) {
+    return this._colSpan = e, this;
+  }
+  rowSpan(e) {
+    return this._rowSpan = e, this;
+  }
+  build() {
+    const e = {
+      colSpan: this._colSpan,
+      rowSpan: this._rowSpan,
+      children: this.processChildren(),
+      className: this.getClassName(),
+      style: this.getStyle(),
+      ...this._props
+    };
+    return t.createElement($e, e);
+  }
+}
+const Xe = w(ke), Ye = w(Be);
+export {
+  Ve as B,
+  je as C,
+  Xe as G,
+  Ge as L,
+  Pe as T,
+  Me as a,
+  ze as b,
+  De as c,
+  Ye as d
+};