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

package/dist/esm/components/base/borrow-rate-block/borrow-rate-block.js

@@ -0,0 +1,88 @@
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { SimpleAccordion as l, SimpleAccordionItem as s } from "../../simple-accordion/simple-accordion.js";
+import { TipCard as c } from "../../tip-card/tip-card.js";
+import { FormattedMessageTyped as e } from "../../typed-intl/index.js";
+import { Typography as d } from "../../typography/typography.js";
+import { VSpace as f } from "../../vspace/vspace.js";
+import { InfoList as b, InfoLine as i } from "../info-list/info-list.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 a } from "../values/scalars.js";
+import "../../badge/badge.js";
+import { BorrowRateBlockTest as n } from "./constants.js";
+function p(t) {
+  return typeof t == "number" ? t : t?.total;
+}
+function u(t) {
+  return typeof t == "number" ? t : t?.base;
+}
+function V({
+  data: t,
+  dataTo: r
+}) {
+  return /* @__PURE__ */ o("div", { "data-testid": n.root, children: /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(
+    s,
+    {
+      value: "borrow-rate",
+      last: !0,
+      triggerClassName: "flex-nowrap py-0 font-normal",
+      className: "[&_[role=region]_>div]:pb-0 border-b-0",
+      title: /* @__PURE__ */ o(
+        "div",
+        {
+          className: "min-w-0 flex-1 pr-1.5",
+          "data-testid": n.trigger,
+          children: /* @__PURE__ */ o(
+            i,
+            {
+              title: "components.borrowRateBlock.label",
+              tip: /* @__PURE__ */ o(e, { messageId: "components.borrowRateBlock.tip" }),
+              value: /* @__PURE__ */ o(a, { data: p(t) }),
+              valueTo: r !== void 0 ? /* @__PURE__ */ o(a, { data: p(r) }) : void 0
+            }
+          )
+        }
+      ),
+      description: /* @__PURE__ */ m("div", { "data-testid": n.details, children: [
+        /* @__PURE__ */ o(f, { size: 16 }),
+        /* @__PURE__ */ o(c, { backgroundColor: "transparent", textColor: "unset", children: /* @__PURE__ */ m(b, { children: [
+          /* @__PURE__ */ o(d, { as: "span", variant: "caption", color: "secondary", children: /* @__PURE__ */ o(e, { messageId: "components.borrowRateBlock.description" }) }),
+          /* @__PURE__ */ o(
+            i,
+            {
+              title: "components.borrowRateBlock.baseRate",
+              value: /* @__PURE__ */ o(a, { data: u(r ?? t) })
+            }
+          ),
+          /* @__PURE__ */ o(
+            i,
+            {
+              title: "components.borrowRateBlock.normalization",
+              tip: /* @__PURE__ */ o(
+                e,
+                {
+                  messageId: "components.borrowRateBlock.normalization.tip",
+                  values: {
+                    quota: "Quota Rates",
+                    utilization: "Utilization Rate"
+                  }
+                }
+              ),
+              value: "—"
+            }
+          )
+        ] }) })
+      ] })
+    }
+  ) }) });
+}
+export {
+  V as BorrowRateBlock,
+  n as BorrowRateBlockTest
+};

package/dist/esm/components/base/borrow-rate-block/constants.js

@@ -0,0 +1,8 @@
+class t {
+  static root = "borrow-rate-block-root";
+  static trigger = "borrow-rate-block-trigger";
+  static details = "borrow-rate-block-details";
+}
+export {
+  t as BorrowRateBlockTest
+};

package/dist/esm/components/base/borrow-rate-block/index.js

@@ -0,0 +1,6 @@
+import { BorrowRateBlock as e } from "./borrow-rate-block.js";
+import { BorrowRateBlockTest as B } from "./constants.js";
+export {
+  e as BorrowRateBlock,
+  B as BorrowRateBlockTest
+};

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

