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

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

@@ -0,0 +1,108 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import "wagmi";
+import "../auth/wallet-ui-context.js";
+import "../buttons/back-button/back-button.js";
+import "../buttons/button/button.js";
+import "../buttons/copy-button/copy-button.js";
+import { ExternalButton as h } from "../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 f } from "../buttons/tab-button/tab-button.js";
+import { SignInRequired as x } from "../auth/signin-required.js";
+import { TokenIcon as b } from "../token-icon/token-icon.js";
+import { TableCell as u, Table as g } from "./table.js";
+import { UpdatedValue as v } from "./updated-value.js";
+function H({
+  assetAddress: n,
+  symbol: t,
+  iconSymbol: s,
+  comment: l,
+  explorerUrl: i
+}) {
+  return /* @__PURE__ */ e(u, { children: /* @__PURE__ */ m("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ e(b, { symbol: s ?? t, size: 24 }),
+    /* @__PURE__ */ m("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ e("div", { className: "font-medium", children: t }),
+      l && /* @__PURE__ */ m("div", { className: "text-md text-muted-foreground", children: [
+        "(",
+        l,
+        ")"
+      ] }),
+      i && /* @__PURE__ */ e(h, { url: `${i}/address/${n}` })
+    ] })
+  ] }) });
+}
+function J({
+  oldValue: n,
+  newValue: t,
+  onEdit: s,
+  isEditable: l = !0,
+  className: i,
+  align: d = "right",
+  customButton: a,
+  postfix: o,
+  disabled: c,
+  nowrap: r
+}) {
+  const p = {
+    left: "justify-start",
+    right: "justify-end",
+    center: "justify-center"
+  }[d];
+  return /* @__PURE__ */ e(u, { className: i, children: /* @__PURE__ */ e("div", { className: `flex ${p} w-full text-${d}`, children: /* @__PURE__ */ e(
+    v,
+    {
+      oldValue: n,
+      newValue: t,
+      onEdit: s,
+      isEditable: l,
+      customButton: a,
+      postfix: o,
+      disabled: c,
+      nowrap: r
+    }
+  ) }) });
+}
+function K({
+  title: n,
+  onNew: t,
+  newButtonText: s = "New",
+  buttonLoadingText: l = "Adding...",
+  isLoading: i,
+  actions: d,
+  children: a,
+  disabled: o = !1,
+  skipSignIn: c = !0
+}) {
+  return /* @__PURE__ */ m("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ m("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ e("h2", { className: "text-2xl font-bold", children: n }),
+      /* @__PURE__ */ e(x, { skipSignIn: c, variant: "pink", size: "sm", children: /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
+        t && /* @__PURE__ */ e(f, { onClick: t, disabled: i || o, children: i ? l : s }),
+        d?.map((r, p) => /* @__PURE__ */ e(
+          f,
+          {
+            onClick: r.onClick,
+            disabled: r.isLoading || o,
+            children: r.isLoading ? r.loadingText || "Loading..." : r.text
+          },
+          p
+        ))
+      ] }) })
+    ] }),
+    /* @__PURE__ */ e(g, { children: a })
+  ] });
+}
+export {
+  H as TableCellAsset,
+  J as TableCellUpdatable,
+  K as TableEditable
+};

package/dist/esm/components/table/grid-error-line.js

