@gearbox-protocol/ui-kit 3.14.0-next.8 → 4.0.0-next.1

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

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

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,9 @@
+import { ManagePane as n, ManagePaneMessage as g, ManagePaneTab as o, ManagePaneTabDropdown as M } from "./manage-pane.js";
+import { ManagePaneTest as P } from "./constants.js";
+export {
+  n as ManagePane,
+  g as ManagePaneMessage,
+  o as ManagePaneTab,
+  M as ManagePaneTabDropdown,
+  P as ManagePaneTest
+};

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

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

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,32 @@
+import { jsxs as a, Fragment as f, jsx as g } from "react/jsx-runtime";
+import { useIntlTyped as p } from "../../typed-intl/index.js";
+import { Typography as c } from "../../typography/typography.js";
+import { PageTitleTest as T } from "./constants.js";
+function o(e, t) {
+  return typeof t == "string" ? t : e.formatMessage(t);
+}
+function y({
+  title: e,
+  browserTitle: t,
+  head: n,
+  as: i = "h1",
+  className: s
+}) {
+  const r = p(), m = o(r, e), l = o(r, t ?? e);
+  return /* @__PURE__ */ a(f, { children: [
+    n?.(l),
+    /* @__PURE__ */ g(
+      c,
+      {
+        as: i,
+        className: s ?? "m-0 text-3xl leading-none font-medium",
+        "data-testid": T.root,
+        children: m
+      }
+    )
+  ] });
+}
+export {
+  y as PageTitle,
+  T as PageTitleTest
+};

package/dist/esm/components/base/review-button/constants.js

@@ -0,0 +1,7 @@
+class r {
+  static root = "review-button-root";
+  static error = "review-button-error";
+}
+export {
+  r as ReviewButtonTest
+};

package/dist/esm/components/base/review-button/index.js

@@ -0,0 +1,6 @@
+import { ReviewButton as o } from "./review-button.js";
+import { ReviewButtonTest as f } from "./constants.js";
+export {
+  o as ReviewButton,
+  f as ReviewButtonTest
+};

package/dist/esm/components/base/review-button/review-button.js

@@ -0,0 +1,36 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { Stack as d } from "../stack/stack.js";
+import { Button as n } from "../../buttons/button/button.js";
+import { FormattedMessageTyped as o } from "../../typed-intl/index.js";
+import { Typography as p } from "../../typography/typography.js";
+import { ReviewButtonTest as r } from "./constants.js";
+function h({
+  disabled: m,
+  error: e,
+  onClick: s,
+  label: i = "dialogs.common.review"
+}) {
+  return /* @__PURE__ */ a(d, { gap: "xs", children: [
+    e ? /* @__PURE__ */ t(
+      p,
+      {
+        className: "text-destructive text-sm",
+        "data-testid": r.error,
+        children: /* @__PURE__ */ t(o, { messageId: e })
+      }
+    ) : null,
+    /* @__PURE__ */ t(
+      n,
+      {
+        disabled: m,
+        onClick: s,
+        "data-testid": r.root,
+        children: /* @__PURE__ */ t(o, { messageId: i })
+      }
+    )
+  ] });
+}
+export {
+  h as ReviewButton,
+  r as ReviewButtonTest
+};

package/dist/esm/components/base/section-heading/constants.js

@@ -0,0 +1,6 @@
+class o {
+  static root = "section-heading-root";
+}
+export {
+  o as SectionHeadingTest
+};

package/dist/esm/components/base/section-heading/index.js

@@ -0,0 +1,6 @@
+import { SectionHeading as t } from "./section-heading.js";
+import { SectionHeadingTest as n } from "./constants.js";
+export {
+  t as SectionHeading,
+  n as SectionHeadingTest
+};

package/dist/esm/components/base/section-heading/section-heading.js

@@ -0,0 +1,26 @@
+import { jsx as i } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as m } from "../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+import { SectionHeadingTest as r } from "./constants.js";
+function g({
+  children: t,
+  className: o
+}) {
+  return /* @__PURE__ */ i(
+    "h2",
+    {
+      className: m("m-0 text-[22px] leading-[115%] font-medium", o),
+      "data-testid": r.root,
+      children: t
+    }
+  );
+}
+export {
+  g as SectionHeading,
+  r as SectionHeadingTest
+};

package/dist/esm/components/base/segmented-tabs/constants.js

@@ -0,0 +1,6 @@
+class e {
+  static root = "segmented-tabs-root";
+}
+export {
+  e as SegmentedTabsTest
+};

package/dist/esm/components/base/segmented-tabs/index.js

