fiboui 1.0.2 → 2.0.0

package/dist/index-Dm4j2mMM.js

@@ -0,0 +1,1031 @@
+"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 { h as C, F } from "./builder-DjLYXkXu.js";
+import { B as j } from "./index-DKFr-sai.js";
+import { T as O } from "./index-CTRZRn9S.js";
+import { R as J } from "./index-RbfIZuAo.js";
+import { jsxs as $, jsx as f } from "react/jsx-runtime";
+const K = ({ size: n }) => t.createElement(
+  "svg",
+  {
+    width: n,
+    height: n,
+    viewBox: "0 0 24 24",
+    "aria-hidden": !0,
+    className: "fibo-avatar-user"
+  },
+  t.createElement("circle", { cx: 12, cy: 12, r: 12, fill: "#f2f2f2" }),
+  t.createElement("circle", { cx: 12, cy: 9.4, r: 3.6, fill: "#6a6a6a" }),
+  t.createElement("path", {
+    d: "M5.6 19.2c.9-3.1 3.4-5 6.4-5s5.5 1.9 6.4 5C16.6 20.6 14.4 21.4 12 21.4s-4.6-.8-6.4-2.2z",
+    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 = {
+    circle: "50%",
+    rounded: "24%",
+    square: "0"
+  }, S = {
+    none: "transparent",
+    online: "#10B981",
+    offline: "#9CA3AF",
+    busy: "#EF4444"
+  }, A = o !== "none" ? j().style({
+    position: "absolute",
+    bottom: "-2%",
+    right: "-2%",
+    width: "28%",
+    height: "28%",
+    minWidth: "10px",
+    minHeight: "10px",
+    backgroundColor: S[o],
+    borderRadius: "50%",
+    border: "3px solid #ffffff",
+    boxSizing: "content-box"
+  }).build() : null, k = s ? null : h ? String(h).slice(0, 2).toUpperCase() : d === "user" ? t.createElement(K, { size: c }) : d || null;
+  return j().className(`fibo-avatar ${y || ""}`).style({
+    position: "relative",
+    width: c,
+    height: c,
+    borderRadius: B[i],
+    backgroundImage: s ? `url(${s})` : void 0,
+    backgroundColor: s ? void 0 : (p == null ? void 0 : p.backgroundColor) || (h ? "#ddd" : "transparent"),
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    border: a,
+    boxShadow: a !== "none" ? "0 2px 8px rgba(0,0,0,0.05)" : "none",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    color: (p == null ? void 0 : p.color) || "#555",
+    fontSize: u * 0.42,
+    fontWeight: 500,
+    lineHeight: 1,
+    ...p
+  }).children([k, A]).build();
+});
+class X extends F {
+  constructor() {
+    super(...arguments);
+    r(this, "_image", "");
+    r(this, "_size", 40);
+    r(this, "_border", "none");
+    r(this, "_shape", "circle");
+    r(this, "_status", "none");
+    r(this, "_initials");
+    r(this, "_icon");
+  }
+  image(e) {
+    return this._image = e, this;
+  }
+  size(e) {
+    return this._size = e, this;
+  }
+  border(e) {
+    return this._border = e, this;
+  }
+  shape(e) {
+    return this._shape = e, this;
+  }
+  status(e) {
+    return this._status = e, this;
+  }
+  initials(e) {
+    return this._initials = e, this;
+  }
+  icon(e = "user") {
+    return this._icon = e, this;
+  }
+  build() {
+    const e = {
+      image: this._image,
+      size: this._size,
+      border: this._border,
+      shape: this._shape,
+      status: this._status,
+      initials: this._initials,
+      icon: this._icon,
+      className: this.getClassName(),
+      style: this.getStyle()
+    };
+    return t.createElement(Q, e);
+  }
+}
+const ve = 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" },
+    warning: { bg: "#FFFBEB", text: "#D97706", border: "transparent" },
+    error: { bg: "#FFF1F2", text: "#E11D48", border: "transparent" },
+    info: { bg: "#EFF6FF", text: "#2563EB", border: "transparent" }
+  };
+  let c = { ...{
+    neutral: { backgroundColor: "#F9FAFB", color: "#6B7280", border: "1px solid #E5E7EB" },
+    accent: { backgroundColor: "#EFF6FF", color: "#3B82F6", border: "none" },
+    outline: { backgroundColor: "transparent", color: "#FFFFFF", border: "1px solid rgba(255,255,255,0.3)" },
+    glass: {
+      backgroundColor: "rgba(255, 255, 255, 0.85)",
+      backdropFilter: "blur(12px)",
+      color: "#111827",
+      border: "1px solid rgba(255, 255, 255, 0.4)"
+    },
+    solid: { backgroundColor: "#111827", color: "#FFFFFF", border: "none" },
+    dot: { backgroundColor: "transparent", color: "#6B7280", border: "1px solid #E5E7EB", padding: "4px 10px" }
+  }[a] };
+  if (i !== "none") {
+    const B = y[i];
+    if (a === "solid") {
+      const S = {
+        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");
+  }
+  const u = {
+    pill: "9999px",
+    rounded: "8px"
+  };
+  return j().className(h).style({
+    ...c,
+    borderRadius: u[o],
+    padding: a === "dot" ? "4px 8px" : "4px 10px",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "fit-content",
+    fontSize: "11px",
+    lineHeight: "1",
+    fontWeight: 600,
+    ...d
+  }).children(
+    J().gap(6).alignItems("center").children([
+      a === "dot" && i !== "none" ? j().style({
+        width: "6px",
+        height: "6px",
+        borderRadius: "50%",
+        backgroundColor: y[i].text,
+        boxShadow: `0 0 6px ${y[i].text}66`
+      }).build() : null,
+      e ? j().classNames(["flex", "items-center"]).children(e).build() : null,
+      O(s).fontSize(12).fontWeight(600).style({ color: "inherit" }).build()
+    ]).build()
+  ).build();
+});
+class Z extends F {
+  constructor() {
+    super(...arguments);
+    r(this, "_text", "");
+    r(this, "_icon");
+    r(this, "_variant", "neutral");
+    r(this, "_intent", "none");
+    r(this, "_shape", "rounded");
+  }
+  text(e) {
+    return this._text = e, this;
+  }
+  icon(e) {
+    return this._icon = e, this;
+  }
+  variant(e) {
+    return this._variant = e, this;
+  }
+  intent(e) {
+    return this._intent = e, this;
+  }
+  shape(e) {
+    return this._shape = e, this;
+  }
+  build() {
+    const e = {
+      text: this._text,
+      icon: this._icon,
+      variant: this._variant,
+      intent: this._intent,
+      shape: this._shape,
+      className: this.getClassName(),
+      style: this.getStyle()
+    };
+    return t.createElement(Y, e);
+  }
+}
+const ke = C(Z), ee = t.memo((n) => {
+  const { text: s, htmlFor: e, required: a, className: i, style: o, ...h } = n;
+  return t.createElement(
+    "label",
+    {
+      className: `fibo-label text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${i}`,
+      htmlFor: e,
+      style: o,
+      ...h
+    },
+    s,
+    a && t.createElement("span", { className: "text-red-500 ml-0.5" }, "*")
+  );
+});
+class te extends F {
+  constructor(e = "") {
+    super();
+    r(this, "_text", "");
+    r(this, "_htmlFor");
+    r(this, "_required", !1);
+    this._text = e;
+  }
+  text(e) {
+    return this._text = e, this;
+  }
+  htmlFor(e) {
+    return this._htmlFor = e, this;
+  }
+  required(e = !0) {
+    return this._required = e, this;
+  }
+  build() {
+    const e = {
+      text: this._text,
+      htmlFor: this._htmlFor,
+      required: this._required,
+      className: this.getClassName(),
+      style: this.getStyle(),
+      ...this._props
+    };
+    return t.createElement(ee, e);
+  }
+}
+const Ee = C(te), re = t.memo((n) => {
+  const {
+    src: s,
+    alt: e,
+    fit: a,
+    resizable: i,
+    clipShape: o,
+    frameWidth: h,
+    frameHeight: d,
+    className: y,
+    style: p,
+    ...c
+  } = n, u = { ...p };
+  return u.objectFit = a, h && (u.width = `${h}px`), d && (u.height = `${d}px`), i && (u.maxWidth = "100%", u.height = "auto"), t.createElement("img", {
+    src: s,
+    alt: e,
+    className: y,
+    style: u,
+    ...c
+  });
+});
+class se extends F {
+  constructor(e = "") {
+    super();
+    r(this, "_src", "");
+    r(this, "_alt", "");
+    r(this, "_fit", "cover");
+    r(this, "_resizable", !1);
+    r(this, "_clipShape");
+    r(this, "_frameWidth");
+    r(this, "_frameHeight");
+    r(this, "_foregroundStyle");
+    this._src = e;
+  }
+  src(e) {
+    return this._src = e, this;
+  }
+  alt(e) {
+    return this._alt = e, this;
+  }
+  resizable() {
+    return this._resizable = !0, this;
+  }
+  scaledToFit() {
+    return this._fit = "contain", this;
+  }
+  scaledToFill() {
+    return this._fit = "cover", this;
+  }
+  frame(e) {
+    return this._frameWidth = e.width, this._frameHeight = e.height, this;
+  }
+  clipShape(e) {
+    return this._clipShape = e, this;
+  }
+  foregroundStyle(e) {
+    return this._foregroundStyle = e, this;
+  }
+  build() {
+    const e = ["fibo-image", ...this._classNames];
+    this._clipShape === "circle" ? e.push("rounded-full") : this._clipShape === "rounded" && e.push("rounded-lg");
+    const a = e.filter(Boolean).join(" "), i = this.getStyle();
+    this._foregroundStyle && (i.color = this._foregroundStyle);
+    const o = {
+      src: this._src,
+      alt: this._alt,
+      fit: this._fit,
+      resizable: this._resizable,
+      clipShape: this._clipShape,
+      frameWidth: this._frameWidth,
+      frameHeight: this._frameHeight,
+      className: a,
+      style: i,
+      ...this._props
+    };
+    return t.createElement(re, o);
+  }
+}
+const we = 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,
+    lg: 32,
+    xl: 48
+  }[s] || 24, p = e || "currentColor", c = {
+    className: `fibo-spinner ${i}`,
+    style: { width: y, height: y, ...o },
+    role: "status",
+    "aria-live": "polite",
+    "aria-label": n["aria-label"] || "Loading",
+    ...h
+  };
+  return a === "dots" ? t.createElement(
+    "div",
+    { ...c, className: `${c.className} flex items-center justify-between` },
+    [0, 1, 2].map((u) => t.createElement("div", {
+      key: u,
+      className: "w-[25%] h-[25%] rounded-full animate-bounce",
+      style: {
+        backgroundColor: p,
+        animationDelay: `${u * 0.1}s`
+      }
+    }))
+  ) : a === "pulse" ? t.createElement(
+    "div",
+    { ...c, className: `${c.className} relative flex items-center justify-center` },
+    [
+      t.createElement("div", {
+        key: "ring",
+        className: "absolute inset-0 rounded-full opacity-75 animate-ping",
+        style: { backgroundColor: p }
+      }),
+      t.createElement("div", {
+        key: "dot",
+        className: "relative rounded-full h-[75%] w-[75%]",
+        style: { backgroundColor: p }
+      })
+    ]
+  ) : a === "blocks" ? t.createElement(
+    "div",
+    { ...c, className: `${c.className} grid grid-cols-2 gap-[10%] p-[10%]` },
+    [0, 1, 2, 3].map((u) => t.createElement("div", {
+      key: u,
+      className: "w-full h-full bg-current animate-pulse",
+      style: {
+        backgroundColor: p,
+        animationDelay: `${u * 0.15}s`,
+        opacity: 0.6
+      }
+    }))
+  ) : t.createElement(
+    "div",
+    { ...c, className: `${c.className} animate-spin` },
+    t.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        style: { width: "100%", height: "100%" }
+      },
+      t.createElement("circle", {
+        className: "opacity-20",
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: p,
+        strokeWidth: "4"
+      }),
+      t.createElement("path", {
+        className: "",
+        fill: p,
+        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      })
+    )
+  );
+});
+class ae extends F {
+  constructor() {
+    super(...arguments);
+    r(this, "_size", "md");
+    r(this, "_color");
+    r(this, "_variant", "circle");
+  }
+  size(e) {
+    return this._size = e, this;
+  }
+  color(e) {
+    return this._color = e, this;
+  }
+  variant(e) {
+    return this._variant = e, this;
+  }
+  build() {
+    const e = {
+      size: this._size,
+      color: this._color,
+      variant: this._variant,
+      className: this.getClassName(),
+      style: this.getStyle(),
+      ...this._props
+    };
+    return t.createElement(ne, e);
+  }
+}
+const Ne = 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(" "),
+    role: "status",
+    "aria-live": "polite",
+    "aria-label": h["aria-label"] || "Loading",
+    style: {
+      width: s,
+      height: e,
+      ...o
+    },
+    ...h
+  });
+});
+class le extends F {
+  constructor() {
+    super(...arguments);
+    r(this, "_width", "100%");
+    r(this, "_height", "20px");
+    r(this, "_shape", "rounded");
+  }
+  width(e) {
+    return this._width = e, this;
+  }
+  height(e) {
+    return this._height = e, this;
+  }
+  shape(e) {
+    return this._shape = e, this;
+  }
+  build() {
+    const e = {
+      width: this._width,
+      height: this._height,
+      shape: this._shape,
+      className: this.getClassName(),
+      style: this.getStyle(),
+      ...this._props
+    };
+    return t.createElement(ie, e);
+  }
+}
+const Ce = 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" }) }),
+  More: /* @__PURE__ */ $("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ f("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ f("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ f("circle", { cx: "5", cy: "12", r: "1" })
+  ] }),
+  Clock: /* @__PURE__ */ $("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ f("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ f("polyline", { points: "12 6 12 12 16 14" })
+  ] }),
+  Info: /* @__PURE__ */ $("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ f("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ f("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+    /* @__PURE__ */ f("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+  ] }),
+  Check: /* @__PURE__ */ $("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ f("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+    /* @__PURE__ */ f("polyline", { points: "22 4 12 14.01 9 11.01" })
+  ] }),
+  Search: /* @__PURE__ */ $("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ f("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ f("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+  ] }),
+  Close: /* @__PURE__ */ $("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ f("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ f("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] })
+}, oe = t.memo((n) => {
+  const { title: s, description: e, intent: a = "info", className: i, style: o, ...h } = n, d = a, y = {
+    info: "bg-blue-500 text-white",
+    success: "bg-emerald-500 text-white",
+    warning: "bg-orange-400 text-white",
+    error: "bg-rose-500 text-white"
+  }, p = {
+    info: "bg-blue-600",
+    success: "bg-emerald-600",
+    warning: "bg-orange-500",
+    error: "bg-rose-600"
+  }, c = {
+    info: M.Info || t.createElement("span", {}, "?"),
+    success: M.Check || t.createElement("span", {}, "✔"),
+    warning: M.Search || t.createElement("span", {}, "!"),
+    error: M.Close || t.createElement("span", {}, "x")
+  }, u = `relative overflow-hidden flex items-start gap-4 p-5 rounded-3xl shadow-lg border-none ${y[d]}`;
+  return t.createElement("div", {
+    className: `${u} ${i}`,
+    style: o,
+    ...h
+  }, [
+    t.createElement("div", {
+      key: "blob1",
+      className: "absolute -top-6 -right-6 w-24 h-24 rounded-full bg-white opacity-10 pointer-events-none"
+    }),
+    t.createElement("div", {
+      key: "blob2",
+      className: "absolute bottom-[-10px] left-10 w-12 h-12 rounded-full bg-black opacity-5 pointer-events-none"
+    }),
+    t.createElement("div", {
+      key: "blob3",
+      className: "absolute top-10 right-20 w-8 h-8 rounded-full bg-white opacity-10 pointer-events-none"
+    }),
+    t.createElement("div", {
+      key: "icon-wrapper",
+      className: `relative z-10 shrink-0 w-10 h-10 rounded-full flex items-center justify-center shadow-sm ${p[d]}`
+    }, t.cloneElement(c[d], { width: 20, height: 20, strokeWidth: 3 })),
+    t.createElement("div", { key: "content", className: "relative z-10 flex flex-col gap-1.5 pt-0.5" }, [
+      s && t.createElement("h5", { key: "title", className: "font-bold text-lg leading-none tracking-tight" }, s),
+      e && t.createElement("p", { key: "desc", className: "text-sm font-medium opacity-90 leading-relaxed" }, e)
+    ])
+  ]);
+});
+class ce extends F {
+  constructor() {
+    super(...arguments);
+    r(this, "_title", "");
+    r(this, "_description");
+    r(this, "_intent", "info");
+  }
+  title(e) {
+    return this._title = e, this;
+  }
+  description(e) {
+    return this._description = e, this;
+  }
+  intent(e) {
+    return this._intent = e, this;
+  }
+  build() {
+    const e = {
+      title: this._title,
+      description: this._description,
+      intent: this._intent,
+      className: this.getClassName(),
+      style: this.getStyle(),
+      ...this._props
+    };
+    return t.createElement(oe, e);
+  }
+}
+const Fe = C(ce), he = t.memo((n) => {
+  const {
+    value: s,
+    max: e,
+    color: a,
+    height: i,
+    variant: o = "default",
+    label: h,
+    subLabel: d,
+    items: y = [],
+    size: p,
+    strokeWidth: c,
+    segments: u,
+    gap: B,
+    trackColor: S,
+    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 W = [];
+    return S && W.push(t.createElement("circle", {
+      key: "track",
+      cx: 100,
+      cy: 100,
+      r: b,
+      stroke: S,
+      strokeWidth: g,
+      fill: "none"
+    })), x.forEach((L, D) => {
+      const H = L.value / I, T = Math.max(0, H * E - l * E);
+      W.push(t.createElement("circle", {
+        key: `seg-${D}`,
+        cx: 100,
+        cy: 100,
+        r: b,
+        stroke: L.color,
+        strokeWidth: L.strokeWidth ?? g,
+        fill: "none",
+        strokeDasharray: `${T} ${E}`,
+        strokeDashoffset: -z,
+        transform: "rotate(-90 100 100)",
+        style: { transition: "all .4s" }
+      })), z += H * E;
+    }), t.createElement("div", {
+      className: `fibo-progress-ring relative inline-flex items-center justify-center ${k || ""}`,
+      style: { width: m, height: m, ...w },
+      role: "progressbar",
+      "aria-valuenow": s,
+      "aria-valuemin": 0,
+      "aria-valuemax": e,
+      "aria-label": h || "Progress",
+      ...N
+    }, [
+      t.createElement("svg", {
+        key: "svg",
+        width: m,
+        height: m,
+        viewBox: "0 0 200 200",
+        "aria-hidden": !0
+      }, W),
+      A ? t.createElement("div", {
+        key: "center",
+        className: "absolute inset-0 flex flex-col items-center justify-center"
+      }, A) : null
+    ]);
+  }
+  if (o === "circular") {
+    const m = typeof i == "number" ? i : 64, g = 8, x = (m - g) / 2, l = x * 2 * Math.PI, b = l - _ / 100 * l;
+    return t.createElement("div", {
+      className: `relative inline-flex items-center justify-center ${k}`,
+      style: { width: m, height: m, ...w },
+      role: "progressbar",
+      "aria-valuenow": s,
+      "aria-valuemin": 0,
+      "aria-valuemax": e,
+      "aria-label": h || "Progress",
+      ...N
+    }, [
+      t.createElement("svg", {
+        key: "svg",
+        className: "transform -rotate-90",
+        width: m,
+        height: m
+      }, [
+        t.createElement("circle", {
+          key: "track",
+          className: "text-gray-100",
+          stroke: "currentColor",
+          strokeWidth: g,
+          fill: "transparent",
+          r: x,
+          cx: m / 2,
+          cy: m / 2
+        }),
+        t.createElement("circle", {
+          key: "prog",
+          stroke: v,
+          strokeWidth: g,
+          strokeDasharray: l,
+          strokeDashoffset: b,
+          strokeLinecap: "round",
+          fill: "transparent",
+          r: x,
+          cx: m / 2,
+          cy: m / 2,
+          className: "transition-all duration-1000 ease-out"
+        })
+      ]),
+      t.createElement("span", {
+        key: "label",
+        className: "absolute text-sm font-bold text-gray-700"
+      }, h || `${Math.round(_)}%`)
+    ]);
+  }
+  if (o === "pagination") {
+    const g = Math.floor(_ / 100 * 5);
+    return t.createElement("div", {
+      className: `flex items-center gap-2 ${k}`,
+      style: w,
+      ...N
+    }, Array.from({ length: 5 }).map((x, l) => {
+      const b = l === g;
+      return t.createElement("div", {
+        key: l,
+        className: `h-3 rounded-full transition-all duration-300 ${b ? "w-8" : "w-3"}`,
+        style: { backgroundColor: l <= g ? v : "#E5E7EB" }
+      });
+    }));
+  }
+  if (o === "timeline") {
+    const m = y.length ? y : [
+      { title: "Order components", date: "Done" },
+      { title: "Draft implementation", date: "In Progress" },
+      { title: "Verify functionality", date: "Pending" }
+    ], g = Math.floor(_ / 100 * m.length);
+    return t.createElement("div", {
+      className: `flex flex-col relative ${k}`,
+      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;
+      return t.createElement("div", {
+        key: l,
+        className: "relative flex items-start gap-4 pb-8 last:pb-0"
+      }, [
+        !I && t.createElement("div", {
+          key: "tail",
+          className: "absolute left-[19px] top-10 bottom-0 w-0.5 transition-colors duration-500",
+          style: { backgroundColor: b ? v : "#E5E7EB" }
+        }),
+        t.createElement("div", {
+          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"
+          }
+        }, W),
+        t.createElement("div", { key: "content", className: "pt-2" }, [
+          t.createElement("div", { className: "text-sm font-bold text-gray-900 leading-none" }, x.title),
+          x.description && t.createElement("div", { className: "text-xs text-gray-500 mt-1.5" }, x.description),
+          x.date && t.createElement("div", { className: "text-xs font-mono text-gray-400 mt-1" }, x.date)
+        ])
+      ]);
+    }));
+  }
+  if (o === "floating")
+    return t.createElement("div", {
+      className: `w-full bg-white rounded-xl shadow-sm border border-gray-100 p-4 relative overflow-hidden ${k}`,
+      style: w,
+      ...N
+    }, [
+      t.createElement("div", { key: "info", className: "flex justify-between items-center mb-3 px-1" }, [
+        t.createElement(
+          "span",
+          { key: "l", className: "text-sm font-semibold text-gray-700" },
+          h ? t.createElement("span", { className: "text-blue-600 mr-2" }, `${Math.round(_)}%`) : null,
+          h || "Update in progress..."
+        ),
+        d && t.createElement("span", { key: "r", className: "text-xs font-medium text-gray-400" }, d)
+      ]),
+      t.createElement("div", {
+        key: "track",
+        className: "w-full bg-blue-50 h-1.5 rounded-full overflow-hidden"
+      }, t.createElement("div", {
+        className: "h-full rounded-full transition-all duration-1000 ease-out",
+        style: { width: `${_}%`, backgroundColor: v }
+      }))
+    ]);
+  if (o === "chevron") {
+    const g = Math.floor(_ / 100 * 3);
+    return t.createElement("div", {
+      className: `flex w-full rounded-lg overflow-hidden ${k}`,
+      style: w,
+      ...N
+    }, Array.from({ length: 3 }).map((x, l) => {
+      const b = l <= g;
+      return t.createElement("div", {
+        key: l,
+        className: "flex-1 h-10 flex items-center justify-center text-sm font-bold text-white transition-colors duration-300",
+        style: {
+          backgroundColor: b ? l === g ? v : "#60A5FA" : "#E5E7EB",
+          clipPath: l === 0 ? "polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%)" : l === 2 ? "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 15% 50%)" : "polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%)",
+          marginLeft: l === 0 ? 0 : "-10px",
+          paddingLeft: l === 0 ? 0 : "10px",
+          zIndex: 3 - l
+        }
+      }, `Step ${l + 1}`);
+    }));
+  }
+  if (o === "steps") {
+    const g = Math.ceil(_ / 100 * 3);
+    return t.createElement("div", {
+      className: `w-full flex items-center justify-between relative ${k}`,
+      style: {
+        marginTop: "1rem",
+        ...w
+      },
+      ...N
+    }, [
+      t.createElement("div", {
+        key: "line-bg",
+        className: "absolute top-1/2 left-0 w-full h-1.5 bg-gray-200 z-0 transform -translate-y-1/2 rounded-full"
+      }),
+      t.createElement("div", {
+        key: "line-active",
+        className: "absolute top-1/2 left-0 h-1.5 z-0 transform -translate-y-1/2 transition-all duration-500 rounded-full",
+        style: { width: `${_}%`, backgroundColor: v }
+      }),
+      ...Array.from({ length: 3 }).map((x, l) => {
+        const b = l + 1, E = b <= g, I = b < g;
+        return t.createElement("div", {
+          key: l,
+          className: `relative z-10 w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold transition-all duration-300 border-4 ${E ? "text-white border-white shadow-md" : "bg-gray-100 text-gray-400 border-gray-50"}`,
+          style: { backgroundColor: E ? v : void 0 }
+        }, I ? t.createElement("span", {}, "✔") : b);
+      })
+    ]);
+  }
+  const R = i || 12;
+  if (o === "segments") {
+    const g = Math.round(_ / 100 * 10);
+    return t.createElement(
+      "div",
+      {
+        className: `flex gap-1.5 w-full ${k}`,
+        style: w,
+        ...N
+      },
+      Array.from({ length: 10 }).map((x, l) => t.createElement("div", {
+        key: l,
+        className: "h-3 flex-1 rounded-sm transition-all duration-300 first:rounded-l-full last:rounded-r-full",
+        style: {
+          height: i || 12,
+          backgroundColor: l < g ? v : "#E5E7EB"
+        }
+      }))
+    );
+  }
+  let P = null;
+  o === "striped" && (P = t.createElement("div", {
+    className: "w-full h-full opacity-30 animate-[stripes_1s_linear_infinite]",
+    style: {
+      backgroundImage: "linear-gradient(45deg,rgba(255,255,255,.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 75%,transparent 75%,transparent)",
+      backgroundSize: "20px 20px"
+    }
+  }));
+  const q = o === "labeled" ? t.createElement("div", {
+    className: "absolute -top-12 transform -translate-x-1/2 bg-slate-800 text-white text-xs font-bold py-1.5 px-3 rounded-lg shadow-xl whitespace-nowrap",
+    style: { left: `${_}%` }
+  }, [
+    h || `${Math.round(_)}%`,
+    t.createElement("div", { key: "arrow", className: "absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-2 h-2 bg-slate-800 rotate-45" })
+  ]) : null, V = o === "knob" ? t.createElement("div", {
+    className: "absolute top-1/2 right-0 w-7 h-7 bg-white rounded-full shadow-lg border-4 transform translate-x-1/2 -translate-y-1/2 flex items-center justify-center",
+    style: { borderColor: v }
+  }, t.createElement("div", { className: "w-1.5 h-1.5 rounded-full", style: { backgroundColor: v } })) : null;
+  return t.createElement("div", {
+    className: `relative w-full ${o === "labeled" ? "mt-8" : ""}`,
+    role: "progressbar",
+    "aria-valuenow": s,
+    "aria-valuemin": 0,
+    "aria-valuemax": e,
+    "aria-label": h || "Progress",
+    ...N
+  }, [
+    q,
+    t.createElement(
+      "div",
+      {
+        key: "track",
+        className: `w-full bg-slate-100 rounded-full ${k}`,
+        style: {
+          width: "100%",
+          height: R,
+          ...w
+        }
+      },
+      t.createElement("div", {
+        className: "h-full transition-all duration-1000 ease-out rounded-full flex items-center justify-center relative",
+        style: {
+          width: `${_}%`,
+          backgroundColor: v
+        }
+      }, [P, V])
+    )
+  ]);
+});
+class de extends F {
+  constructor() {
+    super(...arguments);
+    r(this, "_value", 0);
+    r(this, "_max", 100);
+    r(this, "_color");
+    r(this, "_height");
+    r(this, "_variant", "default");
+    r(this, "_label");
+    r(this, "_subLabel");
+    r(this, "_items");
+    r(this, "_size");
+    r(this, "_strokeWidth");
+    r(this, "_segments");
+    r(this, "_gap");
+    r(this, "_trackColor");
+  }
+  value(e) {
+    return this._value = e, this;
+  }
+  max(e) {
+    return this._max = e, this;
+  }
+  color(e) {
+    return this._color = e, this;
+  }
+  height(e) {
+    return this._height = e, this;
+  }
+  size(e) {
+    return this._size = e, this;
+  }
+  strokeWidth(e) {
+    return this._strokeWidth = e, this;
+  }
+  segments(e) {
+    return this._segments = e, this;
+  }
+  gap(e) {
+    return this._gap = e, this;
+  }
+  trackColor(e) {
+    return this._trackColor = e, this;
+  }
+  variant(e) {
+    return this._variant = e, this;
+  }
+  label(e) {
+    return this._label = e, this;
+  }
+  subLabel(e) {
+    return this._subLabel = e, this;
+  }
+  items(e) {
+    return this._items = e, this;
+  }
+  build() {
+    const e = {
+      value: this._value,
+      max: this._max,
+      color: this._color,
+      height: this._height,
+      variant: this._variant,
+      label: this._label,
+      subLabel: this._subLabel,
+      items: this._items,
+      size: this._size,
+      strokeWidth: this._strokeWidth,
+      segments: this._segments,
+      gap: this._gap,
+      trackColor: this._trackColor,
+      children: this.processChildren(),
+      className: this.getClassName(),
+      style: this.getStyle(),
+      ...this._props
+    };
+    return t.createElement(he, e);
+  }
+}
+const Be = C(de), ue = t.memo((n) => {
+  const {
+    source: s,
+    className: e,
+    style: a,
+    ...i
+  } = n;
+  return s ? t.createElement(s, {
+    className: e,
+    style: a,
+    ...i
+  }) : null;
+});
+class me extends F {
+  constructor(e) {
+    super();
+    r(this, "_source");
+    this._source = e;
+  }
+  source(e) {
+    return this._source = e, this;
+  }
+  props(e) {
+    return this._props = { ...this._props, ...e }, this;
+  }
+  build() {
+    const a = ["fibo-integration", ...this._classNames].filter(Boolean).join(" "), i = {
+      source: this._source,
+      className: a,
+      style: this.getStyle(),
+      ...this._props
+    };
+    return t.createElement(ue, i);
+  }
+}
+const Se = 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,
+  M as d
+};