@gearbox-protocol/ui-kit 2.1.0-next.1

package/dist/esm/components/pool-indicator-icon/pool-indicator-icon.js

@@ -0,0 +1,44 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { IconLighting as m } from "@gearbox-protocol/static";
+import n from "react";
+import "@gearbox-protocol/sdk";
+import { cn as a } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const f = {
+  primary: "#e0369c",
+  secondary: "#fff"
+}, w = n.forwardRef(({ children: t, size: i = 24, color: s = "primary", className: l }, c) => {
+  const e = i + 8, o = f[s];
+  return /* @__PURE__ */ d("div", { ref: c, className: a("relative", l), children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: "absolute -top-1 -left-1 flex items-center justify-center rounded-full",
+        style: {
+          width: e,
+          height: e,
+          border: `2px solid ${o}`
+        }
+      }
+    ),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: "absolute -top-1.5 -right-1.5 flex items-center justify-center rounded-full",
+        style: {
+          width: 14,
+          height: 14,
+          backgroundColor: o
+        },
+        children: /* @__PURE__ */ r(m, { size: 8 })
+      }
+    ),
+    t
+  ] });
+});
+export {
+  w as PoolIndicatorIcon
+};

package/dist/esm/components/pool-points-indicator/index.js

@@ -0,0 +1,4 @@
+import { PoolPointsIndicator as t } from "./pool-points-indicator.js";
+export {
+  t as PoolPointsIndicator
+};

package/dist/esm/components/pool-points-indicator/pool-points-indicator.js

@@ -0,0 +1,78 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as o } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const a = {
+  primary: "border-primary bg-primary",
+  secondary: "border-secondary bg-secondary",
+  green: "border-green-600 bg-green-600",
+  blue: "border-blue-600 bg-blue-600",
+  yellow: "border-yellow-600 bg-yellow-600"
+};
+function f({
+  size: r = 24,
+  color: n = "primary",
+  className: s,
+  children: d
+}) {
+  const t = r + 8, l = a[n];
+  return /* @__PURE__ */ i("div", { className: o("relative inline-block", s), children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: o(
+          "absolute flex items-center justify-center rounded-full border-2",
+          l.split(" ")[0]
+          // border color
+        ),
+        style: {
+          top: -4,
+          left: -4,
+          width: t,
+          height: t
+        }
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: o(
+          "absolute flex items-center justify-center rounded-full",
+          l.split(" ")[1]
+        ),
+        style: {
+          top: -r / 4,
+          right: -r / 4,
+          width: r * 7 / 12,
+          height: r * 7 / 12,
+          zIndex: 1
+        },
+        children: /* @__PURE__ */ i(
+          "svg",
+          {
+            width: r / 3,
+            height: r / 3,
+            viewBox: "0 0 8 8",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            className: "text-foreground",
+            role: "img",
+            "aria-label": "Pool Points Indicator",
+            children: [
+              /* @__PURE__ */ e("title", { children: "Pool Points" }),
+              /* @__PURE__ */ e("path", { d: "M4.5 0L1 4.5h2.5L3 8l3.5-4.5H4L4.5 0z", fill: "currentColor" })
+            ]
+          }
+        )
+      }
+    ),
+    d
+  ] });
+}
+export {
+  f as PoolPointsIndicator
+};

package/dist/esm/components/progress/index.js

@@ -0,0 +1,4 @@
+import { Progress as e } from "./progress.js";
+export {
+  e as Progress
+};

package/dist/esm/components/progress/progress.js

@@ -0,0 +1,63 @@
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-progress";
+import * as u from "react";
+import "@gearbox-protocol/sdk";
+import { cn as r } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const g = u.forwardRef(
+  ({
+    className: l,
+    value: e,
+    variant: i = "default",
+    size: n = "default",
+    showLabel: t = !1,
+    ...m
+  }, f) => {
+    const d = {
+      sm: "h-1",
+      default: "h-2",
+      lg: "h-3"
+    }, c = {
+      default: "bg-primary",
+      success: "bg-success",
+      warning: "bg-warning",
+      danger: "bg-destructive",
+      info: "bg-foreground"
+    };
+    return /* @__PURE__ */ a("div", { className: r("flex w-full items-center", t && "gap-3"), children: [
+      /* @__PURE__ */ o(
+        s.Root,
+        {
+          ref: f,
+          className: r(
+            "relative w-full overflow-hidden rounded-full bg-secondary",
+            d[n],
+            l
+          ),
+          ...m,
+          children: /* @__PURE__ */ o(
+            s.Indicator,
+            {
+              className: r(
+                "h-full w-full flex-1 transition-all",
+                c[i]
+              ),
+              style: { transform: `translateX(-${100 - (e || 0)}%)` }
+            }
+          )
+        }
+      ),
+      t && /* @__PURE__ */ a("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: [
+        e,
+        "%"
+      ] })
+    ] });
+  }
+);
+g.displayName = s.Root.displayName;
+export {
+  g as Progress
+};

