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

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

@@ -0,0 +1,5 @@
+import { Spinner as n, SpinnerOverlay as p } from "./spinner.js";
+export {
+  n as Spinner,
+  p as SpinnerOverlay
+};

package/dist/esm/components/spinner/spinner.js

@@ -0,0 +1,62 @@
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { IconPending as c } from "@gearbox-protocol/static";
+import * as i 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 { Z_INDEX as d } from "../../utils/z-index.js";
+const m = i.forwardRef(
+  ({ className: s, size: e = "default", label: r, ...n }, o) => {
+    const l = {
+      xs: "h-3 w-3",
+      sm: "h-4 w-4",
+      default: "h-6 w-6",
+      lg: "h-8 w-8",
+      xl: "h-12 w-12"
+    };
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        ref: o,
+        className: a(
+          "flex flex-col items-center justify-center gap-2",
+          s
+        ),
+        ...n,
+        children: [
+          /* @__PURE__ */ t(
+            c,
+            {
+              size: e === "xs" ? 12 : e === "sm" ? 16 : e === "default" ? 24 : e === "lg" ? 32 : 48,
+              className: a(
+                "animate-spin text-muted-foreground",
+                l[e]
+              )
+            }
+          ),
+          r && /* @__PURE__ */ t("span", { className: "text-sm text-muted-foreground", children: r })
+        ]
+      }
+    );
+  }
+);
+m.displayName = "Spinner";
+const p = i.forwardRef(({ className: s, fullScreen: e = !1, ...r }, n) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: n,
+    className: a(
+      "flex items-center justify-center bg-background/80 backdrop-blur-sm",
+      e ? `fixed inset-0 ${d.LOADING}` : "absolute inset-0",
+      s
+    ),
+    children: /* @__PURE__ */ t(m, { size: "lg", ...r })
+  }
+));
+p.displayName = "SpinnerOverlay";
+export {
+  m as Spinner,
+  p as SpinnerOverlay
+};

package/dist/esm/components/spinner-loader/index.js

@@ -0,0 +1,4 @@
+import { SpinnerLoader as o } from "./spinner-loader.js";
+export {
+  o as SpinnerLoader
+};

package/dist/esm/components/spinner-loader/spinner-loader.js

@@ -0,0 +1,32 @@
+import { jsx as m } from "react/jsx-runtime";
+import * as p 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 s = p.forwardRef(
+  ({ size: r = 40, speed: o = "1s", width: i = 4, className: t, style: e, ...a }, n) => /* @__PURE__ */ m(
+    "span",
+    {
+      ref: n,
+      className: d(
+        "inline-block rounded-full border-solid border-gray-20 border-b-gray-110 animate-spin",
+        t
+      ),
+      style: {
+        width: r,
+        height: r,
+        borderWidth: i,
+        animationDuration: o,
+        ...e
+      },
+      ...a
+    }
+  )
+);
+s.displayName = "SpinnerLoader";
+export {
+  s as SpinnerLoader
+};

package/dist/esm/components/split-list/index.js

@@ -0,0 +1,4 @@
+import { SplitList as o } from "./split-list.js";
+export {
+  o as SplitList
+};

package/dist/esm/components/split-list/split-list.js

@@ -0,0 +1,60 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cva as m } from "class-variance-authority";
+import * as t from "react";
+import "@gearbox-protocol/sdk";
+import { cn as c } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const u = m(
+  [
+    /* layout */
+    "relative flex items-center",
+    /* padding: 0 18px, no padding on first/last edges */
+    "px-[18px] first:pl-0 last:pr-0",
+    /* vertical divider (::before): 60% height, centered, gray40; hidden on first item */
+    "before:absolute before:left-0 before:top-[20%] before:h-[60%] before:border-l before:border-gray-40 before:content-[''] first:before:border-l-transparent"
+  ].join(" "),
+  {
+    variants: {
+      colSize: {
+        equal: "grow shrink-0 basis-0",
+        auto: "w-auto grow-0 shrink-0 basis-auto"
+      }
+    },
+    defaultVariants: { colSize: "equal" }
+  }
+), b = t.forwardRef(
+  ({ children: i, colSize: e = !0, className: l }, s) => {
+    const n = t.Children.toArray(i).filter(Boolean);
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: s,
+        className: c(
+          "flex w-full flex-row flex-nowrap",
+          "items-stretch",
+          l
+        ),
+        children: n.map((r, o) => {
+          const f = typeof e == "function" ? e(o) : e, p = t.isValidElement(r) && r.key != null ? r.key : `split-item-${o}`;
+          return /* @__PURE__ */ a(
+            "div",
+            {
+              className: u({
+                colSize: f === "auto" ? "auto" : "equal"
+              }),
+              children: r
+            },
+            p
+          );
+        })
+      }
+    );
+  }
+);
+b.displayName = "SplitList";
+export {
+  b as SplitList
+};

