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

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

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

@@ -1,83 +1,103 @@
-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) {
+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 B(e) {
+function V(n) {
   return null;
 }
-function j(e) {
-  return c(e) && e.type === v;
+function F(n) {
+  return null;
+}
+function G(n) {
+  return m(n) && n.type === O;
+}
+function L(n) {
+  return m(n) && n.type === V;
 }
-function z(e) {
-  return c(e) && e.type === B;
+function U(n) {
+  return m(n) && n.type === F;
 }
-function W({
-  children: e,
-  activeTab: d,
-  onTabChange: f,
-  header: u,
-  footer: g,
-  actions: l,
-  testId: h
+function et({
+  children: n,
+  activeTab: c,
+  onTabChange: h,
+  header: T,
+  footer: b,
+  actions: s,
+  testId: M
 }) {
-  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,
+  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: 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
+          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 || l ? /* @__PURE__ */ a(
-        o,
+      i.length > 0 || s ? /* @__PURE__ */ a(
+        r,
         {
           direction: "row",
           align: "center",
           gap: "sm",
           className: "ml-auto",
           children: [
-            i.length > 0 ? /* @__PURE__ */ n(
-              x,
+            i.length > 0 ? /* @__PURE__ */ e(
+              k,
               {
-                title: /* @__PURE__ */ n(
-                  E,
+                title: /* @__PURE__ */ e(
+                  v,
                   {
                     type: "button",
                     variant: "ghost",
                     size: "md",
-                    className: C,
+                    className: N,
                     "aria-label": "More actions",
-                    "data-testid": r.dropdown,
-                    children: /* @__PURE__ */ n(_, { icon: S, className: "size-4" })
+                    "data-testid": o.dropdown,
+                    children: /* @__PURE__ */ e(j, { icon: C, className: "size-4" })
                   }
                 ),
                 asChild: !0,
                 placement: "bottom",
                 align: "end",
-                children: i.map((t) => /* @__PURE__ */ n(
-                  A,
+                children: i.map((t) => /* @__PURE__ */ e(
+                  z,
                   {
                     onSelect: t.onSelect,
                     children: t.title
@@ -86,34 +106,35 @@ function W({
                 ))
               }
             ) : null,
-            l
+            s
           ]
         }
       ) : null
     ] }) : null,
     /* @__PURE__ */ a(
-      N,
+      B,
       {
-        "data-testid": r.body,
+        "data-testid": o.body,
         "data-aside-form-top": !0,
         children: [
-          /* @__PURE__ */ n(o, { children: /* @__PURE__ */ n(I, {}) }),
-          M
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(D, {}) }),
+          S
         ]
       }
     ),
-    g
+    b
   ] }) });
 }
-function X({
-  children: e
+function ot({
+  children: n
 }) {
-  return /* @__PURE__ */ n(o, { gap: "sm", "data-testid": r.message, children: e });
+  return /* @__PURE__ */ e(r, { gap: "sm", "data-testid": o.message, children: n });
 }
 export {
-  W as ManagePane,
-  X as ManagePaneMessage,
-  v as ManagePaneTab,
-  B as ManagePaneTabDropdown,
-  r as ManagePaneTest
+  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/page-title.js

@@ -1,32 +1,38 @@
-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);
+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 y({
-  title: e,
-  browserTitle: t,
-  head: n,
-  as: i = "h1",
-  className: s
+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 r = p(), m = o(r, e), l = o(r, t ?? e);
-  return /* @__PURE__ */ a(f, { children: [
-    n?.(l),
+  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(
-      c,
+      x,
       {
-        as: i,
-        className: s ?? "m-0 text-3xl leading-none font-medium",
-        "data-testid": T.root,
-        children: m
+        as: m,
+        className: f ?? "m-0 text-3xl leading-none font-medium",
+        "data-testid": a.root,
+        children: p
       }
     )
   ] });
 }
 export {
-  y as PageTitle,
-  T as PageTitleTest
+  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
+};

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