@@ -0,0 +1,36 @@
+import { jsxs as e, jsx as a } from "react/jsx-runtime";
+import { ChartWithSideCardTest as i } from "./constants.js";
+function m({
+  chart: r,
+  side: t
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: "flex w-full flex-wrap gap-4",
+      "data-testid": i.root,
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: "min-w-[min(100%,40rem)] grow-[999] basis-0",
+            "data-testid": i.chart,
+            children: r
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: "min-w-0 grow shrink-0 basis-[calc((100%-3rem)/4)]",
+            "data-testid": i.side,
+            children: t
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  m as ChartWithSideCard,
+  i as ChartWithSideCardTest
+};

package/dist/esm/components/base/chart-with-side-card/constants.js

@@ -0,0 +1,8 @@
+class a {
+  static root = "chart-with-side-card-root";
+  static chart = "chart-with-side-card-chart";
+  static side = "chart-with-side-card-side";
+}
+export {
+  a as ChartWithSideCardTest
+};

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

@@ -0,0 +1,6 @@
+import { ChartWithSideCard as e } from "./chart-with-side-card.js";
+import { ChartWithSideCardTest as d } from "./constants.js";
+export {
+  e as ChartWithSideCard,
+  d as ChartWithSideCardTest
+};

package/dist/esm/components/base/details-view/details-view.js

@@ -1,67 +1,72 @@
-import { jsx as i, jsxs as g } from "react/jsx-runtime";
-import { Children as p, cloneElement as h, isValidElement as c } from "react";
-import { Stack as r } from "../stack/stack.js";
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { Children as u, cloneElement as g, isValidElement as c } from "react";
+import { Stack as l } from "../stack/stack.js";
 import { isTabber as A } from "../tabber/tabber.js";
 import { Container as P } from "../../layout/container/container.js";
 import { useIsMedium as x } from "../../../hooks/use-media-query.js";
-import { DetailsViewTest as s } from "./constants.js";
+import { DetailsViewTest as o } from "./constants.js";
 import { AsideAlignAnchor as y } from "./detail-aside/detail-aside-scope.js";
 import { DetailAsideScreenLayout as w } from "./detail-aside/detail-aside-screen-layout.js";
-function D(e) {
+function N(e) {
   return c(e) && e.type === b;
 }
-function V(e) {
-  return c(e) && e.type === u;
+function D(e) {
+  return c(e) && e.type === h;
 }
-function M(e) {
+function V(e) {
   return c(e) && e.type === y;
 }
 function q({
   children: e,
-  mainRef: l,
+  mainRef: s,
   className: n,
-  testId: t
+  testId: a
 }) {
-  const a = x(), d = p.toArray(e), m = d.find(D), f = d.find(V)?.props.children ?? null, o = f != null ? /* @__PURE__ */ i(r, { "data-testid": s.managePane, children: f }) : null;
-  return /* @__PURE__ */ i(r, { className: "flex-col-12", "data-testid": t ?? s.root, children: /* @__PURE__ */ i(r, { className: "px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ i(
+  const t = x(), i = u.toArray(e), m = i.find(N), f = i.find(D)?.props.children ?? null, d = f != null ? /* @__PURE__ */ r(l, { gap: "md", "data-testid": o.managePane, children: f }) : null;
+  return /* @__PURE__ */ r(l, { className: "flex-col-12", "data-testid": a ?? o.root, children: /* @__PURE__ */ r(l, { className: "px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ r(
     w,
     {
       className: n,
-      mainRef: l,
-      aside: !a && o ? o : null,
-      children: /* @__PURE__ */ i(P, { padding: !1, children: m ? h(m, {
-        mobileManagePane: a ? o : null
+      mainRef: s,
+      aside: !t && d ? d : null,
+      children: /* @__PURE__ */ r(P, { padding: !1, children: m ? g(m, {
+        mobileManagePane: t ? d : null
       }) : null })
     }
   ) }) });
 }
 function b({
   children: e,
-  mobileManagePane: l
+  mobileManagePane: s
 }) {
-  const n = p.toArray(e);
-  if (l == null)
-    return /* @__PURE__ */ i(r, { gap: "lg", "data-testid": s.leftPane, children: n });
-  let t = n.findIndex(M);
-  if (t !== -1)
-    t += 1;
-  else {
-    const a = n.findIndex(A);
-    t = a === -1 ? n.length : a;
+  const n = u.toArray(e);
+  if (s == null)
+    return /* @__PURE__ */ r(l, { className: "gap-3.5", "data-testid": o.leftPane, children: n });
+  const a = n.findIndex(A);
+  if (a !== -1) {
+    const i = n[a];
+    return /* @__PURE__ */ p(l, { className: "gap-3.5", "data-testid": o.leftPane, children: [
+      n.slice(0, a),
+      c(i) ? g(i, {
+        mobileManagePane: s
+      }) : i,
+      n.slice(a + 1)
+    ] });
   }
-  return /* @__PURE__ */ g(r, { gap: "lg", "data-testid": s.leftPane, children: [
+  let t = n.findIndex(V);
+  return t !== -1 ? t += 1 : t = n.length, /* @__PURE__ */ p(l, { className: "gap-3.5", "data-testid": o.leftPane, children: [
     n.slice(0, t),
-    l,
+    s,
     n.slice(t)
   ] });
 }
-function u(e) {
+function h(e) {
   return null;
 }
-u.displayName = "DetailsViewManagePane";
+h.displayName = "DetailsViewManagePane";
 export {
   q as DetailsView,
   b as DetailsViewLeftPane,
-  u as DetailsViewManagePane,
-  s as DetailsViewTest
+  h as DetailsViewManagePane,
+  o as DetailsViewTest
 };

package/dist/esm/components/base/history-chart/history-chart.js

@@ -1,56 +1,60 @@
 import { jsx as p } from "react/jsx-runtime";
-import { useMemo as l } from "react";
+import { useMemo as g } from "react";
 import "@gearbox-protocol/static";
 import "../../checkbox/checkbox.js";
 import "../../checkbox/checkbox-labeled.js";
 import "../../select/select.js";
-import { TradingView as u } from "../../trading-view/trading-view.js";
-import { useIntlTyped as g } from "../../typed-intl/index.js";
-import { HistoryChartTest as h } from "./constants.js";
-const A = ["1d", "1w", "1m", "1y", "max"], v = {
+import { TradingView as h } from "../../trading-view/trading-view.js";
+import { useIntlTyped as A } from "../../typed-intl/index.js";
+import { HistoryChartTest as v } from "./constants.js";
+const M = ["1d", "1w", "1m", "1y", "max"], x = {
   "1d": "1D",
   "1w": "1W",
   "1m": "1M",
   "1y": "1Y",
   max: "MAX"
 };
-function D({
+function N({
   data: t,
   range: r,
   onRange: m,
   isLoading: d = !1,
   error: c,
-  yMeasureUnit: i = "none",
-  height: y,
-  seriesTitles: e,
+  yMeasureUnit: e = "none",
+  height: f,
+  seriesTitles: i,
   priceLines: a,
-  zones: s
+  zones: s,
+  showCurrentValue: y = !1,
+  yScaleMin: l
 }) {
-  const n = g(), f = l(() => t ? (Array.isArray(t) ? t : [t]).map(M(e)) : void 0, [t, e]);
-  return /* @__PURE__ */ p("div", { "data-testid": h.root, children: /* @__PURE__ */ p(
-    u,
+  const n = A(), u = g(() => t ? (Array.isArray(t) ? t : [t]).map(C(i)) : void 0, [t, i]);
+  return /* @__PURE__ */ p("div", { "data-testid": v.root, children: /* @__PURE__ */ p(
+    h,
     {
-      data: f,
+      data: u,
       isLoading: d,
       error: c ? n.formatMessage({ messageId: "components.historyChart.error" }) : void 0,
       emptyMessage: n.formatMessage({
         messageId: "components.historyChart.empty"
       }),
-      yMeasureUnit: Array.isArray(i) ? [...i] : i,
-      height: y,
-      rangeList: A.map((o) => ({
+      yMeasureUnit: Array.isArray(e) ? [...e] : e,
+      height: f,
+      rangeList: M.map((o) => ({
         value: o,
-        label: v[o]
+        label: x[o]
       })),
       range: r,
       setRange: (o) => m(o),
       priceLineOptions: a ? [...a] : void 0,
       zoneOptions: s ? [...s] : void 0,
+      showCurrentValue: y,
+      yScaleMin: l,
       disableZoom: !0
     }
   ) });
 }
-function M(t) {
+function C(t) {
   return (r) => ({
     id: r.metric,
     title: t?.[r.metric] ?? r.metric,
@@ -61,6 +65,6 @@ function M(t) {
   });
 }
 export {
-  D as HistoryChart,
-  h as HistoryChartTest
+  N as HistoryChart,
+  v as HistoryChartTest
 };