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

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

@@ -0,0 +1,65 @@
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { FormattedMessageTyped as d } from "../../typed-intl/index.js";
+import { VerticalIndicator as i } from "../../vertical-indicator/vertical-indicator.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import "clsx";
+import "tailwind-merge";
+import "sonner";
+import { percentTemplate as m } from "../../../utils/format-money.js";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+import { SideCard as n } from "../side-card/side-card.js";
+import { PoolApyBreakdownCardTest as p } from "./constants.js";
+function t({
+  title: r,
+  value: e
+}) {
+  return /* @__PURE__ */ o(
+    i,
+    {
+      size: "sm",
+      label: /* @__PURE__ */ o(d, { messageId: r }),
+      value: /* @__PURE__ */ o("span", { "data-testid": p.value, children: e === void 0 ? "—" : m(e / 100) })
+    }
+  );
+}
+function T({
+  data: r
+}) {
+  return /* @__PURE__ */ a(
+    n,
+    {
+      title: "components.poolApyBreakdownCard.title",
+      testId: p.root,
+      children: [
+        /* @__PURE__ */ o(
+          t,
+          {
+            title: "components.poolApyBreakdownCard.apy1d",
+            value: r?.apy1d
+          }
+        ),
+        /* @__PURE__ */ o(
+          t,
+          {
+            title: "components.poolApyBreakdownCard.apy7d",
+            value: r?.apy7d
+          }
+        ),
+        /* @__PURE__ */ o(
+          t,
+          {
+            title: "components.poolApyBreakdownCard.apy30d",
+            value: r?.apy30d
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  T as PoolApyBreakdownCard,
+  p as PoolApyBreakdownCardTest
+};

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/side-card/constants.js

@@ -0,0 +1,8 @@
+class d {
+  static root = "side-card-root";
+  static title = "side-card-title";
+  static body = "side-card-body";
+}
+export {
+  d as SideCardTest
+};

package/dist/esm/components/base/side-card/index.js

@@ -0,0 +1,6 @@
+import { SideCardTest as d } from "./constants.js";
+import { SideCard as t } from "./side-card.js";
+export {
+  t as SideCard,
+  d as SideCardTest
+};

package/dist/esm/components/base/side-card/side-card.js

@@ -0,0 +1,57 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useTitleText as l } from "../text/use-title-text.js";
+import { Typography as p } from "../../typography/typography.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as n } from "../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+import { SideCardTest as r } from "./constants.js";
+function j({
+  title: o,
+  tip: i,
+  children: d,
+  className: a,
+  testId: m
+}) {
+  const s = l();
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: n(
+        "@container flex w-full flex-col gap-4 rounded-lg border border-border bg-card p-4 sm:p-6",
+        a
+      ),
+      "data-testid": m ?? r.root,
+      children: [
+        /* @__PURE__ */ t("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ e(
+            p,
+            {
+              as: "span",
+              variant: "body",
+              className: "m-0 text-base font-semibold leading-none text-card-foreground",
+              "data-testid": r.title,
+              children: s(o)
+            }
+          ),
+          i
+        ] }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: "grid grid-cols-1 gap-4 @[24rem]:grid-cols-2 @[40rem]:grid-cols-3",
+            "data-testid": r.body,
+            children: d
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  j as SideCard,
+  r as SideCardTest
+};

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
+};

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

@@ -0,0 +1,115 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Stack as g } from "../stack/stack.js";
+import { useTitleText as f } from "../text/use-title-text.js";
+import { Skeleton as u } from "../../skeleton/skeleton.js";
+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";
+import { StatBadgeTest as m } from "./constants.js";
+const p = {
+  sm: "p-4",
+  md: "p-5",
+  default: "p-6"
+}, x = {
+  sm: "mb-2.5",
+  md: "mb-2",
+  default: "mb-3"
+}, S = {
+  sm: "text-xs leading-[0.8125rem]",
+  md: "text-xs leading-[0.9rem]",
+  default: "text-sm leading-[1.0625rem]"
+}, h = {
+  sm: "text-sm leading-[1.0625rem]",
+  md: "text-base leading-[1.25rem]",
+  default: "text-xl leading-[1.5625rem]"
+};
+function A({
+  title: i,
+  value: r,
+  isLoading: o = !1,
+  size: t = "default",
+  action: l,
+  className: s,
+  testId: n
+}) {
+  const c = f();
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: d(
+        "h-full w-full rounded-lg border border-border bg-card",
+        p[t],
+        s
+      ),
+      "data-testid": n ?? m.root,
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: d(
+              "flex items-center justify-between gap-2",
+              x[t]
+            ),
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: d("font-medium text-muted-foreground", S[t]),
+                  children: c(i)
+                }
+              ),
+              l != null ? /* @__PURE__ */ e("div", { className: "shrink-0", "data-testid": m.action, children: l }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: d("font-medium text-foreground", h[t]), children: /* @__PURE__ */ e(u, { width: 80, loading: o, children: /* @__PURE__ */ e(g, { gap: "xs", align: "start", children: r }) }) })
+      ]
+    }
+  );
+}
+const b = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4"
+}, I = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4"
+}, _ = {
+  sm: "gap-2",
+  default: "gap-4",
+  lg: "gap-6"
+};
+function B({
+  cols: i = 1,
+  colsLg: r,
+  gap: o = "default",
+  children: t,
+  className: l
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: d(
+        "grid w-full",
+        b[i],
+        r ? I[r] : void 0,
+        _[o],
+        l
+      ),
+      "data-testid": m.grid,
+      children: t
+    }
+  );
+}
+export {
+  A as StatBadge,
+  B as StatBadgeGrid,
+  m as StatBadgeTest
+};