@@ -0,0 +1,35 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { FormattedMessage as n } from "react-intl";
+import { Button as m } from "../buttons/button/button.js";
+import { VSpace as c } from "../vspace/vspace.js";
+import { GridTableCell as o } from "./grid-table.js";
+function g({
+  err: r,
+  btnTitle: l,
+  onClick: t,
+  last: i = !0,
+  height: s = "100px"
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: "grid w-full items-center gap-2 px-4",
+      style: { height: s, gridColumn: "1 / -1" },
+      "data-last": i,
+      children: /* @__PURE__ */ e(o, { span: "full", className: "text-center", children: /* @__PURE__ */ a("div", { className: "w-full", children: [
+        /* @__PURE__ */ e("div", { className: "w-full flex flex-col items-center justify-center", children: /* @__PURE__ */ e(
+          n,
+          {
+            id: r?.message,
+            defaultMessage: r?.message || "Unknown Error"
+          }
+        ) }),
+        /* @__PURE__ */ e(c, { height: 16 }),
+        /* @__PURE__ */ e("div", { className: "w-full flex flex-col items-center justify-center", children: /* @__PURE__ */ e(m, { variant: "outline", size: "sm", onClick: t, children: l }) })
+      ] }) })
+    }
+  );
+}
+export {
+  g as GridErrorLine
+};

package/dist/esm/components/table/grid-loading-line.js

@@ -0,0 +1,42 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Skeleton as l } from "../skeleton/skeleton.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as e } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+function v({
+  height: i = "70px",
+  columns: t = 6,
+  cellClassName: o,
+  last: m,
+  className: n,
+  ...p
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: e("contents", n),
+      style: { minHeight: i },
+      ...p,
+      children: Array.from({ length: t }, (s, d) => /* @__PURE__ */ r(
+        "div",
+        {
+          className: e(
+            "flex items-center",
+            !m && "border-b border-border",
+            o || "p-4"
+          ),
+          style: { minHeight: i },
+          children: /* @__PURE__ */ r(l, { width: "full", height: "md" })
+        },
+        `${d}-${t}`
+      ))
+    }
+  );
+}
+export {
+  v as GridLoadingLine
+};

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

@@ -0,0 +1,22 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as o from "react";
+import { cn as s } from "../../utils/cn.js";
+const i = o.forwardRef(
+  ({ className: a, colSpan: r, ...t }, d) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: d,
+      className: s(
+        "flex items-center justify-center py-8",
+        r ? `col-span-${r}` : "col-span-full",
+        a
+      ),
+      ...t,
+      children: /* @__PURE__ */ e("div", { className: "flex items-center gap-3 text-muted-foreground", children: /* @__PURE__ */ e("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-current border-t-transparent" }) })
+    }
+  )
+);
+i.displayName = "GridTableLoader";
+export {
+  i as GridTableLoader
+};

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