package/dist/esm/components/stat-badge/index.js

@@ -0,0 +1,9 @@
+import { StatBadge as e, StatBadgeGrid as d, statBadgeContentVariants as r, statBadgeGridVariants as s, statBadgeTitleVariants as i, statBadgeVariants as g } from "./stat-badge.js";
+export {
+  e as StatBadge,
+  d as StatBadgeGrid,
+  r as statBadgeContentVariants,
+  s as statBadgeGridVariants,
+  i as statBadgeTitleVariants,
+  g as statBadgeVariants
+};

package/dist/esm/components/stat-badge/stat-badge.js

@@ -0,0 +1,215 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { cva as o } from "class-variance-authority";
+import * as b from "react";
+import { StatusTriangle as v } from "../status-triangle/status-triangle.js";
+import { SimpleTooltip as B } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import "@gearbox-protocol/sdk";
+import { cn as l } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const S = o(
+  "w-full h-full rounded-lg border transition-colors",
+  {
+    variants: {
+      variant: {
+        filled: "bg-card border-border",
+        outlined: "bg-transparent border-border",
+        elevated: "bg-card border-border shadow-md",
+        primary: "bg-primary/10 border-primary/20"
+      },
+      size: {
+        sm: "p-4",
+        md: "p-5",
+        default: "p-6"
+      }
+    },
+    defaultVariants: {
+      variant: "filled",
+      size: "default"
+    }
+  }
+), V = o("font-medium text-muted-foreground", {
+  variants: {
+    size: {
+      sm: "text-xs leading-[0.8125rem]",
+      md: "text-xs leading-[0.9rem]",
+      default: "text-sm leading-[1.0625rem]"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+}), w = o("font-medium text-foreground flex", {
+  variants: {
+    size: {
+      sm: "text-sm leading-[1.0625rem]",
+      md: "text-base leading-[1.25rem]",
+      default: "text-xl leading-[1.5625rem]"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+}), y = b.forwardRef(
+  ({
+    className: d,
+    variant: c,
+    size: t,
+    title: m,
+    titleInfo: s,
+    value: n,
+    valueDescription: i,
+    delta: r,
+    ...g
+  }, u) => {
+    const h = () => {
+      if (s?.text != null) return s.text;
+      if (r != null) {
+        if (!(r && r.value !== void 0 && r.value !== 0)) return null;
+        const f = r.value < 0, p = r.value > 0, x = /* @__PURE__ */ a(
+          "div",
+          {
+            className: l(
+              "inline-flex items-center gap-1 text-xs font-medium",
+              f && "text-destructive",
+              p && "text-success"
+            ),
+            children: [
+              p && (r.positiveIcon || /* @__PURE__ */ e(v, { size: 4 })),
+              f && (r.negativeIcon || /* @__PURE__ */ e(v, { size: 4, isNegative: !0 })),
+              r.label && /* @__PURE__ */ e("span", { children: r.label })
+            ]
+          }
+        );
+        return r.tooltip != null ? /* @__PURE__ */ e(
+          B,
+          {
+            title: /* @__PURE__ */ e("div", { className: "cursor-help", children: x }),
+            children: r.tooltip
+          }
+        ) : x;
+      }
+      return null;
+    }, N = t === "sm" ? "mb-2.5" : t === "md" ? "mb-2" : "mb-3";
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: u,
+        className: l(S({ variant: c, size: t }), d),
+        ...g,
+        children: [
+          /* @__PURE__ */ a("div", { className: l("flex items-center", N), children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: l(
+                  V({ size: t }),
+                  "flex-1 flex items-center gap-1"
+                ),
+                children: m
+              }
+            ),
+            h()
+          ] }),
+          /* @__PURE__ */ a("div", { className: l(w({ size: t })), children: [
+            n,
+            i && /* @__PURE__ */ e("span", { className: "text-muted-foreground text-sm ml-1", children: i })
+          ] })
+        ]
+      }
+    );
+  }
+);
+y.displayName = "StatBadge";
+const z = o("grid w-full", {
+  variants: {
+    cols: {
+      1: "grid-cols-1",
+      2: "grid-cols-2",
+      3: "grid-cols-3",
+      4: "grid-cols-4",
+      5: "grid-cols-5",
+      6: "grid-cols-6"
+    },
+    colsSm: {
+      1: "sm:grid-cols-1",
+      2: "sm:grid-cols-2",
+      3: "sm:grid-cols-3",
+      4: "sm:grid-cols-4",
+      5: "sm:grid-cols-5",
+      6: "sm:grid-cols-6"
+    },
+    colsMd: {
+      1: "md:grid-cols-1",
+      2: "md:grid-cols-2",
+      3: "md:grid-cols-3",
+      4: "md:grid-cols-4",
+      5: "md:grid-cols-5",
+      6: "md:grid-cols-6"
+    },
+    colsLg: {
+      1: "lg:grid-cols-1",
+      2: "lg:grid-cols-2",
+      3: "lg:grid-cols-3",
+      4: "lg:grid-cols-4",
+      5: "lg:grid-cols-5",
+      6: "lg:grid-cols-6"
+    },
+    colsXl: {
+      1: "xl:grid-cols-1",
+      2: "xl:grid-cols-2",
+      3: "xl:grid-cols-3",
+      4: "xl:grid-cols-4",
+      5: "xl:grid-cols-5",
+      6: "xl:grid-cols-6"
+    },
+    gap: {
+      sm: "gap-2",
+      default: "gap-4",
+      lg: "gap-6",
+      xl: "gap-8"
+    }
+  },
+  defaultVariants: {
+    cols: 1,
+    colsMd: 2,
+    colsLg: 3,
+    colsXl: 4,
+    gap: "default"
+  }
+}), G = b.forwardRef(
+  ({
+    className: d,
+    cols: c,
+    colsSm: t,
+    colsMd: m,
+    colsLg: s,
+    colsXl: n,
+    gap: i,
+    children: r,
+    ...g
+  }, u) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: u,
+      className: l(
+        z({ cols: c, colsSm: t, colsMd: m, colsLg: s, colsXl: n, gap: i }),
+        d
+      ),
+      ...g,
+      children: r
+    }
+  )
+);
+G.displayName = "StatBadgeGrid";
+export {
+  y as StatBadge,
+  G as StatBadgeGrid,
+  w as statBadgeContentVariants,
+  z as statBadgeGridVariants,
+  V as statBadgeTitleVariants,
+  S as statBadgeVariants
+};