package/dist/esm/components/progress-bar/index.js

@@ -0,0 +1,5 @@
+import { ProgressBar as e, hfToBarIndex as a } from "./progress-bar.js";
+export {
+  e as ProgressBar,
+  a as hfToBarIndex
+};

package/dist/esm/components/progress-bar/progress-bar.js

@@ -0,0 +1,98 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { cva as g } from "class-variance-authority";
+import * as b from "react";
+import { GOOD_HF as l, BAD_HF as x, getHFZones as v } from "../health-factor/health-factor.js";
+import { HelpTip as h } from "../help-tip/help-tip.js";
+import "@gearbox-protocol/sdk";
+import { cn as i } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const m = 33.33, N = {
+  1: { intervalStart: 0, intervalEnd: x, startFrom: 0 },
+  2: {
+    intervalStart: x,
+    intervalEnd: l,
+    startFrom: m
+  },
+  3: {
+    intervalStart: l,
+    intervalEnd: Math.ceil(l * 1.2),
+    startFrom: m * 2
+  }
+};
+function w(t) {
+  const e = v(t);
+  return e === "good" ? 3 : e === "medium" ? 2 : 1;
+}
+function y(t, e) {
+  const { intervalStart: s, intervalEnd: n, startFrom: a } = N[e], f = Math.min(Math.max(t, s), n) - s, p = n - s, u = f / p * m;
+  return a + u;
+}
+const E = g(
+  [
+    "relative w-full flex flex-col",
+    "border border-gray-20 rounded-sm",
+    "py-6 px-5"
+  ].join(" ")
+), d = "mx-[2.5px] h-2 flex-1 shrink-0 basis-0 rounded-[2px]", F = b.forwardRef(
+  ({ progress: t, tip: e, children: s }, n) => {
+    const a = w(t), c = y(t, a);
+    return /* @__PURE__ */ o("div", { ref: n, className: i(E()), children: [
+      e != null && e !== "" && /* @__PURE__ */ r("div", { className: "absolute right-4 top-4 z-[1] leading-none", children: /* @__PURE__ */ r(h, { maxWidth: "350px", minWidth: "350px", children: e }) }),
+      /* @__PURE__ */ r("div", { className: "mb-4 text-base font-medium leading-5", children: s }),
+      /* @__PURE__ */ o("div", { className: "relative w-full flex flex-nowrap", children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: i(
+              d,
+              a === 1 ? "bg-destructive" : "bg-gray-30"
+            )
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: i(
+              d,
+              a === 2 ? "bg-warning" : "bg-gray-30"
+            )
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: i(
+              d,
+              a === 3 ? "bg-success" : "bg-gray-30"
+            )
+          }
+        ),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: "absolute top-1/2 h-5 w-0.5 -translate-y-1/2 bg-foreground",
+            style: { left: `${c}%` },
+            "aria-hidden": !0,
+            children: [
+              /* @__PURE__ */ r("span", { className: " absolute left-1/2 -top-1/8 h-0 w-0 -translate-x-1/2 translate-y-1/2 border-4 border-transparent border-t-foreground border-b-0" }),
+              /* @__PURE__ */ r("span", { className: "absolute left-1/2 -bottom-1/8 h-0 w-0 -translate-x-1/2 -translate-y-1/2 border-4 border-transparent border-b-foreground border-t-0" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o("div", { className: "mt-4 flex w-full flex-nowrap", children: [
+        /* @__PURE__ */ r("div", { className: "mx-[2.5px] flex-1 shrink-0 basis-0 text-center text-xs font-medium uppercase leading-[14px] text-secondary-foreground", children: "Low" }),
+        /* @__PURE__ */ r("div", { className: "mx-[2.5px] flex-1 shrink-0 basis-0 text-center text-xs font-medium uppercase leading-[14px] text-secondary-foreground", children: "Normal" }),
+        /* @__PURE__ */ r("div", { className: "mx-[2.5px] flex-1 shrink-0 basis-0 text-center text-xs font-medium uppercase leading-[14px] text-secondary-foreground", children: "High" })
+      ] })
+    ] });
+  }
+);
+F.displayName = "ProgressBar";
+export {
+  F as ProgressBar,
+  w as hfToBarIndex
+};

package/dist/esm/components/progress-circle/index.js

@@ -0,0 +1,4 @@
+import { ProgressCircle as o } from "./progress-circle.js";
+export {
+  o as ProgressCircle
+};

package/dist/esm/components/progress-circle/progress-circle.js

@@ -0,0 +1,74 @@
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as u } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+function w({
+  value: l,
+  size: r = 40,
+  strokeWidth: e = 4,
+  indicatorColor: m = "hsl(var(--primary))",
+  trackColor: f = "hsl(var(--muted))",
+  className: h,
+  children: i
+}) {
+  const o = Math.max(0, Math.min(100, l || 0)), t = r / 2, s = t - e / 2, c = 2 * Math.PI * s, p = (100 - o) * c / 100;
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: u(
+        "relative inline-flex items-center justify-center",
+        h
+      ),
+      style: { width: r, height: r },
+      children: [
+        /* @__PURE__ */ n(
+          "svg",
+          {
+            width: r,
+            height: r,
+            viewBox: `0 0 ${r} ${r}`,
+            className: "rotate-[-90deg]",
+            "aria-label": `Progress: ${o}%`,
+            role: "img",
+            children: [
+              /* @__PURE__ */ a(
+                "circle",
+                {
+                  cx: t,
+                  cy: t,
+                  r: s,
+                  fill: "transparent",
+                  stroke: f,
+                  strokeWidth: e
+                }
+              ),
+              /* @__PURE__ */ a(
+                "circle",
+                {
+                  cx: t,
+                  cy: t,
+                  r: s,
+                  fill: "transparent",
+                  stroke: m,
+                  strokeWidth: e,
+                  strokeDasharray: c,
+                  strokeDashoffset: p,
+                  strokeLinecap: "round",
+                  className: "transition-[stroke-dashoffset] duration-300 ease-in-out"
+                }
+              )
+            ]
+          }
+        ),
+        i && /* @__PURE__ */ a("div", { className: "absolute inset-0 flex items-center justify-center", children: i })
+      ]
+    }
+  );
+}
+export {
+  w as ProgressCircle
+};