package/dist/esm/components/base/sticky-bar/constants.js

@@ -0,0 +1,6 @@
+class o {
+  static root = "sticky-bar-root";
+}
+export {
+  o as StickyBarTest
+};

package/dist/esm/components/base/sticky-bar/index.js

@@ -0,0 +1,6 @@
+import { StickyBar as o } from "./sticky-bar.js";
+import { StickyBarTest as a } from "./constants.js";
+export {
+  o as StickyBar,
+  a as StickyBarTest
+};

package/dist/esm/components/base/sticky-bar/sticky-bar.js

@@ -0,0 +1,31 @@
+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 { StickyBarTest as i } from "./constants.js";
+function f({
+  children: t,
+  className: r,
+  testId: o = i.root
+}) {
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: p(
+        "sticky top-0 z-20 -mx-1 px-1 pt-3 sm:pt-4",
+        "bg-background/75 backdrop-blur-md backdrop-saturate-150",
+        r
+      ),
+      "data-testid": o,
+      children: t
+    }
+  );
+}
+export {
+  f as StickyBar,
+  i as StickyBarTest
+};

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

@@ -0,0 +1,7 @@
+class r {
+  static root = "strategy-apy-breakdown-card-root";
+  static row = "strategy-apy-breakdown-card-row";
+}
+export {
+  r as StrategyApyBreakdownCardTest
+};

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

@@ -0,0 +1,6 @@
+import { StrategyApyBreakdownCardTest as t } from "./constants.js";
+import { StrategyApyBreakdownCard as o } from "./strategy-apy-breakdown-card.js";
+export {
+  o as StrategyApyBreakdownCard,
+  t as StrategyApyBreakdownCardTest
+};

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

@@ -0,0 +1,51 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { HelpTip as m } from "../../help-tip/help-tip.js";
+import { FormattedMessageTyped as a } from "../../typed-intl/index.js";
+import { VerticalIndicator as n } from "../../vertical-indicator/vertical-indicator.js";
+import { SideCard as l } from "../side-card/side-card.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 { ApyValue as o } from "../values/scalars.js";
+import "../../badge/badge.js";
+import { StrategyApyBreakdownCardTest as i } from "./constants.js";
+function e({
+  title: t,
+  children: p
+}) {
+  return /* @__PURE__ */ r(
+    n,
+    {
+      size: "sm",
+      "data-testid": i.row,
+      label: /* @__PURE__ */ r(a, { messageId: t }),
+      value: p
+    }
+  );
+}
+function R({
+  data: t
+}) {
+  return /* @__PURE__ */ d(
+    l,
+    {
+      title: "components.strategyApyBreakdownCard.title",
+      testId: i.root,
+      tip: /* @__PURE__ */ r(m, { iconSize: 14, placement: "top", children: /* @__PURE__ */ r(a, { messageId: "components.strategyApyBreakdownCard.formula" }) }),
+      children: [
+        /* @__PURE__ */ r(e, { title: "components.strategyApyBreakdownCard.collateralApy", children: /* @__PURE__ */ r(o, { data: t.collateralApy }) }),
+        /* @__PURE__ */ r(e, { title: "components.strategyApyBreakdownCard.baseBorrowRate", children: /* @__PURE__ */ r(o, { data: t.borrowApy }) }),
+        /* @__PURE__ */ r(e, { title: "components.strategyApyBreakdownCard.additionalBorrowRate", children: /* @__PURE__ */ r(o, { data: t.additionalBorrowApy }) })
+      ]
+    }
+  );
+}
+export {
+  R as StrategyApyBreakdownCard,
+  i as StrategyApyBreakdownCardTest
+};

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

@@ -0,0 +1,8 @@
+class a {
+  static root = "tabber-root";
+  static bar = "tabber-bar";
+  static section = "tabber-section";
+}
+export {
+  a as TabberTest
+};

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

@@ -0,0 +1,10 @@
+import { Tabber as b, TabberSection as o, isTabber as t } from "./tabber.js";
+import { useDetailScrollSpy as T } from "./use-detail-scroll-spy.js";
+import { TabberTest as f } from "./constants.js";
+export {
+  b as Tabber,
+  o as TabberSection,
+  f as TabberTest,
+  t as isTabber,
+  T as useDetailScrollSpy
+};