@gearbox-protocol/ui-kit 2.1.0-next.1

package/dist/esm/components/stepper/stepper.js

@@ -0,0 +1,146 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import * as f from "react";
+import { faCheck as u } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as h } from "../icons/fa-icon.js";
+import "@gearbox-protocol/sdk";
+import { cn as r } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const v = f.forwardRef(
+  ({
+    className: g,
+    steps: d,
+    activeStep: l,
+    orientation: y = "horizontal",
+    onStepClick: o,
+    ...b
+  }, N) => {
+    const c = y === "horizontal";
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        ref: N,
+        className: r(
+          "flex",
+          c ? "flex-row flex-wrap items-center gap-x-2 gap-y-3 sm:gap-x-0 sm:gap-y-4" : "flex-col",
+          g
+        ),
+        ...b,
+        children: d.map((t, i) => {
+          const m = i < l, s = i === l, x = i === d.length - 1, p = o ? {
+            role: "button",
+            tabIndex: 0,
+            onClick: o ? () => o(i) : void 0,
+            onKeyDown: o ? (a) => {
+              (a.key === "Enter" || a.key === " ") && (a.preventDefault(), o(i));
+            } : void 0
+          } : {};
+          return c ? /* @__PURE__ */ n(f.Fragment, { children: [
+            /* @__PURE__ */ n(
+              "div",
+              {
+                className: r(
+                  "flex items-center gap-2",
+                  o && "cursor-pointer"
+                ),
+                ...p,
+                children: [
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: r(
+                        "flex h-6 w-6 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-full border-2 text-xs sm:text-sm font-medium transition-colors",
+                        m && "border-primary bg-primary text-primary-foreground",
+                        s && "border-primary text-primary",
+                        !m && !s && "border-muted text-muted-foreground"
+                      ),
+                      children: m ? /* @__PURE__ */ e(h, { icon: u, className: "size-3 sm:size-4" }) : /* @__PURE__ */ e("span", { children: i + 1 })
+                    }
+                  ),
+                  /* @__PURE__ */ n("div", { className: "flex flex-col gap-0.5 text-left", children: [
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: r(
+                          "text-xs sm:text-sm font-medium",
+                          s && "text-foreground",
+                          !s && "text-muted-foreground"
+                        ),
+                        children: t.label
+                      }
+                    ),
+                    t.description && /* @__PURE__ */ e("span", { className: "hidden sm:block text-xs text-muted-foreground", children: t.description })
+                  ] })
+                ]
+              }
+            ),
+            !x && /* @__PURE__ */ e(
+              "div",
+              {
+                className: r(
+                  "hidden sm:block mx-2 sm:mx-4 h-0.5 min-w-[20px] sm:min-w-[40px] flex-1",
+                  m ? "bg-primary" : "bg-muted"
+                )
+              }
+            )
+          ] }, t.id) : /* @__PURE__ */ n(
+            "div",
+            {
+              className: r(
+                "flex gap-2 sm:gap-3",
+                o && "cursor-pointer"
+              ),
+              ...p,
+              children: [
+                /* @__PURE__ */ n("div", { className: "flex flex-col items-center", children: [
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: r(
+                        "flex h-6 w-6 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-full border-2 text-xs sm:text-sm font-medium transition-colors",
+                        m && "border-primary bg-primary text-primary-foreground",
+                        s && "border-primary text-primary",
+                        !m && !s && "border-muted text-muted-foreground"
+                      ),
+                      children: m ? /* @__PURE__ */ e(h, { icon: u, className: "size-3 sm:size-4" }) : /* @__PURE__ */ e("span", { children: i + 1 })
+                    }
+                  ),
+                  !x && /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: r(
+                        "my-1 w-0.5 flex-1 min-h-[20px] sm:min-h-[24px]",
+                        m ? "bg-primary" : "bg-muted"
+                      )
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ n("div", { className: "flex flex-col gap-0.5 pt-0.5 sm:pt-1.5 pb-3 sm:pb-4", children: [
+                  /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: r(
+                        "text-xs sm:text-sm font-medium",
+                        s && "text-foreground",
+                        !s && "text-muted-foreground"
+                      ),
+                      children: t.label
+                    }
+                  ),
+                  t.description && /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: t.description })
+                ] })
+              ]
+            },
+            t.id
+          );
+        })
+      }
+    );
+  }
+);
+v.displayName = "Stepper";
+export {
+  v as Stepper
+};