@@ -0,0 +1,282 @@
+import { jsx as s } from "react/jsx-runtime";
+import { cva as g } from "class-variance-authority";
+import * as l from "react";
+import { BaseLink as k } from "../base-link/base-link.js";
+import { Col as j } from "../layout/col/col.js";
+import { Grid as D } from "../layout/grid/grid.js";
+import { cn as r } from "../../utils/cn.js";
+const K = g("w-full", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      default: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+}), A = l.forwardRef(
+  ({ className: e, size: t, cols: a = 12, gap: n = 0, wrapperClassName: i, ...f }, c) => /* @__PURE__ */ s("div", { className: r("relative w-full overflow-auto", i), children: /* @__PURE__ */ s(
+    D,
+    {
+      ref: c,
+      cols: a,
+      gap: n,
+      className: r(K({ size: t, className: e })),
+      ...f
+    }
+  ) })
+);
+A.displayName = "GridTable";
+const F = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+  "div",
+  {
+    ref: a,
+    className: r(
+      "contents",
+      // Full-width border for header (no insets)
+      "[&>*>*]:after:absolute [&>*>*]:after:bottom-0 [&>*>*]:after:inset-x-0 [&>*>*]:after:h-px [&>*>*]:after:bg-border",
+      // Disable hover effect on header rows by default
+      "hover:[&>*>*]:before:opacity-0!",
+      e
+    ),
+    ...t
+  }
+));
+F.displayName = "GridTableHeader";
+const R = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+  "div",
+  {
+    ref: a,
+    className: r("contents [&>*:last-child>*]:after:hidden", e),
+    ...t
+  }
+));
+R.displayName = "GridTableBody";
+const S = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+  "div",
+  {
+    ref: a,
+    className: r(
+      "contents [&>*]:border-t [&>*]:bg-muted/50 [&>*]:font-medium",
+      e
+    ),
+    ...t
+  }
+));
+S.displayName = "GridTableFooter";
+const E = l.forwardRef(
+  ({
+    className: e,
+    cols: t,
+    gap: a = 0,
+    last: n,
+    height: i,
+    hideValue: f,
+    noHover: c,
+    noRound: y,
+    onRowClick: o,
+    href: x,
+    target: B,
+    rel: V,
+    style: C,
+    children: m,
+    ...u
+  }, b) => {
+    const T = typeof i == "number" ? `${i}px` : i, v = l.useCallback(
+      (d) => {
+        !o || d.target.closest(
+          "a, button, input, select, textarea, [role='button']"
+        ) || o(d);
+      },
+      [o]
+    ), h = l.useCallback(
+      (d) => {
+        if (o && (d.key === "Enter" || d.key === " ")) {
+          if (d.preventDefault(), d.target.closest(
+            "a, button, input, select, textarea, [role='button']"
+          ))
+            return;
+          o(d);
+        }
+      },
+      [o]
+    ), N = r(
+      "[&>*]:relative [&>*]:transition-colors data-[state=selected]:[&>*]:bg-muted",
+      "[&>*]:after:absolute [&>*]:after:bottom-0 [&>*]:after:inset-x-0 [&>*]:after:h-px [&>*]:after:bg-border",
+      !y && [
+        "[&>*:first-child]:after:left-3",
+        "[&>*:last-child]:after:right-3"
+      ],
+      !c && [
+        "[&>*]:z-0",
+        "[&>*]:before:absolute [&>*]:before:inset-x-0 [&>*]:before:top-0 [&>*]:before:bottom-px [&>*]:before:-z-10 [&>*]:before:bg-muted/50 [&>*]:before:opacity-0 [&>*]:before:transition-opacity",
+        "hover:[&>*]:before:opacity-100",
+        !y && "[&>*:first-child]:before:rounded-l-lg [&>*:last-child]:before:rounded-r-lg"
+      ],
+      n && "[&>*]:after:hidden",
+      f && "[&>*]:opacity-0"
+    ), G = r(
+      "grid grid-cols-subgrid col-span-full",
+      N,
+      "cursor-pointer",
+      e
+    ), p = {
+      ...C,
+      ...T ? { height: T } : {}
+    };
+    return x ? /* @__PURE__ */ s(
+      k,
+      {
+        ref: b,
+        href: x,
+        target: B,
+        rel: V,
+        size: "unset",
+        variant: "unset",
+        className: r("no-underline text-foreground!", G),
+        style: p,
+        onClick: o ? v : void 0,
+        onKeyDown: o ? h : void 0,
+        ...u,
+        children: m
+      }
+    ) : o ? (
+      // biome-ignore lint/a11y/useSemanticElements: Using div with subgrid layout, not a semantic table
+      /* @__PURE__ */ s(
+        "div",
+        {
+          ref: b,
+          role: "row",
+          tabIndex: 0,
+          className: G,
+          style: p,
+          onClick: v,
+          onKeyDown: h,
+          ...u,
+          children: m
+        }
+      )
+    ) : /* @__PURE__ */ s(
+      "div",
+      {
+        ref: b,
+        className: r(
+          "grid grid-cols-subgrid col-span-full",
+          N,
+          e
+        ),
+        style: p,
+        ...u,
+        children: m
+      }
+    );
+  }
+);
+E.displayName = "GridTableRow";
+const I = g(
+  "flex items-center justify-start text-left align-middle font-medium text-muted-foreground !bg-transparent",
+  {
+    variants: {
+      size: {
+        sm: "min-h-8 px-1 py-2 text-sm",
+        default: "min-h-10 px-2 py-2.5",
+        lg: "min-h-12 px-4 py-3"
+      },
+      justify: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end"
+      },
+      gapBefore: {
+        sm: "pl-5",
+        md: "pl-10",
+        none: ""
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      justify: "start",
+      gapBefore: "none"
+    }
+  }
+), w = l.forwardRef(
+  ({ className: e, size: t, span: a = 1, justify: n = "start", gapBefore: i, ...f }, c) => /* @__PURE__ */ s(
+    j,
+    {
+      ref: c,
+      span: a,
+      className: r(
+        I({ size: t, justify: n, gapBefore: i, className: e })
+      ),
+      ...f
+    }
+  )
+);
+w.displayName = "GridTableHead";
+const L = g("flex items-center align-middle", {
+  variants: {
+    size: {
+      sm: "px-1 py-2",
+      default: "p-4",
+      lg: "p-6"
+    },
+    textAlign: {
+      left: "text-left justify-start",
+      center: "text-center justify-center",
+      right: "text-right justify-end"
+    },
+    gapBefore: {
+      sm: "pl-5",
+      md: "pl-10",
+      none: ""
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    textAlign: "left",
+    gapBefore: "none"
+  }
+}), z = l.forwardRef(
+  ({ className: e, size: t, span: a = 1, textAlign: n, gapBefore: i, ...f }, c) => /* @__PURE__ */ s(
+    j,
+    {
+      ref: c,
+      span: a,
+      className: r(
+        L({ size: t, textAlign: n, gapBefore: i, className: e })
+      ),
+      ...f
+    }
+  )
+);
+z.displayName = "GridTableCell";
+const $ = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+  "div",
+  {
+    ref: a,
+    className: r(
+      "col-span-full mt-4 text-sm text-muted-foreground",
+      e
+    ),
+    ...t
+  }
+));
+$.displayName = "GridTableCaption";
+const U = z, W = w;
+export {
+  A as GridTable,
+  R as GridTableBody,
+  $ as GridTableCaption,
+  z as GridTableCell,
+  S as GridTableFooter,
+  w as GridTableHead,
+  F as GridTableHeader,
+  E as GridTableRow,
+  U as Td,
+  W as Th,
+  L as gridTableCellVariants,
+  I as gridTableHeadVariants,
+  K as gridTableVariants
+};

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