package/dist/esm/components/radio-group/index.js

@@ -0,0 +1,6 @@
+import { RadioGroup as p, RadioGroupItem as r, RadioOption as a } from "./radio-group.js";
+export {
+  p as RadioGroup,
+  r as RadioGroupItem,
+  a as RadioOption
+};

package/dist/esm/components/radio-group/radio-group.js

@@ -0,0 +1,95 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-radio-group";
+import { cva as s } from "class-variance-authority";
+import * as c from "react";
+import "@gearbox-protocol/sdk";
+import { cn as d } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const g = s("w-full flex flex-col gap-4"), f = s(
+  [
+    "group flex shrink-0 items-center justify-center",
+    "min-w-5 w-5 h-5 rounded-full border border-gray-50 bg-transparent",
+    "cursor-pointer transition-colors",
+    "hover:border-gray-80",
+    "data-[state=checked]:bg-primary data-[state=checked]:border-primary",
+    "data-[state=checked]:hover:bg-accent data-[state=checked]:hover:border-accent",
+    "data-[disabled]:bg-gray-20 data-[disabled]:border-gray-50 data-[disabled]:cursor-default",
+    "data-[disabled]:data-[state=checked]:bg-gray-30 data-[disabled]:data-[state=checked]:border-gray-50",
+    "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+  ].join(" ")
+), b = s(
+  [
+    "size-2 rounded-full bg-foreground",
+    "opacity-0 group-hover:opacity-100 group-data-[state=checked]:opacity-100",
+    "group-data-[disabled]:bg-muted-foreground group-data-[disabled]:group-hover:opacity-0",
+    "group-data-[disabled]:group-data-[state=checked]:opacity-60"
+  ].join(" ")
+), h = c.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ e(
+  t.Root,
+  {
+    ref: r,
+    className: d(g(), a),
+    ...o
+  }
+));
+h.displayName = t.Root.displayName ?? "RadioGroup";
+const p = c.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ e(
+  t.Item,
+  {
+    ref: r,
+    className: d(f(), a),
+    ...o,
+    children: /* @__PURE__ */ e(
+      t.Indicator,
+      {
+        className: d(b())
+      }
+    )
+  }
+));
+p.displayName = t.Item.displayName ?? "RadioGroupItem";
+const y = c.forwardRef(({ value: a, label: o, description: r, disabled: i, className: l, ...m }, u) => /* @__PURE__ */ n(
+  "label",
+  {
+    htmlFor: a,
+    className: d(
+      "flex grow shrink-0 basis-0 cursor-pointer items-center",
+      i && "cursor-default"
+    ),
+    children: [
+      /* @__PURE__ */ e(
+        p,
+        {
+          ref: u,
+          value: a,
+          id: a,
+          disabled: i,
+          className: l,
+          ...m
+        }
+      ),
+      /* @__PURE__ */ n("span", { className: "grid gap-1.5 pl-3 leading-none", children: [
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: d(
+              "text-sm font-medium leading-none text-foreground",
+              i && "cursor-default opacity-70"
+            ),
+            children: o
+          }
+        ),
+        r && /* @__PURE__ */ e("span", { className: "text-sm text-secondary-foreground", children: r })
+      ] })
+    ]
+  }
+));
+y.displayName = "RadioOption";
+export {
+  h as RadioGroup,
+  p as RadioGroupItem,
+  y as RadioOption
+};

