@gearbox-protocol/ui-kit 3.2.0 → 3.4.0

package/dist/esm/components/layout/index.js

@@ -2,13 +2,14 @@ import { AppLogo as e, AppLogoLink as t } from "./app-logo/app-logo.js";
 import { Block as m } from "./block/block.js";
 import { Col as f } from "./col/col.js";
 import { Container as a } from "./container/container.js";
-import { Footer as L, FooterLink as l, FooterLinkSection as c, GearboxFooter as g } from "./footer/footer.js";
-import { Grid as u } from "./grid/grid.js";
-import { Header as s, useMobileMenu as b } from "./header/header.js";
-import { Layout as y } from "./layout/layout.js";
-import { LegalDisclaimer as C } from "./legal-disclaimer/legal-disclaimer.js";
-import { PageLayout as M } from "./page-layout/page-layout.js";
-import { SocialIcons as B } from "./social-icons/social-icons.js";
+import { Footer as L, FooterLink as l, FooterLinkSection as c, GearboxFooter as u } from "./footer/footer.js";
+import { Grid as k } from "./grid/grid.js";
+import { Header as F, useMobileMenu as d } from "./header/header.js";
+import { Layout as A } from "./layout/layout.js";
+import { LegalDisclaimer as b } from "./legal-disclaimer/legal-disclaimer.js";
+import { MainAsideLayout as G } from "./main-aside-layout/main-aside-layout.js";
+import { PageLayout as B } from "./page-layout/page-layout.js";
+import { SocialIcons as H } from "./social-icons/social-icons.js";
 export {
   e as AppLogo,
   t as AppLogoLink,
@@ -18,12 +19,13 @@ export {
   L as Footer,
   l as FooterLink,
   c as FooterLinkSection,
-  g as GearboxFooter,
-  u as Grid,
-  s as Header,
-  y as Layout,
-  C as LegalDisclaimer,
-  M as PageLayout,
-  B as SocialIcons,
-  b as useMobileMenu
+  u as GearboxFooter,
+  k as Grid,
+  F as Header,
+  A as Layout,
+  b as LegalDisclaimer,
+  G as MainAsideLayout,
+  B as PageLayout,
+  H as SocialIcons,
+  d as useMobileMenu
 };

package/dist/esm/components/layout/layout/layout.js

@@ -1,12 +1,12 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import * as t from "react";
-import { cn as m } from "../../../utils/cn.js";
-const n = t.forwardRef(
-  ({ header: e, footer: o, children: a, className: d, ...i }, s) => /* @__PURE__ */ l(
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import * as n from "react";
+import { cn as a } from "../../../utils/cn.js";
+const c = n.forwardRef(
+  ({ header: e, footer: o, children: d, className: i, mainClassName: s, ...l }, t) => /* @__PURE__ */ m(
     "div",
     {
-      ref: s,
-      className: m("grid min-h-screen grid-rows-[auto_1fr_auto]", d),
+      ref: t,
+      className: a("grid min-h-screen grid-rows-[auto_1fr_auto]", i),
       style: {
         gridTemplateAreas: `
             "header"
@@ -14,7 +14,7 @@ const n = t.forwardRef(
             "footer"
           `
       },
-      ...i,
+      ...l,
       children: [
         e && /* @__PURE__ */ r(
           "div",
@@ -27,13 +27,13 @@ const n = t.forwardRef(
         /* @__PURE__ */ r(
           "main",
           {
-            className: "overflow-x-hidden py-6",
+            className: a("overflow-x-hidden py-6", s),
             style: {
               gridArea: "main",
               backgroundColor: "hsl(var(--background))",
               color: "hsl(var(--foreground))"
             },
-            children: a
+            children: d
           }
         ),
         o && /* @__PURE__ */ r("div", { style: { gridArea: "footer" }, children: o })
@@ -41,7 +41,7 @@ const n = t.forwardRef(
     }
   )
 );
-n.displayName = "Layout";
+c.displayName = "Layout";
 export {
-  n as Layout
+  c as Layout
 };

package/dist/esm/components/layout/main-aside-layout/index.js

@@ -0,0 +1,4 @@
+import { MainAsideLayout as e } from "./main-aside-layout.js";
+export {
+  e as MainAsideLayout
+};

package/dist/esm/components/layout/main-aside-layout/main-aside-layout.js

@@ -0,0 +1,35 @@
+import { jsx as s, jsxs as f } from "react/jsx-runtime";
+import * as c from "react";
+import { cn as a } from "../../../utils/cn.js";
+const d = c.forwardRef(
+  ({
+    children: i,
+    aside: e,
+    asidePosition: l = "right",
+    asideClassName: t,
+    className: m,
+    ...o
+  }, n) => {
+    const r = e == null ? null : /* @__PURE__ */ s("aside", { className: a("min-w-0 shrink-0", t), children: e });
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        ref: n,
+        className: a(
+          "flex w-full flex-col-reverse gap-6 lg:flex-row lg:items-start",
+          m
+        ),
+        ...o,
+        children: [
+          l === "left" && r,
+          /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: i }),
+          l === "right" && r
+        ]
+      }
+    );
+  }
+);
+d.displayName = "MainAsideLayout";
+export {
+  d as MainAsideLayout
+};

package/dist/esm/components/loader-guard/loader-guard.js

@@ -1,5 +1,5 @@
 import { jsx as m, jsxs as o } from "react/jsx-runtime";
-import { Guard as e } from "../guard/guard.js";
+import { Guard as p } from "../guard/guard.js";
 import "../base-link/base-link.js";
 import "react";
 import "@gearbox-protocol/sdk";
@@ -10,21 +10,22 @@ import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 import "../layout/col/col.js";
-import { Container as p } from "../layout/container/container.js";
+import { Container as e } from "../layout/container/container.js";
 import "../layout/footer/footer.js";
 import "../layout/grid/grid.js";
 import "../layout/header/header.js";
 import "../layout/layout/layout.js";
+import "../layout/main-aside-layout/main-aside-layout.js";
 import "../buttons/back-button/back-button.js";
 import "../page-title/page-title.js";
 import "../layout/social-icons/social-icons.js";
 import { Skeleton as r } from "../skeleton/skeleton.js";
-function A({
+function B({
   showGuard: s,
-  children: a,
-  loader: i
+  children: i,
+  loader: a
 }) {
-  const t = /* @__PURE__ */ m(p, { children: /* @__PURE__ */ o("div", { className: "flex flex-col gap-4 p-4 sm:p-6 w-full", children: [
+  const t = /* @__PURE__ */ m(e, { children: /* @__PURE__ */ o("div", { className: "flex flex-col gap-4 p-4 sm:p-6 w-full", children: [
     /* @__PURE__ */ m(r, { className: "h-6 sm:h-8 w-48 sm:w-64" }),
     /* @__PURE__ */ o("div", { className: "space-y-2 mb-4", children: [
       /* @__PURE__ */ m(r, { className: "h-3 sm:h-4 w-full" }),
@@ -36,8 +37,8 @@ function A({
       /* @__PURE__ */ m(r, { className: "h-48 sm:h-64 md:h-72 md:w-1/3 w-full" })
     ] })
   ] }) }), l = s;
-  return /* @__PURE__ */ m(e, { showGuard: l, guard: l && (i || t), children: a });
+  return /* @__PURE__ */ m(p, { showGuard: l, guard: l && (a || t), children: i });
 }
 export {
-  A as LoaderGuard
+  B as LoaderGuard
 };

package/dist/esm/components/markdown-viewer/markdown-viewer.js

@@ -15,6 +15,7 @@ import "../layout/footer/footer.js";
 import "../layout/grid/grid.js";
 import "../layout/header/header.js";
 import "../layout/layout/layout.js";
+import "../layout/main-aside-layout/main-aside-layout.js";
 import { PageLayout as w } from "../layout/page-layout/page-layout.js";
 import "../layout/social-icons/social-icons.js";
 import "../accordion/accordion.js";
@@ -178,7 +179,7 @@ function a(o) {
   }
   return { id: T(l), displayText: o };
 }
-function Tr({
+function vr({
   content: o,
   title: l,
   backButton: s,
@@ -390,5 +391,5 @@ function Tr({
   return c ? d : /* @__PURE__ */ r(w, { title: l || "", backButton: s, children: d });
 }
 export {
-  Tr as MarkdownViewer
+  vr as MarkdownViewer
 };

package/dist/esm/components/segmented-control/segmented-control.js

@@ -1,13 +1,14 @@
-import { jsxs as p, jsx as s } from "react/jsx-runtime";
-import { cva as u } from "class-variance-authority";
-import * as g from "react";
+import { jsxs as C, jsx as f } from "react/jsx-runtime";
+import { cva as k } from "class-variance-authority";
+import * as R from "react";
+import { useRef as w, useState as I, useCallback as v, useLayoutEffect as y } from "react";
 import "@gearbox-protocol/sdk";
-import { cn as m } from "../../utils/cn.js";
+import { cn as g } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-const h = u(
+const S = k(
   "relative z-0 flex w-full flex-row flex-nowrap items-center bg-gray-30",
   {
     variants: {
@@ -18,7 +19,7 @@ const h = u(
     },
     defaultVariants: { size: "md" }
   }
-), x = u("", {
+), V = k("", {
   variants: {
     size: {
       sm: "rounded-sm",
@@ -26,70 +27,104 @@ const h = u(
     }
   },
   defaultVariants: { size: "md" }
-}), b = g.forwardRef(({ className: l, name: d, items: t, size: r = "md", ...n }, e) => {
-  const o = t.findIndex((a) => a.checked), i = o < 0 ? 0 : o, c = t.length;
-  return /* @__PURE__ */ p("div", { ref: e, className: m(h({ size: r }), l), ...n, children: [
-    t.map((a, f) => /* @__PURE__ */ s(
-      v,
-      {
-        ...a,
-        name: d
-      },
-      typeof a.value == "string" ? a.value : f
-    )),
-    /* @__PURE__ */ s(
-      "div",
-      {
-        className: m(
-          "absolute top-0 left-0 z-[-1] h-full bg-gray-60 shadow-[0_2px_2px_rgba(0,0,0,0.25)] transition-transform duration-200 ease-in-out",
-          x({ size: r })
-        ),
-        style: {
-          width: c > 0 ? `${100 / c}%` : "0%",
-          transform: `translateX(${c > 0 ? 100 * i : 0}%)`
-        }
-      }
-    )
-  ] });
+}), $ = R.forwardRef(({ className: b, name: m, items: n, size: l = "md", ...u }, t) => {
+  const r = n.findIndex((e) => e.checked), s = r < 0 ? 0 : r, o = n.length, i = w(null), p = w([]), [h, x] = I({ left: 0, width: 0 }), d = v(() => {
+    const e = p.current[s];
+    if (!e || o === 0) {
+      x({ left: 0, width: 0 });
+      return;
+    }
+    x({
+      left: e.offsetLeft,
+      width: e.offsetWidth
+    });
+  }, [o, s]);
+  y(() => {
+    d();
+  }, [d]), y(() => {
+    const e = new ResizeObserver(() => d()), a = i.current;
+    a && e.observe(a);
+    for (const c of p.current)
+      c && e.observe(c);
+    return () => e.disconnect();
+  }, [d]);
+  const z = v(
+    (e) => {
+      i.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
+    },
+    [t]
+  );
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      ref: z,
+      className: g(S({ size: l }), b),
+      ...u,
+      children: [
+        n.map((e, a) => /* @__PURE__ */ f(
+          N,
+          {
+            ...e,
+            name: m,
+            ref: (c) => {
+              p.current[a] = c;
+            }
+          },
+          typeof e.value == "string" ? e.value : a
+        )),
+        /* @__PURE__ */ f(
+          "div",
+          {
+            className: g(
+              "pointer-events-none absolute top-0 left-0 z-[-1] h-full bg-gray-60 shadow-[0_2px_2px_rgba(0,0,0,0.25)] transition-[transform,width] duration-200 ease-in-out",
+              V({ size: l })
+            ),
+            style: h.width > 0 ? {
+              width: `${h.width}px`,
+              transform: `translateX(${h.left}px)`
+            } : {
+              width: o > 0 ? `${100 / o}%` : "0%",
+              transform: o > 0 ? `translateX(${100 * s}%)` : "translateX(0)"
+            }
+          }
+        )
+      ]
+    }
+  );
 });
-b.displayName = "SegmentedControl";
-function v({
-  name: l,
-  switchLabel: d,
-  label: t,
-  onChange: r,
-  onSelect: n,
-  ...e
-}) {
-  const o = r ?? (n ? (i) => {
-    i.preventDefault(), n();
+$.displayName = "SegmentedControl";
+const N = R.forwardRef(function({ name: m, switchLabel: n, label: l, onChange: u, onSelect: t, ...r }, s) {
+  const o = u ?? (t ? (i) => {
+    i.preventDefault(), t();
   } : void 0);
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ C(
     "label",
     {
-      className: m(
+      ref: s,
+      className: g(
         "relative m-0 block h-full grow shrink-0 basis-0 cursor-pointer select-none",
-        e.disabled && "cursor-default opacity-50"
+        r.disabled && "cursor-default opacity-50"
       ),
-      "data-checked": e.checked,
-      "data-disabled": e.disabled,
+      "data-checked": r.checked,
+      "data-disabled": r.disabled,
       children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ f(
           "input",
           {
             type: "radio",
-            name: l,
+            name: m,
             className: "absolute h-0 w-0 cursor-pointer opacity-0",
-            ...e,
+            ...r,
             onChange: o
           }
         ),
-        /* @__PURE__ */ s("span", { className: "flex h-full grow shrink-0 basis-0 items-center justify-center px-2 py-1", children: d ?? t })
+        /* @__PURE__ */ f("span", { className: "flex h-full grow shrink-0 basis-0 items-center justify-center px-2 py-1", children: n ?? l })
       ]
     }
   );
-}
+});
+N.displayName = "SegmentedControlItem";
 export {
-  b as SegmentedControl,
-  h as segmentedControlVariants
+  $ as SegmentedControl,
+  S as segmentedControlVariants
 };

package/dist/esm/components/time-to-liquidation/time-to-liquidation.js

@@ -109,6 +109,7 @@ import "../layout/footer/footer.js";
 import "../layout/grid/grid.js";
 import "../layout/header/header.js";
 import "../layout/layout/layout.js";
+import "../layout/main-aside-layout/main-aside-layout.js";
 import "../page-title/page-title.js";
 import "../layout/social-icons/social-icons.js";
 import "../link/link.js";

package/dist/esm/components/tokens-list-cell/tokens-list-cell.js

@@ -108,6 +108,7 @@ import "../layout/footer/footer.js";
 import "../layout/grid/grid.js";
 import "../layout/header/header.js";
 import "../layout/layout/layout.js";
+import "../layout/main-aside-layout/main-aside-layout.js";
 import "../page-title/page-title.js";
 import "../layout/social-icons/social-icons.js";
 import "../link/link.js";
@@ -157,7 +158,7 @@ import "../tip-card/tip-card.js";
 import "../toggle/toggle.js";
 import "../typography/typography.js";
 import "../with-filter-button/with-filter-button.js";
-function Mr({
+function zr({
   balances: a,
   tokensList: l,
   maxAssets: p = 3,
@@ -220,5 +221,5 @@ function Mr({
   ] });
 }
 export {
-  Mr as TokensListCell
+  zr as TokensListCell
 };

package/dist/esm/components/with-copy/with-copy.js

@@ -108,6 +108,7 @@ import "../layout/footer/footer.js";
 import "../layout/grid/grid.js";
 import "../layout/header/header.js";
 import "../layout/layout/layout.js";
+import "../layout/main-aside-layout/main-aside-layout.js";
 import "../page-title/page-title.js";
 import "../layout/social-icons/social-icons.js";
 import "../link/link.js";
@@ -157,7 +158,7 @@ import "../tip-card/tip-card.js";
 import "../toggle/toggle.js";
 import "../typography/typography.js";
 import "../with-filter-button/with-filter-button.js";
-function jr({
+function Tr({
   toCopy: u,
   children: d,
   onCopySuccess: f,
@@ -239,5 +240,5 @@ function jr({
   return a ? /* @__PURE__ */ t(T, { placement: "top", triangle: !0, title: c(), children: a }) : c();
 }
 export {
-  jr as WithCopy
+  Tr as WithCopy
 };