fiboui 2.4.4 → 2.6.0

package/dist/index-BsGBv5Ep.js

@@ -0,0 +1,455 @@
+var v = Object.defineProperty;
+var $ = (i, r, e) => r in i ? v(i, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[r] = e;
+var o = (i, r, e) => $(i, typeof r != "symbol" ? r + "" : r, e);
+import t from "react";
+import { at as b, au as _, a4 as E, az as x } from "./client-C9ZVisXx.js";
+const w = t.memo((i) => {
+  const { text: r, subtitle: e, number: n, color: c, className: m, style: d, children: p, ...u } = i;
+  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 ${m || ""}`,
+      style: { backgroundColor: "#ffffff", ...d },
+      ...u
+    },
+    t.createElement(
+      "div",
+      { className: "flex flex-col gap-2" },
+      r && t.createElement(
+        "h3",
+        {
+          className: "font-semibold text-[var(--fibo-on-surface-variant)] text-sm uppercase tracking-wide"
+        },
+        r
+      ),
+      n && t.createElement(
+        "p",
+        {
+          className: "font-bold text-[var(--fibo-on-surface)] text-3xl"
+        },
+        n
+      ),
+      e && t.createElement(
+        "p",
+        {
+          className: "text-[var(--fibo-on-surface-variant)] text-xs"
+        },
+        e
+      ),
+      ...p
+    )
+  );
+});
+class C extends _ {
+  constructor() {
+    super(...arguments);
+    o(this, "_text", "");
+    o(this, "_subtitle");
+    o(this, "_number");
+    o(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"
+    }, n = [
+      "fibo-card",
+      this._color ? `border-l-4 ${e[this._color]}` : "",
+      ...this._classNames
+    ].filter(Boolean).join(" "), c = {
+      text: this._text,
+      subtitle: this._subtitle,
+      number: this._number,
+      color: this._color,
+      className: n,
+      style: this.getStyle(),
+      children: this.processChildren(),
+      ...this._props
+    };
+    return t.createElement(w, c);
+  }
+}
+const L = b(C), S = t.memo((i) => {
+  const {
+    data: r,
+    columns: e,
+    variant: n,
+    density: c,
+    striped: m,
+    width: d,
+    className: p,
+    style: u
+  } = i, g = {
+    width: "100%",
+    borderCollapse: "separate",
+    borderSpacing: "0",
+    ...u
+  };
+  d && (g.width = typeof d == "number" ? `${d}px` : d);
+  const f = n === "clean" ? ["bg-white", "rounded-2xl", "border", "border-gray-100", "overflow-hidden", "shadow-sm"] : [], s = {
+    compact: "10px 16px",
+    standard: "16px 24px",
+    relaxed: "24px 32px"
+  }[c];
+  return E().className(p).classNames(f).children(
+    t.createElement("table", { style: g }, [
+      t.createElement(
+        "thead",
+        { key: "thead", className: "bg-gray-50/50" },
+        t.createElement(
+          "tr",
+          {},
+          e.map(
+            (a, h) => t.createElement("th", {
+              key: String(a.accessor ?? a.header ?? h),
+              scope: "col",
+              style: {
+                textAlign: a.align || "left",
+                padding: s,
+                width: a.width
+              },
+              className: "text-xs font-bold text-gray-400 uppercase tracking-widest"
+            }, a.header)
+          )
+        )
+      ),
+      t.createElement(
+        "tbody",
+        { key: "tbody" },
+        r.map(
+          (a, h) => t.createElement(
+            "tr",
+            {
+              key: (a == null ? void 0 : a.id) ?? (a == null ? void 0 : a.key) ?? h,
+              className: `group transition-all duration-200 border-b border-gray-50 last:border-b-0 ${m && h % 2 !== 0 ? "bg-gray-50/30" : "bg-transparent"} ${n === "clean" ? "hover:bg-white hover:shadow-md hover:scale-[1.002] hover:z-10 relative" : "hover:bg-gray-50/50"}`
+            },
+            e.map(
+              (y, N) => t.createElement(
+                "td",
+                {
+                  key: N,
+                  style: {
+                    textAlign: y.align || "left",
+                    padding: s,
+                    borderTop: n === "default" ? "1px solid #F3F4F6" : "none"
+                  },
+                  className: "text-sm text-gray-900 font-medium"
+                },
+                y.render ? y.render(a) : y.accessor ? a[y.accessor] : null
+              )
+            )
+          )
+        )
+      )
+    ])
+  ).build();
+});
+class B extends _ {
+  constructor() {
+    super(...arguments);
+    o(this, "_data", []);
+    o(this, "_columns", []);
+    o(this, "_variant", "clean");
+    o(this, "_density", "standard");
+    o(this, "_striped", !1);
+    o(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(S, e);
+  }
+}
+const M = b(B), k = t.memo((i) => {
+  const { items: r, className: e, style: n, ...c } = i, m = r.map(
+    (d, p) => t.createElement(
+      "span",
+      {
+        key: d.title ? `${d.title}-${p}` : `tag-${p}`,
+        className: "fibo-tag"
+      },
+      d.title
+    )
+  );
+  return t.createElement(
+    "div",
+    {
+      className: e,
+      style: n,
+      ...c
+    },
+    ...m
+  );
+});
+class G extends _ {
+  constructor(e = []) {
+    super();
+    o(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(" "), n = {
+      items: this._items,
+      className: e,
+      style: this.getStyle(),
+      ...this._props
+    };
+    return t.createElement(k, n);
+  }
+}
+const V = b(G), I = t.memo((i) => {
+  const { status: r, title: e, subtitle: n, className: c, style: m, ...d } = i;
+  return t.createElement(
+    "div",
+    {
+      className: c,
+      style: m,
+      ...d
+    },
+    t.createElement(
+      "div",
+      { className: "flex flex-col gap-1" },
+      e && t.createElement(
+        "h4",
+        {
+          className: "font-semibold text-sm uppercase tracking-wide opacity-90"
+        },
+        e
+      ),
+      n && t.createElement(
+        "p",
+        {
+          className: "opacity-80 text-sm"
+        },
+        n
+      )
+    )
+  );
+});
+class T extends _ {
+  constructor(e = "") {
+    super();
+    o(this, "_status", "info");
+    o(this, "_title", "");
+    o(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 n = [
+      "fibo-banner",
+      `fibo-banner-${this._status}`,
+      ...this._classNames
+    ].filter(Boolean).join(" "), c = {
+      status: this._status,
+      title: this._title,
+      subtitle: this._subtitle,
+      className: n,
+      style: this.getStyle(),
+      ...this._props
+    };
+    return t.createElement(I, c);
+  }
+}
+const q = b(T), j = t.memo((i) => {
+  const {
+    children: r,
+    variant: e = "standard",
+    columns: n = 1,
+    gap: c = "md",
+    className: m,
+    style: d,
+    ...p
+  } = i, u = (l) => typeof l == "number" ? "" : {
+    none: "gap-0",
+    sm: "gap-2",
+    md: "gap-4",
+    lg: "gap-6",
+    xl: "gap-8"
+  }[l] || "gap-4", g = (l) => {
+    if (typeof l == "number") return l + "px";
+  }, f = (l) => {
+    if (typeof l == "number") return `grid-cols-${l}`;
+    let s = [];
+    return l.sm && s.push(`sm:grid-cols-${l.sm}`), l.md && s.push(`md:grid-cols-${l.md}`), l.lg && s.push(`lg:grid-cols-${l.lg}`), l.xl && s.push(`xl:grid-cols-${l.xl}`), s.join(" ") || "grid-cols-1";
+  };
+  if (e === "bento") {
+    const l = [
+      { 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 ${f(n)} ${u(c)} ${m}`,
+      style: {
+        gap: g(c),
+        gridAutoFlow: "dense",
+        ...d
+      },
+      ...p
+    }, t.Children.map(r, (s, a) => {
+      if (t.isValidElement(s) && typeof s.props.className == "string" && s.props.className.includes("col-span"))
+        return s;
+      const h = l[a % l.length];
+      return t.createElement("div", {
+        key: x(s, a),
+        style: { gridColumn: `span ${h.col}`, gridRow: `span ${h.row}` }
+      }, s);
+    }));
+  }
+  if (e === "masonry") {
+    const l = (s) => {
+      if (typeof s == "number") return `columns-${s}`;
+      let a = [];
+      return s.sm && a.push(`sm:columns-${s.sm}`), s.md && a.push(`md:columns-${s.md}`), s.lg && a.push(`lg:columns-${s.lg}`), s.xl && a.push(`xl:columns-${s.xl}`), a.join(" ") || "columns-1";
+    };
+    return t.createElement("div", {
+      className: `${l(n)} ${u(c)} space-y-4 ${m}`,
+      style: {
+        columnGap: g(c),
+        ...d
+      },
+      ...p
+    }, t.Children.map(
+      r,
+      (s, a) => t.createElement("div", {
+        key: x(s, a),
+        className: "break-inside-avoid mb-4"
+      }, s)
+    ));
+  }
+  return t.createElement("div", {
+    className: `grid ${f(n)} ${u(c)} ${m}`,
+    style: {
+      gap: g(c),
+      ...d
+    },
+    ...p
+  }, r);
+}), F = t.memo((i) => {
+  const { children: r, colSpan: e, rowSpan: n, className: c, style: m, ...d } = i, p = () => {
+    let u = [];
+    return e && u.push(`col-span-${e}`), n && u.push(`row-span-${n}`), u.join(" ");
+  };
+  return t.createElement("div", {
+    className: `${p()} ${c}`,
+    style: m,
+    ...d
+  }, r);
+});
+class A extends _ {
+  constructor() {
+    super(...arguments);
+    o(this, "_variant", "standard");
+    o(this, "_columns", 1);
+    o(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(j, e);
+  }
+}
+class z extends _ {
+  constructor() {
+    super(...arguments);
+    o(this, "_colSpan");
+    o(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(F, e);
+  }
+}
+const D = b(A), H = b(z);
+export {
+  q as B,
+  L as C,
+  D as G,
+  M as T,
+  V as a,
+  H as b
+};

package/dist/{index-DRVdVimz.js → index-bzEYBKyp.js}

@@ -1,12 +1,9 @@
-"use client";
 var U = Object.defineProperty;
 var G = (n, s, e) => s in n ? U(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
 var r = (n, s, e) => G(n, typeof s != "symbol" ? s + "" : s, e);
 import t from "react";
-import { D as C, E as F } from "./builder-B5cebEWZ.js";
-import { B as j } from "./index-orKQGpHl.js";
-import { T as O } from "./index-DbaNIwWW.js";
-import { R as J } from "./index-BMIo5j9Y.js";
+import { at as C, au as F, a4 as j, $ as O } from "./client-C9ZVisXx.js";
+import { R as J } from "./index-BQ1MDC96.js";
 import { jsxs as $, jsx as f } from "react/jsx-runtime";
 const K = ({ size: n }) => t.createElement(
   "svg",
@@ -24,11 +21,11 @@ const K = ({ size: n }) => t.createElement(
     fill: "#6a6a6a"
   })
 ), Q = t.memo((n) => {
-  const { image: s, size: e, border: a, shape: i, status: o, initials: h, icon: d, className: y, style: p } = n, c = typeof e == "number" ? `${e}px` : e, u = typeof e == "number" ? e : 40, B = {
+  const { image: s, size: e, border: a, shape: i, status: o, initials: h, icon: d, className: y, style: p } = n, c = typeof e == "number" ? `${e}px` : e, u = typeof e == "number" ? e : 40, S = {
     circle: "50%",
     rounded: "24%",
     square: "0"
-  }, S = {
+  }, z = {
     none: "transparent",
     online: "#10B981",
     offline: "#9CA3AF",
@@ -41,7 +38,7 @@ const K = ({ size: n }) => t.createElement(
     height: "28%",
     minWidth: "10px",
     minHeight: "10px",
-    backgroundColor: S[o],
+    backgroundColor: z[o],
     borderRadius: "50%",
     border: "3px solid #ffffff",
     boxSizing: "content-box"
@@ -50,7 +47,7 @@ const K = ({ size: n }) => t.createElement(
     position: "relative",
     width: c,
     height: c,
-    borderRadius: B[i],
+    borderRadius: S[i],
     backgroundImage: s ? `url(${s})` : void 0,
     backgroundColor: s ? void 0 : (p == null ? void 0 : p.backgroundColor) || (h ? "#ddd" : "transparent"),
     backgroundSize: "cover",
@@ -115,7 +112,7 @@ class X extends F {
     return t.createElement(Q, e);
   }
 }
-const ve = C(X), Y = t.memo((n) => {
+const ye = C(X), Y = t.memo((n) => {
   const { text: s, icon: e, variant: a, intent: i, shape: o, className: h, style: d } = n, y = {
     none: { bg: "#F9FAFB", text: "#6B7280", border: "#E5E7EB" },
     success: { bg: "#ECFDF5", text: "#059669", border: "transparent" },
@@ -137,17 +134,17 @@ const ve = C(X), Y = t.memo((n) => {
     dot: { backgroundColor: "transparent", color: "#6B7280", border: "1px solid #E5E7EB", padding: "4px 10px" }
   }[a] };
   if (i !== "none") {
-    const B = y[i];
+    const S = y[i];
     if (a === "solid") {
-      const S = {
+      const z = {
         none: "#111827",
         success: "#059669",
         warning: "#D97706",
         error: "#E11D48",
         info: "#2563EB"
       };
-      c.backgroundColor = S[i], c.color = "#FFFFFF";
-    } else a === "dot" ? (c.color = "#374151", c.borderColor = "#E5E7EB") : (c.backgroundColor = B.bg, c.color = B.text, B.border ? c.border = `1px solid ${B.border}` : c.border = "none");
+      c.backgroundColor = z[i], c.color = "#FFFFFF";
+    } else a === "dot" ? (c.color = "#374151", c.borderColor = "#E5E7EB") : (c.backgroundColor = S.bg, c.color = S.text, S.border ? c.border = `1px solid ${S.border}` : c.border = "none");
   }
   const u = {
     pill: "9999px",
@@ -216,7 +213,7 @@ class Z extends F {
     return t.createElement(Y, e);
   }
 }
-const ke = C(Z), ee = t.memo((n) => {
+const _e = C(Z), ee = t.memo((n) => {
   const { text: s, htmlFor: e, required: a, className: i, style: o, ...h } = n;
   return t.createElement(
     "label",
@@ -259,7 +256,7 @@ class te extends F {
     return t.createElement(ee, e);
   }
 }
-const Ee = C(te), re = t.memo((n) => {
+const ve = C(te), re = t.memo((n) => {
   const {
     src: s,
     alt: e,
@@ -337,7 +334,7 @@ class se extends F {
     return t.createElement(re, o);
   }
 }
-const we = C(se), ne = t.memo((n) => {
+const ke = C(se), ne = t.memo((n) => {
   const { size: s, color: e, variant: a = "circle", className: i, style: o, ...h } = n, y = typeof s == "number" ? s : {
     sm: 16,
     md: 24,
@@ -444,7 +441,7 @@ class ae extends F {
     return t.createElement(ne, e);
   }
 }
-const Ne = C(ae), ie = t.memo((n) => {
+const Ee = C(ae), ie = t.memo((n) => {
   const { width: s, height: e, shape: a, className: i, style: o, ...h } = n, d = ["animate-pulse", "bg-gray-200", "loading-skeleton"];
   return a === "circle" ? d.push("rounded-full") : a === "rounded-sm" ? d.push("rounded-sm") : a === "rounded-md" ? d.push("rounded-md") : a === "rounded-lg" ? d.push("rounded-lg") : a === "square" ? d.push("rounded-none") : d.push("rounded"), t.createElement("div", {
     className: [...d, i].filter(Boolean).join(" "),
@@ -487,7 +484,7 @@ class le extends F {
     return t.createElement(ie, e);
   }
 }
-const Ce = C(le), M = {
+const we = C(le), M = {
   Heart: /* @__PURE__ */ f("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ f("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__ */ f("svg", { width: "14", height: "24", viewBox: "0 0 32 32", fill: "currentColor", children: /* @__PURE__ */ f("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__ */ f("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "#3B82F6", stroke: "none", children: /* @__PURE__ */ f("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" }) }),
@@ -589,7 +586,7 @@ class ce extends F {
     return t.createElement(oe, e);
   }
 }
-const Fe = C(ce), he = t.memo((n) => {
+const Ne = C(ce), he = t.memo((n) => {
   const {
     value: s,
     max: e,
@@ -602,23 +599,23 @@ const Fe = C(ce), he = t.memo((n) => {
     size: p,
     strokeWidth: c,
     segments: u,
-    gap: B,
-    trackColor: S,
+    gap: S,
+    trackColor: z,
     children: A,
     className: k,
     style: w,
     ...N
   } = n, _ = Math.min(100, Math.max(0, s / e * 100)), v = a || "#3B82F6";
   if (o === "ring") {
-    const m = p ?? (typeof i == "number" ? i : 190), g = c ?? 2.4, x = Array.isArray(u) && u.length ? u : [{ value: _, color: v }], l = B ?? (x.length > 1 ? 5e-3 : 0), b = 88, E = 2 * Math.PI * b, I = x.reduce((L, D) => L + D.value, 0) || 1;
-    let z = 0;
+    const m = p ?? (typeof i == "number" ? i : 190), g = c ?? 2.4, x = Array.isArray(u) && u.length ? u : [{ value: _, color: v }], l = S ?? (x.length > 1 ? 5e-3 : 0), b = 88, E = 2 * Math.PI * b, I = x.reduce((L, D) => L + D.value, 0) || 1;
+    let B = 0;
     const W = [];
-    return S && W.push(t.createElement("circle", {
+    return z && W.push(t.createElement("circle", {
       key: "track",
       cx: 100,
       cy: 100,
       r: b,
-      stroke: S,
+      stroke: z,
       strokeWidth: g,
       fill: "none"
     })), x.forEach((L, D) => {
@@ -632,10 +629,10 @@ const Fe = C(ce), he = t.memo((n) => {
         strokeWidth: L.strokeWidth ?? g,
         fill: "none",
         strokeDasharray: `${T} ${E}`,
-        strokeDashoffset: -z,
+        strokeDashoffset: -B,
         transform: "rotate(-90 100 100)",
         style: { transition: "all .4s" }
-      })), z += H * E;
+      })), B += H * E;
     }), t.createElement("div", {
       className: `fibo-progress-ring relative inline-flex items-center justify-center ${k || ""}`,
       style: { width: m, height: m, ...w },
@@ -733,7 +730,7 @@ const Fe = C(ce), he = t.memo((n) => {
       style: w,
       ...N
     }, m.map((x, l) => {
-      const b = l < g, E = l === g, I = l === m.length - 1, z = b || E ? v : "#E5E7EB", W = b ? t.createElement("span", {}, "✓") : l + 1;
+      const b = l < g, E = l === g, I = l === m.length - 1, B = b || E ? v : "#E5E7EB", W = b ? t.createElement("span", {}, "✓") : l + 1;
       return t.createElement("div", {
         key: l,
         className: "relative flex items-start gap-4 pb-8 last:pb-0"
@@ -747,9 +744,9 @@ const Fe = C(ce), he = t.memo((n) => {
           key: "dot",
           className: "relative z-10 w-10 h-10 rounded-full flex items-center justify-center border-2 bg-white transition-all duration-300 shrink-0 text-sm font-bold shadow-sm",
           style: {
-            borderColor: z,
-            color: b ? "#fff" : E ? z : "#9CA3AF",
-            backgroundColor: b ? z : "#fff"
+            borderColor: B,
+            color: b ? "#fff" : E ? B : "#9CA3AF",
+            backgroundColor: b ? B : "#fff"
           }
         }, W),
         t.createElement("div", { key: "content", className: "pt-2" }, [
@@ -981,7 +978,7 @@ class de extends F {
     return t.createElement(he, e);
   }
 }
-const Be = C(de), ue = t.memo((n) => {
+const Ce = C(de), ue = t.memo((n) => {
   const {
     source: s,
     className: e,
@@ -1016,16 +1013,16 @@ class me extends F {
     return t.createElement(ue, i);
   }
 }
-const Se = C(me);
+const Fe = C(me);
 export {
-  ve as A,
-  ke as B,
-  we as I,
-  Ee as L,
-  Be as P,
-  Ne as S,
-  Ce as a,
-  Fe as b,
-  Se as c,
+  ye as A,
+  _e as B,
+  ke as I,
+  ve as L,
+  Ce as P,
+  Ee as S,
+  we as a,
+  Ne as b,
+  Fe as c,
   M as d
 };