package/dist/esm/components/status-dot/index.js

@@ -0,0 +1,5 @@
+import { StatusDot as o, statusDotVariants as s } from "./status-dot.js";
+export {
+  o as StatusDot,
+  s as statusDotVariants
+};

package/dist/esm/components/status-dot/status-dot.js

@@ -0,0 +1,51 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cva as m } from "class-variance-authority";
+import * as n from "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";
+const d = m("rounded-full shrink-0", {
+  variants: {
+    variant: {
+      default: "bg-muted-foreground",
+      success: "bg-success",
+      warning: "bg-warning",
+      alert: "bg-destructive",
+      primary: "bg-primary",
+      secondary: "bg-secondary",
+      muted: "bg-muted"
+    },
+    size: {
+      xs: "h-1.5 w-1.5",
+      sm: "h-2 w-2",
+      default: "h-2.5 w-2.5",
+      lg: "h-3 w-3",
+      xl: "h-4 w-4"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "sm"
+  }
+}), p = n.forwardRef(
+  ({ className: t, variant: r, size: a, pulse: s, ...e }, i) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: i,
+      className: u(
+        d({ variant: r, size: a }),
+        s && "animate-pulse",
+        t
+      ),
+      ...e
+    }
+  )
+);
+p.displayName = "StatusDot";
+export {
+  p as StatusDot,
+  d as statusDotVariants
+};