package/dist/esm/components/rounded-image/index.js

@@ -0,0 +1,4 @@
+import { RoundedImage as d } from "./rounded-image.js";
+export {
+  d as RoundedImage
+};

package/dist/esm/components/rounded-image/rounded-image.js

@@ -0,0 +1,67 @@
+import { jsx as L } from "react/jsx-runtime";
+import * as b from "react";
+import { useState as s, useRef as E, useEffect as j } from "react";
+import "@gearbox-protocol/sdk";
+import { cn as k } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import { getStatic as w } from "../../utils/static.js";
+import "luxon";
+import "../../utils/z-index.js";
+const c = w("/tokens/default.svg"), i = /* @__PURE__ */ new Map();
+function d(e) {
+  return i.get(e) ? c : e;
+}
+const N = b.forwardRef(
+  ({
+    className: e,
+    size: o,
+    rounded: f = !0,
+    style: l,
+    src: r,
+    defaultIcon: m = c,
+    fit: u = "cover",
+    ...g
+  }, p) => {
+    const [h, a] = s(void 0), [v, n] = s(!1), t = E(!1);
+    j(() => {
+      d(r), a(void 0), n(!1), t.current = !1;
+    }, [r]);
+    const y = (I) => {
+      t.current || (t.current = !0, i.set(I.currentTarget.src, !0), a(m));
+    }, R = () => {
+      n(!0);
+    };
+    return (
+      // biome-ignore lint/performance/noImgElement: Universal component that works outside Next.js
+      /* @__PURE__ */ L(
+        "img",
+        {
+          ref: p,
+          src: h || d(r),
+          alt: "",
+          className: k(
+            u === "cover" ? "object-cover" : "object-contain",
+            f && "rounded-full",
+            !v && "bg-gray-90 dark:bg-gray-110 rounded-full",
+            e
+          ),
+          style: {
+            width: o,
+            height: o,
+            ...l
+          },
+          loading: "lazy",
+          decoding: "async",
+          onError: y,
+          onLoad: R,
+          ...g
+        }
+      )
+    );
+  }
+);
+N.displayName = "RoundedImage";
+export {
+  N as RoundedImage
+};

package/dist/esm/components/row/index.js

@@ -0,0 +1,4 @@
+import { Row as e } from "./row.js";
+export {
+  e as Row
+};

package/dist/esm/components/row/row.js

@@ -0,0 +1,58 @@
+import { jsx as w } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as b } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const v = {
+  "flex-start": "items-start",
+  "flex-end": "items-end",
+  center: "items-center",
+  baseline: "items-baseline",
+  stretch: "items-stretch"
+}, g = {
+  "flex-start": "justify-start",
+  "flex-end": "justify-end",
+  center: "justify-center",
+  "space-between": "justify-between",
+  "space-around": "justify-around",
+  "space-evenly": "justify-evenly"
+};
+function R({
+  $align: n,
+  align: i,
+  $justify: r,
+  justify: o,
+  $flexDirection: a = "row",
+  flexDirection: l,
+  $wrap: f = !0,
+  wrap: c,
+  $gap: m,
+  gap: p,
+  className: u,
+  children: x,
+  ...y
+}) {
+  const e = i || n, t = o || r, d = l || a, j = c ?? f, s = p ?? m;
+  return /* @__PURE__ */ w(
+    "div",
+    {
+      className: b(
+        "flex",
+        d === "column" ? "flex-col" : "flex-row",
+        j ? "flex-wrap" : "flex-nowrap",
+        e && v[e],
+        t && g[t],
+        s !== void 0 && `gap-${s}`,
+        u
+      ),
+      ...y,
+      children: x
+    }
+  );
+}
+export {
+  R as Row
+};

package/dist/esm/components/search-bar/index.js

@@ -0,0 +1,4 @@
+import { SearchBar as e } from "./search-bar.js";
+export {
+  e as SearchBar
+};