fiboui 2.4.4 → 2.5.0

package/dist/index-CL2Ecds4.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-C5fy1-Lh.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
+};