fiboui 2.6.3 → 2.7.0

package/dist/index-7bieEGAP.js

@@ -0,0 +1,944 @@
+var ae = Object.defineProperty;
+var ie = (s, r, e) => r in s ? ae(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
+var i = (s, r, e) => ie(s, typeof r != "symbol" ? r + "" : r, e);
+import t from "react";
+import { aT as I, aU as $, aV as z, aX as R, aW as V, t as le, a_ as Z, b9 as oe } from "./client-CGjHCx8F.js";
+import { a as F } from "./icons-GEqYd2M9.js";
+function ce(s, r) {
+  if (!(typeof r != "string" || !z(r)))
+    for (const e of R(r))
+      s.bindSignal(e);
+}
+function de(s) {
+  return typeof s != "string" ? s : z(s) ? V(s) : s;
+}
+const ue = t.memo((s) => {
+  const { text: r, htmlFor: e, required: l, className: o, style: n, ...c } = s, v = [
+    "fibo-label",
+    "fibo-text-label",
+    "peer-disabled:cursor-not-allowed",
+    "peer-disabled:opacity-70",
+    o
+  ].filter(Boolean).join(" ");
+  return t.createElement(
+    "label",
+    {
+      ...c,
+      className: v,
+      htmlFor: e,
+      style: n
+    },
+    r,
+    l && t.createElement("span", { className: "text-red-500 ml-0.5", "aria-hidden": !0 }, "*")
+  );
+});
+class me extends $ {
+  constructor(e = "") {
+    super();
+    i(this, "_text", "");
+    i(this, "_htmlFor");
+    i(this, "_required", !1);
+    this.text(e);
+  }
+  text(e) {
+    return this._text = e, ce(this, e), this;
+  }
+  htmlFor(e) {
+    return this._htmlFor = e, this;
+  }
+  required(e = !0) {
+    return this._required = e, this;
+  }
+  build() {
+    const e = {
+      text: de(this._text),
+      htmlFor: this._htmlFor,
+      required: this._required,
+      className: this.getClassName(),
+      style: this.getStyle(),
+      ...this._props
+    };
+    return t.createElement(ue, e);
+  }
+}
+const Ve = I(me), he = `@media (prefers-reduced-motion: reduce) {
+  .fibo-spinner,
+  .fibo-spinner * {
+    animation: none !important;
+  }
+}`;
+function W(s) {
+  return t.createElement(
+    t.Fragment,
+    null,
+    t.createElement("style", { "data-fibo-spinner-motion": "" }, he),
+    s
+  );
+}
+const fe = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function pe(s) {
+  return t.createElement("span", {
+    key: "fibo-spinner-label",
+    className: "fibo-spinner-label",
+    style: fe
+  }, s);
+}
+const ge = t.memo((s) => {
+  const { size: r, color: e, variant: l = "circle", className: o, style: n, ...c } = s, m = typeof r == "number" ? r : {
+    sm: 16,
+    md: 24,
+    lg: 32,
+    xl: 48
+  }[r] || 24, p = e || "currentColor", y = c["aria-label"] || s["aria-label"] || "Loading", d = {
+    className: `fibo-spinner ${o || ""}`,
+    style: { position: "relative", width: m, height: m, ...n },
+    ...c,
+    role: "status",
+    "aria-live": "polite",
+    "aria-label": y
+  }, u = pe(y);
+  return W(l === "dots" ? t.createElement(
+    "div",
+    { ...d, className: `${d.className} flex items-center justify-between` },
+    [
+      u,
+      ...[0, 1, 2].map((k) => t.createElement("div", {
+        key: k,
+        className: "w-[25%] h-[25%] rounded-full animate-bounce",
+        style: {
+          backgroundColor: p,
+          animationDelay: `${k * 0.1}s`
+        }
+      }))
+    ]
+  ) : l === "pulse" ? t.createElement(
+    "div",
+    { ...d, className: `${d.className} relative flex items-center justify-center` },
+    [
+      u,
+      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 }
+      })
+    ]
+  ) : l === "blocks" ? t.createElement(
+    "div",
+    { ...d, className: `${d.className} grid grid-cols-2 gap-[10%] p-[10%]` },
+    [
+      u,
+      ...[0, 1, 2, 3].map((k) => t.createElement("div", {
+        key: k,
+        className: "w-full h-full bg-current animate-pulse",
+        style: {
+          backgroundColor: p,
+          animationDelay: `${k * 0.15}s`,
+          opacity: 0.6
+        }
+      }))
+    ]
+  ) : t.createElement(
+    "div",
+    { ...d, className: `${d.className} animate-spin` },
+    [
+      u,
+      t.createElement(
+        "svg",
+        {
+          key: "graphic",
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          style: { width: "100%", height: "100%" },
+          "aria-hidden": !0
+        },
+        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 be extends $ {
+  constructor() {
+    super(...arguments);
+    i(this, "_size", "md");
+    i(this, "_color");
+    i(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(ge, e);
+  }
+}
+const qe = I(be), ye = `@keyframes fibo-skeleton-pulse {
+  50% { opacity: 0.5; }
+}
+.loading-skeleton {
+  animation: fibo-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .loading-skeleton,
+  .loading-skeleton * {
+    animation: none !important;
+  }
+}`;
+function ve(s) {
+  return t.createElement(
+    t.Fragment,
+    null,
+    t.createElement("style", { "data-fibo-skeleton-motion": "" }, ye),
+    s
+  );
+}
+function G(s) {
+  return typeof s == "number" && Number.isFinite(s) ? `${s}px` : s;
+}
+const Ee = t.memo((s) => {
+  const { width: r, height: e, shape: l, className: o, style: n, ...c } = s, {
+    "aria-hidden": v,
+    role: m,
+    "aria-busy": p,
+    ...y
+  } = c, d = le(), u = ["bg-gray-200", "loading-skeleton"];
+  d || u.unshift("animate-pulse"), l === "circle" ? u.push("rounded-full") : l === "rounded-sm" ? u.push("rounded-sm") : l === "rounded-md" ? u.push("rounded-md") : l === "rounded-lg" ? u.push("rounded-lg") : l === "square" ? u.push("rounded-none") : u.push("rounded");
+  const k = t.createElement("div", {
+    ...y,
+    className: [...u, o].filter(Boolean).join(" "),
+    style: {
+      ...n,
+      width: G(r),
+      height: G(e),
+      ...d ? { animation: "none" } : {}
+    },
+    role: "status",
+    "aria-busy": !0,
+    "aria-live": "polite",
+    "aria-label": y["aria-label"] || c["aria-label"] || "Loading"
+  });
+  return ve(k);
+});
+class ke extends $ {
+  constructor() {
+    super(...arguments);
+    i(this, "_width", "100%");
+    i(this, "_height", "20px");
+    i(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 = this._props || {}, {
+      width: l,
+      height: o,
+      shape: n,
+      className: c,
+      style: v,
+      role: m,
+      "aria-busy": p,
+      "aria-hidden": y,
+      ...d
+    } = e, u = {
+      ...d,
+      width: this._width,
+      height: this._height,
+      shape: this._shape,
+      className: [this.getClassName(), c].filter(Boolean).join(" "),
+      style: { ...v || {}, ...this.getStyle() }
+    };
+    return t.createElement(Ee, u);
+  }
+}
+const Ue = I(ke);
+function H(s, r) {
+  if (!(typeof r != "string" || !z(r)))
+    for (const e of R(r))
+      s.bindSignal(e);
+}
+function X(s) {
+  return typeof s != "string" ? s : z(s) ? V(s) : s;
+}
+const _e = {
+  info: "bg-blue-500 text-white",
+  success: "bg-emerald-500 text-white",
+  warning: "bg-orange-400 text-white",
+  error: "bg-rose-500 text-white"
+}, xe = {
+  info: "bg-blue-600",
+  success: "bg-emerald-600",
+  warning: "bg-orange-500",
+  error: "bg-rose-600"
+};
+function we(s) {
+  return s === "success" || s === "warning" || s === "error" || s === "info" ? s : "info";
+}
+function Ne() {
+  return t.createElement(
+    "svg",
+    {
+      width: 20,
+      height: 20,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": !0,
+      focusable: "false"
+    },
+    [
+      t.createElement("path", {
+        key: "tri",
+        d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+      }),
+      t.createElement("line", { key: "stem", x1: "12", y1: "9", x2: "12", y2: "13" }),
+      t.createElement("line", { key: "dot", x1: "12", y1: "17", x2: "12.01", y2: "17" })
+    ]
+  );
+}
+function Ce(s) {
+  const r = t.createElement("span", { "aria-hidden": !0 }, "?"), l = {
+    info: F.Info,
+    success: F.Check,
+    warning: Ne(),
+    error: F.Close
+  }[s] || r;
+  return t.isValidElement(l) ? t.cloneElement(l, {
+    width: 20,
+    height: 20,
+    strokeWidth: 3,
+    "aria-hidden": !0
+  }) : r;
+}
+function Se() {
+  const s = F.Close;
+  return t.isValidElement(s) ? t.cloneElement(s, {
+    width: 16,
+    height: 16,
+    strokeWidth: 2.5,
+    "aria-hidden": !0
+  }) : t.createElement("span", { "aria-hidden": !0 }, "×");
+}
+const Ie = t.memo((s) => {
+  const { title: r, description: e, intent: l = "info", className: o, style: n, onClose: c, ...v } = s, m = we(l), p = m === "error" || m === "warning", y = typeof c == "function", d = `fibo-alert relative overflow-hidden flex items-start gap-4 p-5 rounded-3xl shadow-lg border-none ${_e[m]}`, u = [r, e].filter(Boolean).join(". "), k = [
+    t.createElement("div", {
+      key: "blob1",
+      className: "absolute -top-6 -right-6 w-24 h-24 rounded-full bg-white opacity-10 pointer-events-none",
+      "aria-hidden": !0
+    }),
+    t.createElement("div", {
+      key: "blob2",
+      className: "absolute bottom-[-10px] left-10 w-12 h-12 rounded-full bg-black opacity-5 pointer-events-none",
+      "aria-hidden": !0
+    }),
+    t.createElement("div", {
+      key: "blob3",
+      className: "absolute top-10 right-20 w-8 h-8 rounded-full bg-white opacity-10 pointer-events-none",
+      "aria-hidden": !0
+    }),
+    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 ${xe[m]}`
+    }, Ce(m)),
+    t.createElement("div", { key: "content", className: "relative z-10 flex flex-col gap-1.5 pt-0.5 min-w-0" }, [
+      r && t.createElement("h5", { key: "title", className: "font-bold text-lg leading-none tracking-tight" }, r),
+      e && t.createElement("p", { key: "desc", className: "text-sm font-medium opacity-90 leading-relaxed" }, e)
+    ])
+  ];
+  return y && k.push(
+    t.createElement("button", {
+      key: "dismiss",
+      type: "button",
+      className: "relative z-10 ml-auto shrink-0 w-8 h-8 rounded-full flex items-center justify-center bg-black/10",
+      "aria-label": "Dismiss",
+      onClick: (j) => {
+        j.stopPropagation(), c();
+      }
+    }, Se())
+  ), t.createElement("div", {
+    ...v,
+    className: `${d} ${o || ""}`.trim(),
+    style: n,
+    role: p ? "alert" : "status",
+    "aria-live": p ? "assertive" : "polite",
+    "aria-atomic": !0,
+    "aria-label": v["aria-label"] || u || void 0
+  }, k);
+});
+class $e extends $ {
+  constructor() {
+    super(...arguments);
+    i(this, "_title", "");
+    i(this, "_description");
+    i(this, "_intent", "info");
+  }
+  title(e) {
+    return this._title = e, H(this, e), this;
+  }
+  description(e) {
+    return this._description = e, H(this, e), this;
+  }
+  intent(e) {
+    return this._intent = e, this;
+  }
+  build() {
+    const e = {
+      title: X(this._title),
+      description: X(this._description),
+      intent: this._intent,
+      className: this.getClassName(),
+      style: this.getStyle(),
+      ...this._props
+    };
+    return t.createElement(Ie, e);
+  }
+}
+const Oe = I($e);
+function K(s, r) {
+  if (!(typeof r != "string" || !z(r)))
+    for (const e of R(r))
+      s.bindSignal(e);
+}
+function J(s) {
+  return typeof s != "string" ? s : z(s) ? V(s) : s;
+}
+const ze = t.memo((s) => {
+  const {
+    value: r,
+    max: e,
+    color: l,
+    height: o,
+    variant: n = "default",
+    label: c,
+    subLabel: v,
+    items: m = [],
+    size: p,
+    strokeWidth: y,
+    segments: d,
+    gap: u,
+    trackColor: k,
+    children: j,
+    className: w,
+    style: N,
+    ...P
+  } = s, q = typeof r == "number" && Number.isFinite(r) ? r : 0, L = typeof e == "number" && Number.isFinite(e) ? e : 100, U = L > 0 ? Math.min(L, Math.max(0, q)) : Math.max(0, q), E = L > 0 ? U / L * 100 : 0, _ = l || "#3B82F6", ee = typeof P["aria-label"] == "string" ? P["aria-label"] : "", C = { ...P, ...{
+    role: "progressbar",
+    "aria-valuenow": U,
+    "aria-valuemin": 0,
+    "aria-valuemax": L,
+    "aria-label": ee || c || "Progress"
+  } };
+  if (n === "ring") {
+    const h = p ?? (typeof o == "number" ? o : 190), f = y ?? 2.4, b = Array.isArray(d) && d.length ? d : [{ value: E, color: _ }], a = u ?? (b.length > 1 ? 5e-3 : 0), g = 88, x = 2 * Math.PI * g, A = b.reduce((M, D) => M + D.value, 0) || 1;
+    let S = 0;
+    const B = [];
+    return k && B.push(t.createElement("circle", {
+      key: "track",
+      cx: 100,
+      cy: 100,
+      r: g,
+      stroke: k,
+      strokeWidth: f,
+      fill: "none"
+    })), b.forEach((M, D) => {
+      const Y = M.value / A, ne = Math.max(0, Y * x - a * x);
+      B.push(t.createElement("circle", {
+        key: `seg-${D}`,
+        cx: 100,
+        cy: 100,
+        r: g,
+        stroke: M.color,
+        strokeWidth: M.strokeWidth ?? f,
+        fill: "none",
+        strokeDasharray: `${ne} ${x}`,
+        strokeDashoffset: -S,
+        transform: "rotate(-90 100 100)",
+        style: { transition: "all .4s" }
+      })), S += Y * x;
+    }), t.createElement("div", {
+      className: `fibo-progress-ring relative inline-flex items-center justify-center ${w || ""}`,
+      style: { width: h, height: h, ...N },
+      ...C
+    }, [
+      t.createElement("svg", {
+        key: "svg",
+        width: h,
+        height: h,
+        viewBox: "0 0 200 200",
+        "aria-hidden": !0
+      }, B),
+      j ? t.createElement("div", {
+        key: "center",
+        className: "absolute inset-0 flex flex-col items-center justify-center"
+      }, j) : null
+    ]);
+  }
+  if (n === "circular") {
+    const h = typeof o == "number" ? o : 64, f = 8, b = (h - f) / 2, a = b * 2 * Math.PI, g = a - E / 100 * a;
+    return t.createElement("div", {
+      className: `relative inline-flex items-center justify-center ${w || ""}`,
+      style: { width: h, height: h, ...N },
+      ...C
+    }, [
+      t.createElement("svg", {
+        key: "svg",
+        className: "transform -rotate-90",
+        width: h,
+        height: h,
+        "aria-hidden": !0
+      }, [
+        t.createElement("circle", {
+          key: "track",
+          className: "text-gray-100",
+          stroke: "currentColor",
+          strokeWidth: f,
+          fill: "transparent",
+          r: b,
+          cx: h / 2,
+          cy: h / 2
+        }),
+        t.createElement("circle", {
+          key: "prog",
+          stroke: _,
+          strokeWidth: f,
+          strokeDasharray: a,
+          strokeDashoffset: g,
+          strokeLinecap: "round",
+          fill: "transparent",
+          r: b,
+          cx: h / 2,
+          cy: h / 2,
+          className: "transition-all duration-1000 ease-out"
+        })
+      ]),
+      t.createElement("span", {
+        key: "label",
+        className: "absolute text-sm font-bold text-gray-700"
+      }, c || `${Math.round(E)}%`)
+    ]);
+  }
+  if (n === "pagination") {
+    const f = Math.floor(E / 100 * 5);
+    return t.createElement("div", {
+      className: `flex items-center gap-2 ${w || ""}`,
+      style: N,
+      ...C
+    }, Array.from({ length: 5 }).map((b, a) => {
+      const g = a === f;
+      return t.createElement("div", {
+        key: a,
+        className: `h-3 rounded-full transition-all duration-300 ${g ? "w-8" : "w-3"}`,
+        style: { backgroundColor: a <= f ? _ : "#E5E7EB" }
+      });
+    }));
+  }
+  if (n === "timeline") {
+    const h = m.length ? m : [
+      { title: "Order components", date: "Done" },
+      { title: "Draft implementation", date: "In Progress" },
+      { title: "Verify functionality", date: "Pending" }
+    ], f = Math.floor(E / 100 * h.length);
+    return t.createElement("div", {
+      className: `flex flex-col relative ${w || ""}`,
+      style: N,
+      ...C
+    }, h.map((b, a) => {
+      const g = a < f, x = a === f, A = a === h.length - 1, S = g || x ? _ : "#E5E7EB", B = g ? t.createElement("span", {}, "✓") : a + 1;
+      return t.createElement("div", {
+        key: a,
+        className: "relative flex items-start gap-4 pb-8 last:pb-0"
+      }, [
+        !A && t.createElement("div", {
+          key: "tail",
+          className: "absolute left-[19px] top-10 bottom-0 w-0.5 transition-colors duration-500",
+          style: { backgroundColor: g ? _ : "#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: S,
+            color: g ? "#fff" : x ? S : "#9CA3AF",
+            backgroundColor: g ? S : "#fff"
+          }
+        }, B),
+        t.createElement("div", { key: "content", className: "pt-2" }, [
+          t.createElement("div", { className: "text-sm font-bold text-gray-900 leading-none" }, b.title),
+          b.description && t.createElement("div", { className: "text-xs text-gray-500 mt-1.5" }, b.description),
+          b.date && t.createElement("div", { className: "text-xs font-mono text-gray-400 mt-1" }, b.date)
+        ])
+      ]);
+    }));
+  }
+  if (n === "floating")
+    return t.createElement("div", {
+      className: `w-full bg-white rounded-xl shadow-sm border border-gray-100 p-4 relative overflow-hidden ${w || ""}`,
+      style: N,
+      ...C
+    }, [
+      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" },
+          c ? t.createElement("span", { className: "text-blue-600 mr-2" }, `${Math.round(E)}%`) : null,
+          c || "Update in progress..."
+        ),
+        v && t.createElement("span", { key: "r", className: "text-xs font-medium text-gray-400" }, v)
+      ]),
+      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: `${E}%`, backgroundColor: _ }
+      }))
+    ]);
+  if (n === "chevron") {
+    const f = Math.floor(E / 100 * 3);
+    return t.createElement("div", {
+      className: `flex w-full rounded-lg overflow-hidden ${w || ""}`,
+      style: N,
+      ...C
+    }, Array.from({ length: 3 }).map((b, a) => {
+      const g = a <= f;
+      return t.createElement("div", {
+        key: a,
+        className: "flex-1 h-10 flex items-center justify-center text-sm font-bold text-white transition-colors duration-300",
+        style: {
+          backgroundColor: g ? a === f ? _ : "#60A5FA" : "#E5E7EB",
+          clipPath: a === 0 ? "polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%)" : a === 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: a === 0 ? 0 : "-10px",
+          paddingLeft: a === 0 ? 0 : "10px",
+          zIndex: 3 - a
+        }
+      }, `Step ${a + 1}`);
+    }));
+  }
+  if (n === "steps") {
+    const f = Math.ceil(E / 100 * 3);
+    return t.createElement("div", {
+      className: `w-full flex items-center justify-between relative ${w || ""}`,
+      style: {
+        marginTop: "1rem",
+        ...N
+      },
+      ...C
+    }, [
+      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: `${E}%`, backgroundColor: _ }
+      }),
+      ...Array.from({ length: 3 }).map((b, a) => {
+        const g = a + 1, x = g <= f, A = g < f;
+        return t.createElement("div", {
+          key: a,
+          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 ${x ? "text-white border-white shadow-md" : "bg-gray-100 text-gray-400 border-gray-50"}`,
+          style: { backgroundColor: x ? _ : void 0 }
+        }, A ? t.createElement("span", {}, "✔") : g);
+      })
+    ]);
+  }
+  const te = o || 12;
+  if (n === "segments") {
+    const f = Math.round(E / 100 * 10);
+    return t.createElement(
+      "div",
+      {
+        className: `flex gap-1.5 w-full ${w || ""}`,
+        style: N,
+        ...C
+      },
+      Array.from({ length: 10 }).map((b, a) => t.createElement("div", {
+        key: a,
+        className: "h-3 flex-1 rounded-sm transition-all duration-300 first:rounded-l-full last:rounded-r-full",
+        style: {
+          height: o || 12,
+          backgroundColor: a < f ? _ : "#E5E7EB"
+        }
+      }))
+    );
+  }
+  let O = null;
+  n === "striped" && (O = 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 se = n === "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: `${E}%` }
+  }, [
+    c || `${Math.round(E)}%`,
+    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, re = n === "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: _ }
+  }, t.createElement("div", { className: "w-1.5 h-1.5 rounded-full", style: { backgroundColor: _ } })) : null;
+  return t.createElement("div", {
+    className: `relative w-full ${n === "labeled" ? "mt-8" : ""} ${w || ""}`,
+    style: N,
+    ...C
+  }, [
+    se,
+    t.createElement(
+      "div",
+      {
+        key: "track",
+        className: "w-full bg-slate-100 rounded-full",
+        style: {
+          width: "100%",
+          height: te
+        }
+      },
+      t.createElement("div", {
+        className: "h-full transition-all duration-1000 ease-out rounded-full flex items-center justify-center relative",
+        style: {
+          width: `${E}%`,
+          backgroundColor: _
+        }
+      }, [O, re])
+    )
+  ]);
+});
+class Le extends $ {
+  constructor() {
+    super(...arguments);
+    i(this, "_value", 0);
+    i(this, "_max", 100);
+    i(this, "_color");
+    i(this, "_height");
+    i(this, "_variant", "default");
+    i(this, "_label");
+    i(this, "_subLabel");
+    i(this, "_items");
+    i(this, "_size");
+    i(this, "_strokeWidth");
+    i(this, "_segments");
+    i(this, "_gap");
+    i(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, K(this, e), this;
+  }
+  subLabel(e) {
+    return this._subLabel = e, K(this, 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: J(this._label),
+      subLabel: J(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(ze, e);
+  }
+}
+const Ye = I(Le), Ae = "allow-scripts allow-popups allow-forms";
+function T(s) {
+  return typeof s == "string" && s.toLowerCase() === "iframe";
+}
+function Be(s) {
+  const r = s.trim();
+  return !r || T(r) ? !1 : Z(r) || /^(https?:)?\/\//i.test(r) || r.startsWith("/") || r.startsWith("./") || r.startsWith("../") ? !0 : /^[a-z][a-z0-9+.-]*:/i.test(r);
+}
+function Me(s) {
+  if (typeof s != "string") return "";
+  const r = s.trim();
+  return !r || Z(r) || !oe(r) ? "" : r;
+}
+function Q(s, r = {}) {
+  const e = s.sandbox ?? r.sandbox;
+  return {
+    ...r,
+    ...s,
+    src: Me(s.src ?? r.src),
+    // `srcdoc=""` is still "present" and blanks `src` in browsers. `undefined` drops the attr
+    // on createElement and overwrites a cloned javascript: srcdoc so it cannot stick.
+    srcdoc: void 0,
+    sandbox: typeof e == "string" ? e : Ae
+  };
+}
+const je = t.memo((s) => {
+  const {
+    source: r,
+    className: e,
+    style: l,
+    children: o,
+    ...n
+  } = s;
+  if (!r) return null;
+  const c = o == null || Array.isArray(o) && o.length === 0 ? void 0 : o, v = (m) => t.createElement(
+    "iframe",
+    {
+      ...Q(m !== void 0 ? { ...n, src: m } : n),
+      className: e,
+      style: l
+    },
+    c
+  );
+  if (typeof r == "string" && T(r))
+    return v();
+  if (typeof r == "string" && Be(r))
+    return v(n.src ?? r);
+  if (typeof r == "string")
+    return null;
+  if (t.isValidElement(r)) {
+    const m = r, p = m.props || {}, y = [e, p.className].filter(Boolean).join(" ") || void 0, d = { ...p.style, ...l }, u = T(m.type) ? { ...Q(n, p), className: y, style: d } : { ...n, className: y, style: d };
+    return c !== void 0 ? t.cloneElement(m, u, c) : t.cloneElement(m, u);
+  }
+  return typeof r != "function" && !(typeof r == "object" && r !== null && "$$typeof" in r) ? null : t.createElement(
+    r,
+    {
+      ...n,
+      className: e,
+      style: l
+    },
+    c
+  );
+});
+class We extends $ {
+  constructor(e) {
+    super();
+    i(this, "_source");
+    this._source = e;
+  }
+  source(e) {
+    return this._source = e, this;
+  }
+  props(e) {
+    return this._props = { ...this._props, ...e }, this;
+  }
+  build() {
+    const e = this._props || {}, {
+      className: l,
+      style: o,
+      children: n,
+      ...c
+    } = e, m = [
+      "fibo-integration",
+      ...this._classNames,
+      typeof l == "string" ? l : ""
+    ].filter(Boolean).join(" "), p = {
+      ...this.getStyle(),
+      ...o && typeof o == "object" && !Array.isArray(o) ? o : {}
+    }, y = this.processChildren(), d = n !== void 0 ? n : y.length ? y : void 0, u = {
+      source: this._source,
+      className: m,
+      style: p,
+      ...c,
+      ...d !== void 0 ? { children: d } : {}
+    };
+    return t.createElement(je, u);
+  }
+}
+const Ge = I(We);
+export {
+  Oe as A,
+  Ge as I,
+  Ve as L,
+  Ye as P,
+  qe as S,
+  Ue as a
+};