@gearbox-protocol/ui-kit 3.14.0-next.9 → 4.0.0-next.2

package/dist/esm/components/base/info-portal/info-portal.js

@@ -0,0 +1,20 @@
+import { jsx as o } from "react/jsx-runtime";
+import { createContext as e, useRef as u, useContext as c } from "react";
+const r = e({
+  current: null
+});
+function s({ children: t }) {
+  const n = u(null);
+  return /* @__PURE__ */ o(r.Provider, { value: n, children: t });
+}
+function f() {
+  return c(r);
+}
+function a() {
+  const t = f();
+  return /* @__PURE__ */ o("div", { ref: t });
+}
+export {
+  a as InfoPortalOut,
+  s as InfoPortalProvider
+};

package/dist/esm/components/base/leverage-input/constants.js

@@ -0,0 +1,9 @@
+class t {
+  static root = "leverage-input-root";
+  static slider = "leverage-input-slider";
+  static value = "leverage-input-value";
+  static reset = "leverage-input-reset";
+}
+export {
+  t as LeverageInputTest
+};

package/dist/esm/components/base/leverage-input/index.js

@@ -0,0 +1,6 @@
+import { LeverageInput as t } from "./leverage-input.js";
+import { LeverageInputTest as p } from "./constants.js";
+export {
+  t as LeverageInput,
+  p as LeverageInputTest
+};

package/dist/esm/components/base/leverage-input/leverage-input.js

@@ -0,0 +1,117 @@
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { useState as I } from "react";
+import { Stack as x } from "../stack/stack.js";
+import { useTitleText as y } from "../text/use-title-text.js";
+import { EditInput as F } from "../../edit-input/edit-input.js";
+import { Slider as j } from "../../slider/slider.js";
+import "../../slider/slider-context.js";
+import { TextButton as O } from "../../text-button/text-button.js";
+import { SimpleTooltip as R } from "../../tooltip/simple-tooltip.js";
+import "../../tooltip/tooltip.js";
+import { useIntlTyped as B, FormattedMessageTyped as T } from "../../typed-intl/index.js";
+import { WithTitle as D } from "../../with-title/with-title.js";
+import { LeverageInputTest as i } from "./constants.js";
+const o = 100, P = 10;
+function Z({
+  value: r,
+  onChange: s,
+  max: n,
+  min: l = 1,
+  title: c,
+  hint: d,
+  reset: a,
+  colorIntervals: w,
+  colorIntervalLabel: N,
+  size: S = "sm"
+}) {
+  const E = B(), C = y(), p = w ?? [
+    { start: l, end: n, color: "additionalSuccess" }
+  ], L = N ?? (p.length > 0 ? E.formatMessage({
+    messageId: "components.leverageInput.available"
+  }) : void 0), [M, u] = I(void 0), [f, g] = I(""), h = M ?? r, v = (e) => {
+    s(_(e, l, n)), u(void 0);
+  }, k = () => {
+    const e = Number.parseFloat(f.replace(",", "."));
+    Number.isFinite(e) && v(e);
+  }, V = p.map((e) => ({
+    ...e,
+    start: e.start * o,
+    end: e.end * o
+  }));
+  return /* @__PURE__ */ t("div", { "data-testid": i.root, children: /* @__PURE__ */ t(
+    D,
+    {
+      size: S,
+      title: /* @__PURE__ */ m(x, { direction: "row", align: "center", justify: "between", gap: "sm", children: [
+        /* @__PURE__ */ m("span", { className: "font-normal", children: [
+          c !== void 0 ? C(c) : /* @__PURE__ */ t(T, { messageId: "components.leverageInput.label" }),
+          d ? /* @__PURE__ */ t("span", { className: "text-muted-foreground ml-1", children: d }) : null
+        ] }),
+        /* @__PURE__ */ m(x, { direction: "row", align: "center", gap: "sm", children: [
+          /* @__PURE__ */ t("div", { className: "flex w-[90px] flex-row flex-nowrap items-center", children: /* @__PURE__ */ t(
+            F,
+            {
+              value: f,
+              placeholder: "0",
+              label: `×${b(h)}`,
+              textButtonProps: {
+                className: "inline-flex items-center whitespace-nowrap"
+              },
+              "data-testid": i.value,
+              onEditModeChange: (e) => {
+                e && g(b(r));
+              },
+              onChange: (e) => g(e.target.value),
+              onSubmit: k
+            }
+          ) }),
+          a ? /* @__PURE__ */ t(
+            R,
+            {
+              placement: "top",
+              triangle: !1,
+              triggerClassName: "inline-flex shrink-0",
+              title: /* @__PURE__ */ t(
+                O,
+                {
+                  buttonColor: "secondaryDashed",
+                  size: "sm",
+                  className: "max-w-full truncate",
+                  onClick: a.onClick,
+                  "data-testid": a.testId ?? i.reset,
+                  children: /* @__PURE__ */ t(T, { messageId: "components.leverageInput.reset" })
+                }
+              ),
+              children: a.tooltip
+            }
+          ) : null
+        ] })
+      ] }),
+      children: /* @__PURE__ */ t(
+        j,
+        {
+          from: l * o,
+          to: n * o,
+          precision: o,
+          value: h * o,
+          colorIntervals: V,
+          colorIntervalLabel: L,
+          markerStep: n > P ? 200 : 100,
+          "data-testid": i.slider,
+          onChangeValue: (e) => u(e / o),
+          onSubmitValue: (e) => v(e / o)
+        }
+      )
+    }
+  ) });
+}
+function _(r, s, n) {
+  return Math.min(Math.max(r, s), n);
+}
+function b(r) {
+  return (Math.round(r * 100) / 100).toFixed(2);
+}
+export {
+  Z as LeverageInput,
+  i as LeverageInputTest
+};