@@ -0,0 +1,54 @@
+import { EditButton as r } from "./edit-button.js";
+import { GridTableCellAsset as o, GridTableCellUpdatable as d, GridTableEditable as b } from "./editable-grid-table.js";
+import { TableCellAsset as i, TableCellUpdatable as T, TableEditable as p } from "./editable-table.js";
+import { GridErrorLine as m } from "./grid-error-line.js";
+import { GridLoadingLine as f } from "./grid-loading-line.js";
+import { GridTable as C, GridTableBody as s, GridTableCaption as H, GridTableCell as L, GridTableFooter as V, GridTableHead as g, GridTableHeader as E, GridTableRow as u, Td as B, Th as S, gridTableCellVariants as U, gridTableHeadVariants as w, gridTableVariants as y } from "./grid-table.js";
+import { GridTableLoader as F } from "./grid-table-loader.js";
+import { SortingTableHead as h, Table as c, TableBody as j, TableCaption as k, TableCell as q, TableFooter as v, TableHead as z, TableHeader as D, TableRow as I, tableCellVariants as J, tableHeadVariants as K, tableVariants as M } from "./table.js";
+import { TableLoader as O } from "./table-loader.js";
+import { TableLoaderGuard as Q } from "./table-loader-guard.js";
+import { TableCellSm as X, TableLineSm as Y } from "./table-sm.js";
+import { UpdatedValue as _ } from "./updated-value.js";
+export {
+  r as EditButton,
+  m as GridErrorLine,
+  f as GridLoadingLine,
+  C as GridTable,
+  s as GridTableBody,
+  H as GridTableCaption,
+  L as GridTableCell,
+  o as GridTableCellAsset,
+  d as GridTableCellUpdatable,
+  b as GridTableEditable,
+  V as GridTableFooter,
+  g as GridTableHead,
+  E as GridTableHeader,
+  F as GridTableLoader,
+  u as GridTableRow,
+  h as SortingTableHead,
+  c as Table,
+  j as TableBody,
+  k as TableCaption,
+  q as TableCell,
+  i as TableCellAsset,
+  X as TableCellSm,
+  T as TableCellUpdatable,
+  p as TableEditable,
+  v as TableFooter,
+  z as TableHead,
+  D as TableHeader,
+  Y as TableLineSm,
+  O as TableLoader,
+  Q as TableLoaderGuard,
+  I as TableRow,
+  B as Td,
+  S as Th,
+  _ as UpdatedValue,
+  U as gridTableCellVariants,
+  w as gridTableHeadVariants,
+  y as gridTableVariants,
+  J as tableCellVariants,
+  K as tableHeadVariants,
+  M as tableVariants
+};

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

