fiboui 2.2.0 → 2.2.3

package/dist/{index-CdJvNseK.js → index-CxbrZGXa.js}

@@ -1,19 +1,19 @@
 "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 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 q, useEffect as oe } from "react";
-import { v as w, F as I, B as T } from "./builder-KLTu7nAI.js";
-import { B as C } from "./index-CYnY7jAX.js";
-import { t as ce } from "./bundle-mjs-wppB-TKB.js";
-import { T as de } from "./index-DhPBYTPt.js";
-const me = t.memo((n) => {
-  const { text: s, subtitle: e, number: r, color: d, className: p, style: o, children: u, ...g } = n;
+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-3Bc2PfP9.js";
+import { B as C } from "./index-BlciuWzU.js";
+import { t as de } from "./bundle-mjs-wppB-TKB.js";
+import { T as me } from "./index-BObp1JkM.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(
     "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 },
+      style: { backgroundColor: "#ffffff", ...c },
       ...g
     },
     t.createElement(
@@ -44,7 +44,7 @@ const me = t.memo((n) => {
     )
   );
 });
-class he extends I {
+class ue extends I {
   constructor() {
     super(...arguments);
     i(this, "_text", "");
@@ -85,10 +85,10 @@ class he extends I {
       children: this.processChildren(),
       ...this._props
     };
-    return t.createElement(me, d);
+    return t.createElement(he, d);
   }
 }
-const je = w(he);
+const Ge = w(ue);
 class V {
   constructor() {
     i(this, "styles", /* @__PURE__ */ new Map());
@@ -132,34 +132,34 @@ class V {
     }), s.join("; ") + ";";
   }
 }