package/dist/esm/components/base/liquidation-params-table/constants.js

@@ -0,0 +1,6 @@
+class t {
+  static root = "liquidation-params-table-root";
+}
+export {
+  t as LiquidationParamsTableTest
+};

package/dist/esm/components/base/liquidation-params-table/index.js

@@ -0,0 +1,6 @@
+import { LiquidationParamsTableTest as o } from "./constants.js";
+import { LiquidationParamsTable as e } from "./liquidation-params-table.js";
+export {
+  e as LiquidationParamsTable,
+  o as LiquidationParamsTableTest
+};

package/dist/esm/components/base/liquidation-params-table/liquidation-params-table.js

@@ -0,0 +1,62 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import "react-intl";
+import "../../buttons/button/button.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import "clsx";
+import "tailwind-merge";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+import "../../table/grid-table.js";
+import "../../skeleton/skeleton.js";
+import { Table as d, TableHeader as c, TableRow as s, TableHead as m, TableBody as p, TableCell as r } from "../../table/table.js";
+import { FormattedMessageTyped as t } from "../../typed-intl/index.js";
+import { LiquidationParamsTableTest as u } from "./constants.js";
+function a(o) {
+  return o / 100;
+}
+function z({
+  data: o
+}) {
+  const n = a(o.liquidationPremium), l = a(o.liquidationFee);
+  return /* @__PURE__ */ i(
+    d,
+    {
+      size: "sm",
+      className: "min-w-[480px]",
+      "data-testid": u.root,
+      children: [
+        /* @__PURE__ */ e(c, { children: /* @__PURE__ */ i(s, { children: [
+          /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(t, { messageId: "components.liquidationParamsTable.lt" }) }),
+          /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(t, { messageId: "components.liquidationParamsTable.penalty" }) }),
+          /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(t, { messageId: "components.liquidationParamsTable.premium" }) }),
+          /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(t, { messageId: "components.liquidationParamsTable.fee" }) })
+        ] }) }),
+        /* @__PURE__ */ e(p, { children: /* @__PURE__ */ i(s, { children: [
+          /* @__PURE__ */ i(r, { className: "font-medium", children: [
+            a(o.liquidationThreshold).toFixed(2),
+            "%"
+          ] }),
+          /* @__PURE__ */ i(r, { className: "font-medium", children: [
+            (n + l).toFixed(2),
+            "%"
+          ] }),
+          /* @__PURE__ */ i(r, { className: "font-medium", children: [
+            n.toFixed(2),
+            "%"
+          ] }),
+          /* @__PURE__ */ i(r, { className: "font-medium", children: [
+            l.toFixed(2),
+            "%"
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  z as LiquidationParamsTable,
+  u as LiquidationParamsTableTest
+};

package/dist/esm/components/base/liquidation-price-block/constants.js

@@ -0,0 +1,8 @@
+class o {
+  static root = "liquidation-price-block-root";
+  static value = "liquidation-price-block-value";
+  static valueTo = "liquidation-price-block-value-to";
+}
+export {
+  o as LiquidationPriceBlockTest
+};

package/dist/esm/components/base/liquidation-price-block/index.js

@@ -0,0 +1,6 @@
+import { LiquidationPriceBlockTest as r } from "./constants.js";
+import { LiquidationPriceBlock as t } from "./liquidation-price-block.js";
+export {
+  t as LiquidationPriceBlock,
+  r as LiquidationPriceBlockTest
+};

package/dist/esm/components/base/liquidation-price-block/liquidation-price-block.js

@@ -0,0 +1,62 @@
+import { jsx as e, jsxs as v } from "react/jsx-runtime";
+import { useTitleText as g } from "../text/use-title-text.js";
+import { FadeoutLoading as m } from "../../fadeout-loading/fadeout-loading.js";
+import { FormattedNumberString as P } from "../../formatted-number/formatted-number.js";
+import { HealthDot as T } from "../../status-elements/status-elements.js";
+import { FormattedMessageTyped as s } from "../../typed-intl/index.js";
+import { VerticalIndicator as h } from "../../vertical-indicator/vertical-indicator.js";
+import { bnToLiquidationPriceView as x } from "../../../utils/parse-input-to-bn.js";
+import { LiquidationPriceBlockTest as r } from "./constants.js";
+function j({
+  price: i,
+  priceTo: o,
+  pricePair: t,
+  zone: l,
+  isLoading: a,
+  title: n,
+  tip: u,
+  testId: p
+}) {
+  const f = g(), d = o !== void 0;
+  return /* @__PURE__ */ e(
+    h,
+    {
+      align: "center",
+      dimPreviousValue: !1,
+      "data-testid": p ?? r.root,
+      label: n !== void 0 ? f(n) : /* @__PURE__ */ e(s, { messageId: "components.liquidationPriceBlock.label" }),
+      tip: u ?? /* @__PURE__ */ e(s, { messageId: "components.liquidationPriceBlock.tip" }),
+      value: /* @__PURE__ */ e(m, { loading: a, children: /* @__PURE__ */ e(
+        c,
+        {
+          price: i,
+          zone: d ? void 0 : l,
+          testId: r.value
+        }
+      ) }),
+      valueTo: d ? /* @__PURE__ */ e(m, { loading: a, children: /* @__PURE__ */ e(
+        c,
+        {
+          price: o ?? null,
+          zone: l,
+          testId: r.valueTo
+        }
+      ) }) : void 0,
+      valueDescription: t
+    }
+  );
+}
+function c({
+  price: i,
+  zone: o,
+  testId: t
+}) {
+  return /* @__PURE__ */ v("span", { className: "inline-flex items-center", "data-testid": t, children: [
+    i === void 0 ? "—" : i === null || i === 0n ? "N/A" : /* @__PURE__ */ e(P, { value: x(i) }),
+    o ? /* @__PURE__ */ e("span", { className: "ml-1.5", children: /* @__PURE__ */ e(T, { zone: o }) }) : null
+  ] });
+}
+export {
+  j as LiquidationPriceBlock,
+  r as LiquidationPriceBlockTest
+};

package/dist/esm/components/base/manage-pane/constants.js

@@ -0,0 +1,11 @@
+class t {
+  static root = "manage-pane-root";
+  static tabs = "manage-pane-tabs";
+  static dropdown = "manage-pane-dropdown";
+  static body = "manage-pane-body";
+  static message = "manage-pane-message";
+  static tab = (a) => `manage-pane-tab-${a}`;
+}
+export {
+  t as ManagePaneTest
+};

package/dist/esm/components/base/manage-pane/index.js

@@ -0,0 +1,10 @@
+import { ManagePane as n, ManagePaneActionTab as g, ManagePaneMessage as o, ManagePaneTab as M, ManagePaneTabDropdown as P } from "./manage-pane.js";
+import { ManagePaneTest as t } from "./constants.js";
+export {
+  n as ManagePane,
+  g as ManagePaneActionTab,
+  o as ManagePaneMessage,
+  M as ManagePaneTab,
+  P as ManagePaneTabDropdown,
+  t as ManagePaneTest
+};

package/dist/esm/components/base/manage-pane/manage-pane.js

@@ -0,0 +1,140 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { faEllipsis as C } from "@fortawesome/free-solid-svg-icons";
+import { Children as A, isValidElement as m } from "react";
+import { InfoPortalProvider as _, InfoPortalOut as D } from "../info-portal/info-portal.js";
+import { SegmentedTabs as E, SEGMENTED_TABS_INACTIVE_BUTTON_CLASS as N } from "../segmented-tabs/segmented-tabs.js";
+import { Stack as r } from "../stack/stack.js";
+import { useTitleText as x } from "../text/use-title-text.js";
+import { Button as v } from "../../buttons/button/button.js";
+import { StyledDialogContainer as B } from "../../client-adapters/styled-dialog-container/styled-dialog-container.js";
+import { FaIcon as j } from "../../icons/fa-icon.js";
+import { SimpleDropdown as k } from "../../simple-dropdown/simple-dropdown.js";
+import { SimpleDropdownMenuItem as z } from "../../simple-dropdown/simple-dropdown-menu-item.js";
+import { ManagePaneTest as o } from "./constants.js";
+function O(n) {
+  return null;
+}
+function V(n) {
+  return null;
+}
+function F(n) {
+  return null;
+}
+function G(n) {
+  return m(n) && n.type === O;
+}
+function L(n) {
+  return m(n) && n.type === V;
+}
+function U(n) {
+  return m(n) && n.type === F;
+}
+function et({
+  children: n,
+  activeTab: c,
+  onTabChange: h,
+  header: T,
+  footer: b,
+  actions: s,
+  testId: M
+}) {
+  const f = x(), p = A.toArray(n), u = p.filter(G), I = p.find(L), l = p.filter(U), P = u.filter((t) => !t.props.hidden), S = u.find((t) => t.props.id === c)?.props.children, i = I?.props.items ?? [], w = new Set(l.map((t) => t.props.id)), d = [
+    ...P.map((t) => ({
+      id: t.props.id,
+      item: f(t.props.title),
+      disabled: t.props.disabled,
+      testId: o.tab(t.props.id)
+    })),
+    ...l.map((t) => ({
+      id: t.props.id,
+      item: f(t.props.title),
+      testId: o.tab(t.props.id)
+    }))
+  ];
+  return /* @__PURE__ */ e(_, { children: /* @__PURE__ */ a(r, { gap: "md", "data-testid": M ?? o.root, children: [
+    T,
+    d.length > 0 || i.length > 0 || s ? /* @__PURE__ */ a(r, { direction: "row", align: "center", gap: "sm", children: [
+      d.length > 0 ? /* @__PURE__ */ e(
+        E,
+        {
+          items: d,
+          activeTab: c,
+          onTabChange: (t) => {
+            const g = l.find((y) => y.props.id === t);
+            if (g) {
+              g.props.onClick();
+              return;
+            }
+            w.has(t) || h(t);
+          },
+          testId: o.tabs
+        }
+      ) : null,
+      i.length > 0 || s ? /* @__PURE__ */ a(
+        r,
+        {
+          direction: "row",
+          align: "center",
+          gap: "sm",
+          className: "ml-auto",
+          children: [
+            i.length > 0 ? /* @__PURE__ */ e(
+              k,
+              {
+                title: /* @__PURE__ */ e(
+                  v,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "md",
+                    className: N,
+                    "aria-label": "More actions",
+                    "data-testid": o.dropdown,
+                    children: /* @__PURE__ */ e(j, { icon: C, className: "size-4" })
+                  }
+                ),
+                asChild: !0,
+                placement: "bottom",
+                align: "end",
+                children: i.map((t) => /* @__PURE__ */ e(
+                  z,
+                  {
+                    onSelect: t.onSelect,
+                    children: t.title
+                  },
+                  t.id
+                ))
+              }
+            ) : null,
+            s
+          ]
+        }
+      ) : null
+    ] }) : null,
+    /* @__PURE__ */ a(
+      B,
+      {
+        "data-testid": o.body,
+        "data-aside-form-top": !0,
+        children: [
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(D, {}) }),
+          S
+        ]
+      }
+    ),
+    b
+  ] }) });
+}
+function ot({
+  children: n
+}) {
+  return /* @__PURE__ */ e(r, { gap: "sm", "data-testid": o.message, children: n });
+}
+export {
+  et as ManagePane,
+  F as ManagePaneActionTab,
+  ot as ManagePaneMessage,
+  O as ManagePaneTab,
+  V as ManagePaneTabDropdown,
+  o as ManagePaneTest
+};

package/dist/esm/components/base/more-accordion/constants.js

@@ -0,0 +1,7 @@
+class r {
+  static root = "more-accordion-root";
+  static trigger = "more-accordion-trigger";
+}
+export {
+  r as MoreAccordionTest
+};

package/dist/esm/components/base/more-accordion/index.js

@@ -0,0 +1,6 @@
+import { MoreAccordionTest as e } from "./constants.js";
+import { MoreAccordion as t } from "./more-accordion.js";
+export {
+  t as MoreAccordion,
+  e as MoreAccordionTest
+};

package/dist/esm/components/base/more-accordion/more-accordion.js

@@ -0,0 +1,51 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { faChevronDown as d } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as l } from "../../icons/fa-icon.js";
+import { SimpleAccordion as p, SimpleAccordionItem as f } from "../../simple-accordion/simple-accordion.js";
+import { useTitleText as u } from "../text/use-title-text.js";
+import { MoreAccordionTest as t } from "./constants.js";
+function A({
+  children: i,
+  moreMessage: n = "components.moreAccordion.more",
+  lessMessage: s = "components.moreAccordion.less"
+}) {
+  const r = u(), [a, m] = c(!1);
+  return /* @__PURE__ */ e("div", { "data-testid": t.root, children: /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(
+    f,
+    {
+      value: "more",
+      last: !0,
+      hideIcon: !0,
+      onClick: m,
+      triggerClassName: "py-0 font-normal justify-center group",
+      className: "border-b-0",
+      title: /* @__PURE__ */ o(
+        "div",
+        {
+          className: "grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3",
+          "data-testid": t.trigger,
+          children: [
+            /* @__PURE__ */ e("div", { className: "border-b border-gray-20" }),
+            /* @__PURE__ */ o("span", { className: "inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium leading-[17px] text-secondary-foreground transition-colors group-hover:text-white", children: [
+              r(a ? s : n),
+              /* @__PURE__ */ e(
+                l,
+                {
+                  icon: d,
+                  className: "size-3 transition-transform group-data-[state=open]:rotate-180"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e("div", { className: "border-b border-gray-20" })
+          ]
+        }
+      ),
+      description: /* @__PURE__ */ e("div", { className: "px-4 pb-0 pt-4", children: i })
+    }
+  ) }) });
+}
+export {
+  A as MoreAccordion,
+  t as MoreAccordionTest
+};

package/dist/esm/components/base/nested-info-stack/constants.js

@@ -0,0 +1,6 @@
+class o {
+  static root = "nested-info-stack-root";
+}
+export {
+  o as NestedInfoStackTest
+};

package/dist/esm/components/base/nested-info-stack/index.js

@@ -0,0 +1,6 @@
+import { NestedInfoStackTest as o } from "./constants.js";
+import { NestedInfoStack as r } from "./nested-info-stack.js";
+export {
+  r as NestedInfoStack,
+  o as NestedInfoStackTest
+};

package/dist/esm/components/base/nested-info-stack/nested-info-stack.js

@@ -0,0 +1,20 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Stack as r } from "../stack/stack.js";
+import { NestedInfoStackTest as t } from "./constants.js";
+function l({
+  children: e
+}) {
+  return /* @__PURE__ */ o(
+    r,
+    {
+      gap: "sm",
+      className: "relative py-[2px] pr-0 pl-3 before:absolute before:top-0 before:left-0 before:block before:h-full before:border-l-2 before:border-l-gray-40 before:content-['']",
+      "data-testid": t.root,
+      children: e
+    }
+  );
+}
+export {
+  l as NestedInfoStack,
+  t as NestedInfoStackTest
+};

package/dist/esm/components/base/page-title/constants.js

@@ -0,0 +1,6 @@
+class e {
+  static root = "page-title-root";
+}
+export {
+  e as PageTitleTest
+};

package/dist/esm/components/base/page-title/index.js

@@ -0,0 +1,6 @@
+import { PageTitle as o } from "./page-title.js";
+import { PageTitleTest as T } from "./constants.js";
+export {
+  o as PageTitle,
+  T as PageTitleTest
+};

package/dist/esm/components/base/page-title/page-title.js

@@ -0,0 +1,38 @@
+import { jsxs as c, Fragment as d, jsx as g } from "react/jsx-runtime";
+import { useIntlTyped as T } from "../../typed-intl/index.js";
+import { Typography as x } from "../../typography/typography.js";
+import { PageTitleTest as a } from "./constants.js";
+function r(t) {
+  return typeof t == "string" || !!t && typeof t == "object" && "messageId" in t;
+}
+function i(t, o) {
+  return o === void 0 ? "" : typeof o == "string" ? o : t.formatMessage(o);
+}
+function j({
+  title: t,
+  browserTitle: o,
+  head: s,
+  as: m = "h1",
+  className: f
+}) {
+  const e = T(), p = r(t) ? i(e, t) : t, n = i(
+    e,
+    o ?? (r(t) ? t : void 0)
+  );
+  return /* @__PURE__ */ c(d, { children: [
+    n ? s?.(n) : null,
+    /* @__PURE__ */ g(
+      x,
+      {
+        as: m,
+        className: f ?? "m-0 text-3xl leading-none font-medium",
+        "data-testid": a.root,
+        children: p
+      }
+    )
+  ] });
+}
+export {
+  j as PageTitle,
+  a as PageTitleTest
+};

package/dist/esm/components/base/pool-apy-breakdown-card/constants.js

@@ -0,0 +1,7 @@
+class a {
+  static root = "pool-apy-breakdown-card-root";
+  static value = "pool-apy-breakdown-card-value";
+}
+export {
+  a as PoolApyBreakdownCardTest
+};

package/dist/esm/components/base/pool-apy-breakdown-card/index.js

@@ -0,0 +1,6 @@
+import { PoolApyBreakdownCardTest as e } from "./constants.js";
+import { PoolApyBreakdownCard as d } from "./pool-apy-breakdown-card.js";
+export {
+  d as PoolApyBreakdownCard,
+  e as PoolApyBreakdownCardTest
+};