@@ -0,0 +1,31 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Guard as d } from "../guard/guard.js";
+import { TableLoader as f } from "./table-loader.js";
+function x({
+  showGuard: r,
+  children: a,
+  height: e = "70px",
+  columns: m = 6,
+  rows: t = 5,
+  ...p
+}) {
+  return /* @__PURE__ */ o(
+    d,
+    {
+      showGuard: r,
+      guard: r && /* @__PURE__ */ o(
+        f,
+        {
+          height: e,
+          columns: m,
+          rows: t,
+          ...p
+        }
+      ),
+      children: a
+    }
+  );
+}
+export {
+  x as TableLoaderGuard
+};

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

@@ -0,0 +1,25 @@
+import { jsx as i } from "react/jsx-runtime";
+import { GridLoadingLine as d } from "./grid-loading-line.js";
+import { GridTableBody as f } from "./grid-table.js";
+function c({
+  height: t = "70px",
+  columns: e = 6,
+  rows: r = 5,
+  cellClassName: m,
+  className: a,
+  ...n
+}) {
+  return /* @__PURE__ */ i(f, { className: a, ...n, children: Array.from({ length: r }, (l, o) => /* @__PURE__ */ i(
+    d,
+    {
+      height: t,
+      columns: e,
+      cellClassName: m,
+      last: o === r - 1
+    },
+    `${o}-${r}`
+  )) });
+}
+export {
+  c as TableLoader
+};

package/dist/esm/components/table/table-sm.js

@@ -0,0 +1,61 @@
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as t } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+function y({
+  title: r,
+  className: o,
+  children: e,
+  ...m
+}) {
+  return /* @__PURE__ */ i("div", { className: t("flex flex-col gap-1", o), ...m, children: [
+    r && /* @__PURE__ */ s("div", { className: "text-xs text-muted-foreground font-medium uppercase", children: r }),
+    /* @__PURE__ */ s("div", { className: "text-sm", children: e })
+  ] });
+}
+function L({
+  title: r,
+  columnsXs: o = 1,
+  columnsSm: e,
+  columnsMd: m,
+  columns: a,
+  className: n,
+  children: p,
+  ...x
+}) {
+  const l = o, c = e ?? l, d = m ?? c, g = a ?? d;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: t(
+        "flex flex-col gap-3 py-3 px-0 md:px-4 border-b border-border last:border-b-0",
+        n
+      ),
+      ...x,
+      children: [
+        r && /* @__PURE__ */ s("div", { className: "font-medium mb-2", children: r }),
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: "grid gap-2 md:gap-4 table-sm-grid",
+            style: {
+              "--grid-cols-xs": l,
+              "--grid-cols-sm": c,
+              "--grid-cols-md": d,
+              "--grid-cols-lg": g
+            },
+            children: p
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  y as TableCellSm,
+  L as TableLineSm
+};