-const ue = 100, J = 60, K = 5, pe = t.memo((n) => {
+const pe = 100, J = 60, Q = 5, fe = t.memo((n) => {
   const {
     items: s,
     renderItem: e,
     variant: r,
     separator: d,
     loading: p,
-    threshold: o,
+    threshold: c,
     onEndReached: u,
     className: g,
     style: x,
     containerHeight: v = 500,
     resetItemStyles: m = !1,
     direction: a = "vertical",
-    customItemHover: c,
+    customItemHover: o,
     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) => {
+  } = 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) => {
     let l = 0;
     for (let f = 0; f < h; f++)
       l += A(f);
     return l;
-  }, re = () => {
+  }, ie = () => {
     let h = 0;
     for (let l = 0; l < $; l++)
       h += A(l);
     return h;
-  }, ie = (h) => {
+  }, ne = (h) => {
     let l = 0, f = $ - 1;
     for (; l < f; ) {
       const N = Math.floor((l + f) / 2);
@@ -169,48 +169,48 @@ const ue = 100, J = 60, K = 5, pe = t.memo((n) => {
   };
   let S = 0, X = $, G = 0, M = 0;
   if (B) {
-    S = Math.max(0, ie(H) - K);
+    S = Math.max(0, ne(H) - Q);
     let h = j(S), l = S;
-    for (; h < H + v + K * J && l < $; )
+    for (; h < H + v + Q * J && l < $; )
       h += A(l), l++;
-    X = Math.min($, l), G = j(S), M = re();
+    X = Math.min($, l), G = j(S), M = ie();
   }
   const P = s.slice(S, X);
-  q(() => {
+  Z(() => {
     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;
+        const K = k.getBoundingClientRect(), z = b ? K.width : K.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(() => {
+    }), h && se((l) => l + 1);
+  }, [P, S, B, b, te]), Z(() => {
     if (!u || p) return;
     const h = new IntersectionObserver(
       (l) => {
         l[0].isIntersecting && (u == null || u());
       },
-      { threshold: o }
+      { threshold: c }
     );
     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);
+  }, [p, s.length, u, c]);
+  const ae = (h) => {
+    B && ee(b ? h.currentTarget.scrollLeft : h.currentTarget.scrollTop);
   };
-  oe(() => {
-    if (typeof document > "u" || !c && !_ && !y) return;
+  ce(() => {
+    if (typeof document > "u" || !o && !_ && !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} }
+    return o && (f += `.fibo-list-item-custom-hover:hover { ${o} }
 `), _ && (f += `.fibo-list-item-custom-active:active { ${_} }
 `), y && (f += `.fibo-list-item-custom-focus:focus { ${y} }
 `), l.textContent = f, () => {
     };
-  }, [c, _, y]);
+  }, [o, _, y]);
   const Y = {
     default: { gap: "0px" },
     card: { gap: "12px" },
@@ -241,7 +241,7 @@ const ue = 100, J = 60, K = 5, pe = t.memo((n) => {
       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");
+  o && 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],
@@ -254,7 +254,7 @@ const ue = 100, J = 60, K = 5, pe = t.memo((n) => {
   return B ? t.createElement(
     "div",
     {
-      ref: se,
+      ref: re,
       className: `fibo-list fibo-list-virtualized ${g || ""}`,
       style: {
         height: b ? void 0 : `${v}px`,
@@ -267,7 +267,7 @@ const ue = 100, J = 60, K = 5, pe = t.memo((n) => {
         ...Y[r],
         ...x
       },
-      onScroll: ne
+      onScroll: ae
     },
     t.createElement("div", {
       style: {
@@ -328,7 +328,7 @@ const ue = 100, J = 60, K = 5, pe = t.memo((n) => {
     ])
   ).build();
 });
-class fe extends I {
+class ge extends I {
   constructor() {
     super(...arguments);
     i(this, "_items", []);
@@ -420,10 +420,10 @@ class fe extends I {
       className: this.getClassName(),
       style: this.getStyle()
     };
-    return t.createElement(pe, e);
+    return t.createElement(fe, e);
   }
 }
-const Ge = w(fe), ge = () => t.createElement(
+const Me = w(ge), _e = () => t.createElement(
   "svg",
   {
     width: 12,
@@ -435,20 +435,20 @@ const Ge = w(fe), ge = () => t.createElement(
     "aria-hidden": !0
   },
   t.createElement("path", { d: "M9 5l7 7-7 7" })
-), _e = t.memo((n) => {
+), be = t.memo((n) => {
   const {
     leading: s,
     title: e,
     subtitle: r,
     trailing: d,
     chevron: p,
-    divider: o,
+    divider: c,
     dividerColor: u,
     onPress: g,
     className: x,
     style: v,
     ...m
-  } = n, a = v || {}, c = a.padding ?? "14px 0", _ = typeof e == "string" ? t.createElement(
+  } = n, a = v || {}, o = a.padding ?? "14px 0", _ = typeof e == "string" ? t.createElement(
     "span",
     {
       className: "fibo-list-tile-title",
@@ -472,10 +472,10 @@ const Ge = w(fe), ge = () => t.createElement(
   return t.createElement(
     "div",
     {
-      className: ce("fibo-list-tile flex flex-row items-center w-full", x),
+      className: de("fibo-list-tile flex flex-row items-center w-full", x),
       style: {
-        padding: c,
-        borderBottom: o ? `1px solid ${u || "#3b3b3b"}` : "none",
+        padding: o,
+        borderBottom: c ? `1px solid ${u || "#3b3b3b"}` : "none",
         cursor: g ? "pointer" : void 0,
         ...a
       },
@@ -517,11 +517,11 @@ const Ge = w(fe), ge = () => t.createElement(
         className: "fibo-list-tile-chevron shrink-0 flex items-center",
         style: { color: "#9a9a9a", marginLeft: d ? 8 : 0 }
       },
-      t.createElement(ge)
+      t.createElement(_e)
     ) : null
   );
 });
-class be extends I {
+class ye extends I {
   constructor() {
     super(...arguments);
     i(this, "_leading");
@@ -558,7 +558,7 @@ class be extends I {
     return this._onPress = e, this;
   }
   build() {
-    return t.createElement(_e, {
+    return t.createElement(be, {
       leading: this._leading,
       title: this._title,
       subtitle: this._subtitle,
@@ -573,14 +573,14 @@ class be extends I {
     });
   }
 }
-const Me = w(be), ye = t.memo((n) => {
+const Pe = w(ye), xe = t.memo((n) => {
   const {
     data: s,
     columns: e,
     variant: r,
     density: d,
     striped: p,
-    width: o,
+    width: c,
     className: u,
     style: g
   } = n, x = {
@@ -589,7 +589,7 @@ const Me = w(be), ye = t.memo((n) => {
     borderSpacing: "0",
     ...g
   };
-  o && (x.width = typeof o == "number" ? `${o}px` : o);
+  c && (x.width = typeof c == "number" ? `${c}px` : c);
   const v = r === "clean" ? ["bg-white", "rounded-2xl", "border", "border-gray-100", "overflow-hidden", "shadow-sm"] : [], a = {
     compact: "10px 16px",
     standard: "16px 24px",
@@ -604,16 +604,16 @@ const Me = w(be), ye = t.memo((n) => {
           "tr",
           {},
           e.map(
-            (c, _) => t.createElement("th", {
-              key: String(c.accessor ?? c.header ?? _),
+            (o, _) => t.createElement("th", {
+              key: String(o.accessor ?? o.header ?? _),
               scope: "col",
               style: {
-                textAlign: c.align || "left",
+                textAlign: o.align || "left",
                 padding: a,
-                width: c.width
+                width: o.width
               },
               className: "text-xs font-bold text-gray-400 uppercase tracking-widest"
-            }, c.header)
+            }, o.header)
           )
         )
       ),
@@ -621,10 +621,10 @@ const Me = w(be), ye = t.memo((n) => {
         "tbody",
         { key: "tbody" },
         s.map(
-          (c, _) => t.createElement(
+          (o, _) => t.createElement(
             "tr",
             {
-              key: (c == null ? void 0 : c.id) ?? (c == null ? void 0 : c.key) ?? _,
+              key: (o == null ? void 0 : o.id) ?? (o == null ? void 0 : o.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(
@@ -639,7 +639,7 @@ const Me = w(be), ye = t.memo((n) => {
                   },
                   className: "text-sm text-gray-900 font-medium"
                 },
-                y.render ? y.render(c) : y.accessor ? c[y.accessor] : null
+                y.render ? y.render(o) : y.accessor ? o[y.accessor] : null
               )
             )
           )
@@ -648,7 +648,7 @@ const Me = w(be), ye = t.memo((n) => {
     ])
   ).build();
 });
-class xe extends I {
+class ve extends I {
   constructor() {
     super(...arguments);
     i(this, "_data", []);
@@ -687,18 +687,18 @@ class xe extends I {
       className: this.getClassName(),
       style: this.getStyle()
     };
-    return t.createElement(ye, e);
+    return t.createElement(xe, e);
   }
 }
-const Pe = w(xe), ve = t.memo((n) => {
+const ze = w(ve), Ee = t.memo((n) => {
   const { items: s, className: e, style: r, ...d } = n, p = s.map(
-    (o, u) => t.createElement(
+    (c, u) => t.createElement(
       "span",
       {
-        key: o.title ? `${o.title}-${u}` : `tag-${u}`,
+        key: c.title ? `${c.title}-${u}` : `tag-${u}`,
         className: "fibo-tag"
       },
-      o.title
+      c.title
     )
   );
   return t.createElement(
@@ -711,7 +711,7 @@ const Pe = w(xe), ve = t.memo((n) => {
     ...p
   );
 });
-class Ee extends I {
+class Ne extends I {
   constructor(e = []) {
     super();
     i(this, "_items", []);
@@ -727,17 +727,17 @@ class Ee extends I {
       style: this.getStyle(),
       ...this._props
     };
-    return t.createElement(ve, r);
+    return t.createElement(Ee, r);
   }
 }
-const ze = w(Ee), Ne = t.memo((n) => {
-  const { status: s, title: e, subtitle: r, className: d, style: p, ...o } = n;
+const Ve = w(Ne), we = t.memo((n) => {
+  const { status: s, title: e, subtitle: r, className: d, style: p, ...c } = n;
   return t.createElement(
     "div",
     {
       className: d,
       style: p,
-      ...o
+      ...c
     },
     t.createElement(
       "div",
@@ -759,7 +759,7 @@ const ze = w(Ee), Ne = t.memo((n) => {
     )
   );
 });
-class we extends I {
+class Ie extends I {
   constructor(e = "") {
     super();
     i(this, "_status", "info");
@@ -789,11 +789,11 @@ class we extends I {
       style: this.getStyle(),
       ...this._props
     };
-    return t.createElement(Ne, d);
+    return t.createElement(we, d);
   }
 }
-const Ve = w(we);
-class Ie extends I {
+const De = w(Ie);
+class Se extends I {
   constructor() {
     super(...arguments);
     i(this, "_title", "");
@@ -818,22 +818,22 @@ class Ie extends I {
     return this._onToggle = e, this;
   }
   build() {
-    return t.createElement(Se, {
+    return t.createElement(Ce, {
       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);
+const Ce = t.memo(({ builder: n }) => {
+  const s = t.useId(), e = `${s}-content`, r = n._expanded !== void 0, [d, p] = D(n._defaultExpanded), c = r ? n._expanded : d, u = () => {
+    r || p(!c), n._onToggle && n._onToggle(!c);
   };
   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-expanded": c,
       "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
@@ -841,12 +841,12 @@ const Se = t.memo(({ builder: n }) => {
       t.createElement(
         t.Fragment,
         { key: "title" },
-        typeof n._title == "string" ? de(n._title).fontWeight(600).fontSize(15).color("#1F2937").build() : n._title
+        typeof n._title == "string" ? me(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)" },
+        style: { transform: c ? "rotate(180deg)" : "rotate(0deg)" },
         "aria-hidden": !0
       }, t.createElement("svg", {
         width: "20",
@@ -864,22 +864,22 @@ const Se = t.memo(({ builder: n }) => {
       id: e,
       role: "region",
       "aria-labelledby": s,
-      hidden: !o || void 0
+      hidden: !c || void 0
     }).classNames(["transition-all", "duration-300", "ease-in-out", "overflow-hidden"]).style({
-      maxHeight: o ? "500px" : "0px",
-      opacity: o ? 1 : 0
+      maxHeight: c ? "500px" : "0px",
+      opacity: c ? 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) => {
+}), Xe = w(Se), $e = t.memo((n) => {
   const {
     children: s,
     variant: e = "standard",
     columns: r = 1,
     gap: d = "md",
     className: p,
-    style: o,
+    style: c,
     ...u
   } = n, g = (m) => typeof m == "number" ? "" : {
     none: "gap-0",
@@ -907,15 +907,15 @@ const Se = t.memo(({ builder: n }) => {
       style: {
         gap: x(d),
         gridAutoFlow: "dense",
-        ...o
+        ...c
       },
       ...u
-    }, t.Children.map(s, (a, c) => {
+    }, t.Children.map(s, (a, o) => {
       if (t.isValidElement(a) && typeof a.props.className == "string" && a.props.className.includes("col-span"))
         return a;
-      const _ = m[c % m.length];
+      const _ = m[o % m.length];
       return t.createElement("div", {
-        key: t.isValidElement(a) && a.key != null ? a.key : c,
+        key: q(a, o),
         style: { gridColumn: `span ${_.col}`, gridRow: `span ${_.row}` }
       }, a);
     }));
@@ -923,41 +923,44 @@ const Se = t.memo(({ builder: n }) => {
   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";
+      let o = [];
+      return a.sm && o.push(`sm:columns-${a.sm}`), a.md && o.push(`md:columns-${a.md}`), a.lg && o.push(`lg:columns-${a.lg}`), a.xl && o.push(`xl:columns-${a.xl}`), o.join(" ") || "columns-1";
     };
     return t.createElement("div", {
       className: `${m(r)} ${g(d)} space-y-4 ${p}`,
       style: {
         columnGap: x(d),
-        ...o
+        ...c
       },
       ...u
     }, t.Children.map(
       s,
-      (a) => t.createElement("div", { className: "break-inside-avoid mb-4" }, a)
+      (a, o) => t.createElement("div", {
+        key: q(a, o),
+        className: "break-inside-avoid mb-4"
+      }, a)
     ));
   }
   return t.createElement("div", {
     className: `grid ${v(r)} ${g(d)} ${p}`,
     style: {
       gap: x(d),
-      ...o
+      ...c
     },
     ...u
   }, s);
-}), $e = t.memo((n) => {
-  const { children: s, colSpan: e, rowSpan: r, className: d, style: p, ...o } = n, u = () => {
+}), ke = t.memo((n) => {
+  const { children: s, colSpan: e, rowSpan: r, className: d, style: p, ...c } = 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
+    ...c
   }, s);
 });
-class ke extends I {
+class Be extends I {
   constructor() {
     super(...arguments);
     i(this, "_variant", "standard");
@@ -983,10 +986,10 @@ class ke extends I {
       style: this.getStyle(),
       ...this._props
     };
-    return t.createElement(Ce, e);
+    return t.createElement($e, e);
   }
 }
-class Be extends I {
+class Te extends I {
   constructor() {
     super(...arguments);
     i(this, "_colSpan");
@@ -1007,18 +1010,18 @@ class Be extends I {
       style: this.getStyle(),
       ...this._props
     };
-    return t.createElement($e, e);
+    return t.createElement(ke, e);
   }
 }
-const Xe = w(ke), Ye = w(Be);
+const Ye = w(Be), We = w(Te);
 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
+  De as B,
+  Ge as C,
+  Ye as G,
+  Me as L,
+  ze as T,
+  Pe as a,
+  Ve as b,
+  Xe as c,
+  We as d
 };