@@ -0,0 +1,7 @@
+import { SEGMENTED_TABS_INACTIVE_BUTTON_CLASS as S, SegmentedTabs as t } from "./segmented-tabs.js";
+import { SegmentedTabsTest as o } from "./constants.js";
+export {
+  S as SEGMENTED_TABS_INACTIVE_BUTTON_CLASS,
+  t as SegmentedTabs,
+  o as SegmentedTabsTest
+};

package/dist/esm/components/base/segmented-tabs/segmented-tabs.js

@@ -0,0 +1,62 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Link as S } from "react-router-dom";
+import { Stack as v } from "../stack/stack.js";
+import { Button as n } from "../../buttons/button/button.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as y } from "../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+import { SegmentedTabsTest as C } from "./constants.js";
+const N = "bg-gray-30 border-gray-30 hover:bg-gray-40 hover:border-gray-40";
+function D({
+  items: a,
+  activeTab: s,
+  onTabChange: p,
+  getTestId: c,
+  className: d,
+  buttonClassName: u,
+  testId: g
+}) {
+  return /* @__PURE__ */ r(
+    v,
+    {
+      direction: "row",
+      gap: "sm",
+      className: d,
+      "data-testid": g ?? C.root,
+      children: a.map(({ id: t, item: e, disabled: l, href: i, testId: b, onClick: T }, f) => {
+        const o = s === t, h = y(
+          u,
+          o ? void 0 : N
+        ), m = {
+          size: "md",
+          variant: o ? "neutral" : "ghost",
+          className: h,
+          disabled: l,
+          "data-testid": b ?? c?.(t),
+          "aria-current": o ? "step" : void 0
+        };
+        return i ? /* @__PURE__ */ r(n, { ...m, asChild: !0, children: /* @__PURE__ */ r(S, { to: i, children: e }) }, t) : /* @__PURE__ */ r(
+          n,
+          {
+            ...m,
+            type: "button",
+            onClick: () => {
+              T?.(), p?.(t, f);
+            },
+            children: e
+          },
+          t
+        );
+      })
+    }
+  );
+}
+export {
+  N as SEGMENTED_TABS_INACTIVE_BUTTON_CLASS,
+  D as SegmentedTabs,
+  C as SegmentedTabsTest
+};

package/dist/esm/components/base/spacing.js

@@ -0,0 +1,17 @@
+const m = {
+  xs: { mobile: 4, desktop: 8 },
+  sm: { mobile: 8, desktop: 16 },
+  md: { mobile: 12, desktop: 24 },
+  lg: { mobile: 24, desktop: 48 },
+  xl: { mobile: 32, desktop: 64 }
+}, o = {
+  xs: "h-1 md:h-2",
+  sm: "h-2 md:h-4",
+  md: "h-3 md:h-6",
+  lg: "h-6 md:h-12",
+  xl: "h-8 md:h-16"
+};
+export {
+  o as SPACE_HEIGHT,
+  m as SPACE_PX
+};

package/dist/esm/components/base/stack/constants.js

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

package/dist/esm/components/base/stack/index.js

@@ -0,0 +1,6 @@
+import { Stack as r } from "./stack.js";
+import { StackTest as a } from "./constants.js";
+export {
+  r as Stack,
+  a as StackTest
+};

package/dist/esm/components/base/stack/stack.js

@@ -0,0 +1,61 @@
+import { jsx as m } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as p } from "../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+import { StackTest as b } from "./constants.js";
+const a = {
+  row: "flex-row",
+  col: "flex-col"
+}, f = {
+  none: "gap-0",
+  xs: "gap-0.5",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6",
+  xl: "gap-8"
+}, l = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+}, d = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between"
+};
+function N({
+  direction: o = "col",
+  gap: r = "none",
+  align: t,
+  justify: e,
+  wrap: s = !1,
+  className: n,
+  children: i,
+  ...c
+}) {
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: p(
+        "flex",
+        a[o],
+        f[r],
+        t ? l[t] : void 0,
+        e ? d[e] : void 0,
+        s ? "flex-wrap" : void 0,
+        n
+      ),
+      ...c,
+      children: i
+    }
+  );
+}
+export {
+  N as Stack,
+  b as StackTest
+};

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

@@ -0,0 +1,8 @@
+class a {
+  static root = "stat-badge-root";
+  static grid = "stat-badge-grid-root";
+  static action = "stat-badge-action";
+}
+export {
+  a as StatBadgeTest
+};

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

@@ -0,0 +1,7 @@
+import { StatBadge as e, StatBadgeGrid as r } from "./stat-badge.js";
+import { StatBadgeTest as o } from "./constants.js";
+export {
+  e as StatBadge,
+  r as StatBadgeGrid,
+  o as StatBadgeTest
+};