package/dist/esm/components/styled-dropdown/index.js

@@ -0,0 +1,4 @@
+import { StyledDropdown as d } from "./styled-dropdown.js";
+export {
+  d as StyledDropdown
+};

package/dist/esm/components/styled-dropdown/styled-dropdown.js

@@ -0,0 +1,109 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { DropdownMenu as I, DropdownMenuTrigger as $ } from "../dropdown-menu/dropdown-menu.js";
+import "../dropdown-menu/dropdown-menu-checkbox-item.js";
+import { DropdownMenuContent as A } from "../dropdown-menu/dropdown-menu-content.js";
+import { DropdownMenuItem as B } from "../dropdown-menu/dropdown-menu-item.js";
+import "../dropdown-menu/dropdown-menu-label.js";
+import "../dropdown-menu/dropdown-menu-radio-item.js";
+import "../dropdown-menu/dropdown-menu-separator.js";
+import "../dropdown-menu/dropdown-menu-shortcut.js";
+import "../dropdown-menu/dropdown-menu-sub-content.js";
+import "../dropdown-menu/dropdown-menu-sub-trigger.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as c } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+function X({
+  children: g,
+  open: u,
+  onOpenChange: h,
+  trigger: b,
+  label: y,
+  items: a,
+  onSelect: f,
+  theme: x = "default",
+  size: w = "md",
+  icon: t,
+  iconSize: p,
+  align: v = "start",
+  side: D = "bottom",
+  className: k,
+  triggerClassName: C,
+  onClickAnalytics: M
+}) {
+  const l = b || y, s = {
+    xs: "text-xs px-1.5 py-0.5",
+    sm: "text-sm px-2 py-1",
+    md: "text-sm px-3 py-1.5",
+    lg: "text-base px-4 py-2"
+  }, m = {
+    empty: "bg-transparent hover:bg-accent",
+    default: "bg-background border border-border hover:bg-accent",
+    dark: "bg-gray-800 text-white hover:bg-gray-700",
+    light: "bg-white text-gray-900 hover:bg-gray-100",
+    filledDark: "bg-gray-900 text-white hover:bg-gray-800"
+  }, N = t && typeof t == "object" && "iconName" in t, j = () => {
+    if (!t) return null;
+    if (N) {
+      const { icon: r } = t;
+      if (!r) return null;
+      const [o, n, , , i] = r;
+      return /* @__PURE__ */ e(
+        "svg",
+        {
+          "aria-hidden": "true",
+          className: "inline-block fill-current",
+          style: { width: p || 12, height: p || 12 },
+          viewBox: `0 0 ${o} ${n}`,
+          children: /* @__PURE__ */ e("path", { d: Array.isArray(i) ? i[0] : i })
+        }
+      );
+    }
+    return t;
+  };
+  return /* @__PURE__ */ d(I, { open: u, onOpenChange: h, children: [
+    l && /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ d(
+      "button",
+      {
+        type: "button",
+        className: c(
+          "inline-flex items-center gap-1 rounded transition-colors",
+          s[w] || s.md,
+          m[x] || m.default,
+          C
+        ),
+        children: [
+          l,
+          j()
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      A,
+      {
+        align: v,
+        side: D,
+        className: c("min-w-[8rem]", k),
+        children: a ? a.map((r, o) => {
+          const n = typeof r.value == "string" || typeof r.value == "number" ? r.value : `item-${o}`;
+          return /* @__PURE__ */ e(
+            B,
+            {
+              onClick: () => {
+                M?.(r), f?.(r);
+              },
+              children: r.title || r.label || r.value
+            },
+            n
+          );
+        }) : g
+      }
+    )
+  ] });
+}
+export {
+  X as StyledDropdown
+};

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

@@ -0,0 +1,4 @@
+import { Switch as t } from "./switch.js";
+export {
+  t as Switch
+};

package/dist/esm/components/switch/switch.js

@@ -0,0 +1,45 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-switch";
+import * as l from "react";
+import "@gearbox-protocol/sdk";
+import { cn as s } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const d = l.forwardRef(({ className: r, size: e = "default", ...o }, i) => {
+  const n = {
+    sm: "h-4 w-7",
+    default: "h-5 w-9",
+    lg: "h-6 w-11"
+  }, c = {
+    sm: "h-3 w-3 data-[state=checked]:translate-x-3",
+    default: "h-4 w-4 data-[state=checked]:translate-x-4",
+    lg: "h-5 w-5 data-[state=checked]:translate-x-5"
+  };
+  return /* @__PURE__ */ a(
+    t.Root,
+    {
+      className: s(
+        "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+        n[e],
+        r
+      ),
+      ...o,
+      ref: i,
+      children: /* @__PURE__ */ a(
+        t.Thumb,
+        {
+          className: s(
+            "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0",
+            c[e]
+          )
+        }
+      )
+    }
+  );
+});
+d.displayName = t.Root.displayName;
+export {
+  d as Switch
+};

package/dist/esm/components/tab-control/index.js

@@ -0,0 +1,8 @@
+import { TabControl as e, TabItem as b, useHashTabs as s, useSectionTab as t, useTabControl as T } from "./tab-control.js";
+export {
+  e as TabControl,
+  b as TabItem,
+  s as useHashTabs,
+  t as useSectionTab,
+  T as useTabControl
+};

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

@@ -0,0 +1,183 @@
+import { jsx as f, jsxs as T, Fragment as S } from "react/jsx-runtime";
+import { useRef as p, useState as v, useCallback as b, useMemo as w, useEffect as N } from "react";
+import { useNavigationAdapter as C } from "../navigation-context/navigation-context.js";
+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";
+function U(n) {
+  if (!n) return null;
+  const { width: r = 0, height: s = 0 } = n?.getBoundingClientRect() || {}, i = n?.offsetTop || 0, o = n?.offsetLeft || 0;
+  return { width: r, height: s, left: o, top: i };
+}
+function $(n, r, s) {
+  const i = p(null), [o, u] = v(null), l = p(null), c = b((e) => {
+    u(e), l.current = e;
+  }, []);
+  return N(() => {
+    const e = s.current[n], d = () => {
+      const a = U(e), h = a?.height !== l.current?.height, x = a?.width !== l.current?.width, g = a?.left !== l.current?.left, y = a?.top !== l.current?.top;
+      (h || x || g || y) && c(a);
+    };
+    i.current = d, d();
+    const t = e ? new ResizeObserver(d) : null;
+    return e && t?.observe(e), () => {
+      e && t?.unobserve(e);
+    };
+  }, [n, s, c]), N(() => {
+    const e = r ? new ResizeObserver(() => {
+      i.current?.();
+    }) : null;
+    return r && e?.observe(r), () => {
+      r && e?.unobserve(r);
+    };
+  }, [r]), o;
+}
+function B({
+  className: n,
+  tabs: r,
+  state: s,
+  showBorder: i = !0,
+  tabItemWrapPadding: o,
+  variant: u = "auto"
+}) {
+  const l = p(null), c = p({}), e = $(
+    s.id,
+    l.current,
+    c
+  ), d = (t, a) => () => s.handleTabChange(t, a);
+  return /* @__PURE__ */ f("div", { className: m("relative w-full flex flex-col flex-wrap", n), children: /* @__PURE__ */ T(
+    "div",
+    {
+      ref: l,
+      className: m(
+        "relative w-full max-w-full grow-0 shrink-0 basis-full flex items-stretch overflow-x-auto overflow-y-hidden",
+        "scrollbar-hidden",
+        i && "after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-border"
+      ),
+      children: [
+        e && /* @__PURE__ */ f(
+          "div",
+          {
+            className: "absolute left-0 h-[3px] bg-accent transition-[transform] duration-200 ease-in-out pointer-events-none bottom-[-1px]",
+            style: {
+              width: `${e.width}px`,
+              transform: `translate(${e.left}px)`
+            }
+          }
+        ),
+        r.map((t, a, h) => {
+          const x = a === h.length - 1;
+          return /* @__PURE__ */ f(
+            "button",
+            {
+              ref: (g) => {
+                c.current[t.id] = g;
+              },
+              type: "button",
+              onClick: t.disabled ? void 0 : d(t.id, a),
+              disabled: t.disabled,
+              className: m(
+                "flex items-center bg-transparent border-none shrink-0 text-foreground",
+                o ? "" : "p-0 pb-3.5",
+                u === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !x && "mr-10 max-[500px]:mr-8",
+                t.disabled && "cursor-not-allowed",
+                !t.disabled && "cursor-pointer",
+                !t.disabled && "hover:text-foreground hover:[&>*]:text-foreground"
+              ),
+              style: o ? { padding: o } : void 0,
+              children: t.item
+            },
+            `tab-item-${t.id}`
+          );
+        })
+      ]
+    }
+  ) });
+}
+function F({
+  icon: n,
+  label: r,
+  selected: s,
+  textSize: i = "default",
+  amount: o
+}) {
+  return /* @__PURE__ */ T(S, { children: [
+    n && /* @__PURE__ */ f(
+      "div",
+      {
+        className: m(
+          "mr-3",
+          s ? "text-foreground" : "text-secondary-foreground"
+        ),
+        children: n
+      }
+    ),
+    /* @__PURE__ */ f(
+      "div",
+      {
+        className: m(
+          "m-0 p-0 whitespace-nowrap",
+          i === "default" && "text-sm leading-[17px] font-normal",
+          i === "unset" && "text-[unset] leading-[unset] font-[unset]",
+          s ? "text-foreground" : "text-secondary-foreground"
+        ),
+        children: r
+      }
+    ),
+    !!o && /* @__PURE__ */ f("div", { className: "ml-1.5", children: /* @__PURE__ */ f("div", { className: "py-0.5 px-[9px] text-[11px] leading-[150%] font-normal bg-gray-50 rounded-[19px]", children: o }) })
+  ] });
+}
+function I(n, r = 0) {
+  const [s, i] = v(n), [o, u] = v(r), l = b((c, e) => {
+    i(c), u(e);
+  }, []);
+  return { id: s, index: o, handleTabChange: l };
+}
+function M(n) {
+  const { useLocation: r, useNavigate: s } = C(), { hash: i } = r(), o = s(), u = w(
+    () => n.reduce(
+      (t, a, h) => (t[a.id] = { id: a.id, index: h }, t),
+      {}
+    ),
+    [n]
+  ), l = w(() => i.slice(1).toLowerCase(), [i]), { id: c, index: e } = u[l] || {}, d = b(
+    (t) => {
+      o(`#${t}`);
+    },
+    [o]
+  );
+  return {
+    id: c,
+    index: e,
+    handleTabChange: d
+  };
+}
+function D({
+  defaultTabs: n,
+  pathRoot: r,
+  selectedSection: s
+}) {
+  const { useNavigate: i } = C(), o = i(), u = w(
+    () => n.reduce(
+      (d, t, a) => (d[t.id] = { id: t.id, index: a }, d),
+      {}
+    ),
+    [n]
+  ), l = b(
+    (d) => {
+      o(`${r}/${d}`);
+    },
+    [o, r]
+  ), { id: c, index: e } = u[s] || {};
+  return { id: c, index: e, handleTabChange: l };
+}
+export {
+  B as TabControl,
+  F as TabItem,
+  M as useHashTabs,
+  D as useSectionTab,
+  I as useTabControl
+};

package/dist/esm/components/table/edit-button.js

@@ -0,0 +1,48 @@
+import { jsx as i } from "react/jsx-runtime";
+import { IconEditPen as d } from "@gearbox-protocol/static";
+import "../buttons/back-button/back-button.js";
+import { Button as h } from "../buttons/button/button.js";
+import "../buttons/copy-button/copy-button.js";
+import "../buttons/external-button/external-button.js";
+import "../buttons/filter-button/filter-button.js";
+import "../buttons/navigation-button/navigation-button.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as r } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+import "../buttons/tab-button/tab-button.js";
+function q({
+  onClick: m,
+  customButton: p,
+  children: e,
+  disabled: n,
+  width: c,
+  $width: s,
+  className: a,
+  style: f,
+  ...l
+}) {
+  const t = e || p, o = c === "wide" || s === "wide";
+  return /* @__PURE__ */ i("div", { className: r(t ? "px-4 py-2" : "px-2", o && "w-full"), children: /* @__PURE__ */ i(
+    h,
+    {
+      className: r(
+        t ? "p-0 h-fit hover:bg-accent/0" : "p-2 h-fit",
+        o && "w-full",
+        a
+      ),
+      variant: "ghost",
+      onClick: m,
+      disabled: n,
+      style: f,
+      ...l,
+      children: t ?? /* @__PURE__ */ i(d, { size: 16, className: "size-4" })
+    }
+  ) });
+}
+export {
+  q as EditButton
+};

package/dist/esm/components/table/editable-grid-table.js

@@ -0,0 +1,121 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { IconExternal as x } from "@gearbox-protocol/static";
+import "wagmi";
+import "../auth/wallet-ui-context.js";
+import "../buttons/back-button/back-button.js";
+import { Button as g } from "../buttons/button/button.js";
+import "../buttons/copy-button/copy-button.js";
+import "../buttons/external-button/external-button.js";
+import "../buttons/filter-button/filter-button.js";
+import "../buttons/navigation-button/navigation-button.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 { TabButton as u } from "../buttons/tab-button/tab-button.js";
+import { SignInRequired as b } from "../auth/signin-required.js";
+import { TokenIcon as v } from "../token-icon/token-icon.js";
+import { GridTableCell as h, GridTable as N } from "./grid-table.js";
+import { UpdatedValue as C } from "./updated-value.js";
+function K({
+  assetAddress: o,
+  symbol: i,
+  iconSymbol: s,
+  comment: l,
+  explorerUrl: r,
+  span: d = 1
+}) {
+  return /* @__PURE__ */ e(h, { span: d, children: /* @__PURE__ */ n("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ e(v, { symbol: s ?? i, size: 24 }),
+    /* @__PURE__ */ n("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ e("div", { className: "font-medium", children: i }),
+      l && /* @__PURE__ */ n("div", { className: "text-md text-muted-foreground", children: [
+        "(",
+        l,
+        ")"
+      ] }),
+      r && /* @__PURE__ */ e(
+        g,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "text-muted-foreground hover:text-foreground p-0 h-auto",
+          onClick: () => window.open(`${r}/address/${o}`, "_blank"),
+          children: /* @__PURE__ */ e(x, { size: 12, className: "size-3" })
+        }
+      )
+    ] })
+  ] }) });
+}
+function M({
+  oldValue: o,
+  newValue: i,
+  onEdit: s,
+  isEditable: l = !0,
+  className: r,
+  align: d = "right",
+  customButton: a,
+  postfix: m,
+  disabled: c,
+  nowrap: p,
+  span: t = 1
+}) {
+  const f = {
+    left: "justify-start",
+    right: "justify-end",
+    center: "justify-center"
+  }[d];
+  return /* @__PURE__ */ e(h, { span: t, className: r, children: /* @__PURE__ */ e("div", { className: `flex ${f} w-full text-${d}`, children: /* @__PURE__ */ e(
+    C,
+    {
+      oldValue: o,
+      newValue: i,
+      onEdit: s,
+      isEditable: l,
+      customButton: a,
+      postfix: m,
+      disabled: c,
+      nowrap: p
+    }
+  ) }) });
+}
+function O({
+  title: o,
+  onNew: i,
+  newButtonText: s = "New",
+  buttonLoadingText: l = "Adding...",
+  isLoading: r,
+  actions: d,
+  children: a,
+  disabled: m = !1,
+  skipSignIn: c = !0,
+  cols: p = 12
+}) {
+  return /* @__PURE__ */ n("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ n("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ e("h2", { className: "text-2xl font-bold", children: o }),
+      /* @__PURE__ */ e(b, { skipSignIn: c, variant: "pink", size: "sm", children: /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+        i && /* @__PURE__ */ e(u, { onClick: i, disabled: r || m, children: r ? l : s }),
+        d?.map((t, f) => /* @__PURE__ */ e(
+          u,
+          {
+            onClick: t.onClick,
+            disabled: t.isLoading || m,
+            children: t.isLoading ? t.loadingText || "Loading..." : t.text
+          },
+          f
+        ))
+      ] }) })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "rounded-lg border", children: /* @__PURE__ */ e(N, { cols: p, children: a }) })
+  ] });
+}
+export {
+  K as GridTableCellAsset,
+  M as GridTableCellUpdatable,
+  O as GridTableEditable
+};