package/dist/esm/components/status-elements/index.js

@@ -0,0 +1,5 @@
+import { HealthDot as o, StatusBars as r } from "./status-elements.js";
+export {
+  o as HealthDot,
+  r as StatusBars
+};

package/dist/esm/components/status-elements/status-elements.js

@@ -0,0 +1,69 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cva as u } from "class-variance-authority";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as s } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const d = {
+  good: "bg-success",
+  medium: "bg-warning",
+  bad: "bg-destructive",
+  critical: "bg-destructive",
+  liquidation: "bg-liquidation"
+};
+function A({ zone: i, size: t = 8 }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: s("rounded-full shrink-0", d[i]),
+      style: { width: t, height: t },
+      "aria-hidden": !0
+    }
+  );
+}
+const l = {
+  good: 3,
+  medium: 2,
+  bad: 1,
+  critical: 1,
+  liquidation: 1
+}, m = 3, g = {
+  good: "success",
+  medium: "warning",
+  bad: "destructive",
+  critical: "destructive",
+  liquidation: "liquidation"
+}, b = u(
+  [
+    "h-[3px] rounded-[1.5px]",
+    "w-full max-w-full grow-0 shrink-0 basis-full"
+  ].join(" "),
+  {
+    variants: {
+      color: {
+        success: "bg-success",
+        warning: "bg-warning",
+        destructive: "bg-destructive",
+        liquidation: "bg-liquidation",
+        "gray-50": "bg-gray-50"
+      }
+    }
+  }
+);
+function x({ zone: i }) {
+  const t = l[i], e = g[i], n = Array.from({ length: m }, (o, r) => {
+    const c = r < t;
+    return {
+      key: r,
+      color: c ? e : "gray-50"
+    };
+  }).reverse();
+  return /* @__PURE__ */ a("div", { className: s("flex flex-wrap gap-0.5 w-2"), "aria-hidden": !0, children: n.map(({ key: o, color: r }) => /* @__PURE__ */ a("div", { className: b({ color: r }) }, o)) });
+}
+export {
+  A as HealthDot,
+  x as StatusBars
+};

package/dist/esm/components/status-triangle/index.js

@@ -0,0 +1,4 @@
+import { StatusTriangle as a } from "./status-triangle.js";
+export {
+  a as StatusTriangle
+};

package/dist/esm/components/status-triangle/status-triangle.js

@@ -0,0 +1,40 @@
+import { jsx as a } from "react/jsx-runtime";
+import "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 m = {
+  xs: 4,
+  sm: 5,
+  md: 6,
+  lg: 8
+};
+function v({
+  isNegative: i,
+  $isNegative: o,
+  size: t = 5,
+  className: n
+}) {
+  const r = i ?? o ?? !1, e = typeof t == "string" ? m[t] || 5 : t, s = e - 1;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: d("inline-flex items-center justify-center", n),
+      style: {
+        width: 0,
+        height: 0,
+        borderLeft: `${s}px solid transparent`,
+        borderRight: `${s}px solid transparent`,
+        borderTop: `${e}px solid ${r ? "hsl(var(--destructive))" : "hsl(var(--success, 142 76% 36%))"}`,
+        borderRadius: "1px",
+        transform: r ? "rotate(0deg)" : "rotate(180deg)"
+      }
+    }
+  );
+}
+export {
+  v as StatusTriangle
+};

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

@@ -0,0 +1,4 @@
+import { Stepper as r } from "./stepper.js";
+export {
+  r as Stepper
+};