@gearbox-protocol/permissionless-ui 1.22.0-next.3 → 1.22.0-next.31

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

@@ -1,10 +1,10 @@
 import { jsx as l } from "react/jsx-runtime";
-import { cva as c } from "class-variance-authority";
+import { cva as u } from "class-variance-authority";
 import * as r from "react";
-import { Col as h } from "../layout/col/col.js";
-import { Grid as T } from "../layout/grid/grid.js";
+import { Col as T } from "../layout/col/col.js";
+import { Grid as G } from "../layout/grid/grid.js";
 import { cn as s } from "../../utils/cn.js";
-const V = c("w-full", {
+const B = u("w-full", {
   variants: {
     size: {
       sm: "text-xs",
@@ -15,20 +15,20 @@ const V = c("w-full", {
   defaultVariants: {
     size: "default"
   }
-}), C = r.forwardRef(
-  ({ className: e, size: t, cols: a = 12, gap: o = 0, ...i }, n) => /* @__PURE__ */ l("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ l(
-    T,
+}), V = r.forwardRef(
+  ({ className: e, size: t, cols: a = 12, gap: d = 0, ...i }, n) => /* @__PURE__ */ l("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ l(
+    G,
     {
       ref: n,
       cols: a,
-      gap: o,
-      className: s(V({ size: t, className: e })),
+      gap: d,
+      className: s(B({ size: t, className: e })),
       ...i
     }
   ) })
 );
-C.displayName = "GridTable";
-const H = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
+V.displayName = "GridTable";
+const C = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
   "div",
   {
     ref: a,
@@ -36,13 +36,15 @@ const H = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
       "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
   }
 ));
-H.displayName = "GridTableHeader";
-const R = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
+C.displayName = "GridTableHeader";
+const H = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
   "div",
   {
     ref: a,
@@ -50,8 +52,8 @@ const R = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
     ...t
   }
 ));
-R.displayName = "GridTableBody";
-const D = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
+H.displayName = "GridTableBody";
+const R = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
   "div",
   {
     ref: a,
@@ -62,39 +64,39 @@ const D = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
     ...t
   }
 ));
-D.displayName = "GridTableFooter";
-const B = r.forwardRef(
+R.displayName = "GridTableFooter";
+const D = r.forwardRef(
   ({
     className: e,
     cols: t,
     gap: a = 0,
-    last: o,
+    last: d,
     height: i,
     hideValue: n,
-    noHover: v,
+    noHover: m,
     noRound: b,
     onRowClick: f,
-    style: u,
-    children: p,
-    ...g
-  }, y) => {
-    const m = typeof i == "number" ? `${i}px` : i, w = r.useCallback(
-      (d) => {
-        !f || d.target.closest("a, button, input, select, textarea, [role='button']") || f(d);
+    style: p,
+    children: g,
+    ...y
+  }, x) => {
+    const c = typeof i == "number" ? `${i}px` : i, j = r.useCallback(
+      (o) => {
+        !f || o.target.closest("a, button, input, select, textarea, [role='button']") || f(o);
       },
       [f]
-    ), z = r.useCallback(
-      (d) => {
-        if (f && (d.key === "Enter" || d.key === " ")) {
-          if (d.preventDefault(), d.target.closest(
+    ), w = r.useCallback(
+      (o) => {
+        if (f && (o.key === "Enter" || o.key === " ")) {
+          if (o.preventDefault(), o.target.closest(
             "a, button, input, select, textarea, [role='button']"
           ))
             return;
-          f(d);
+          f(o);
         }
       },
       [f]
-    ), x = s(
+    ), h = s(
       "[&>*]:relative [&>*]:transition-colors data-[state=selected]:[&>*]:bg-muted",
       // Bottom border via ::after with insets on first/last cells to avoid rounded corners
       "md:[&>*]:after:absolute md:[&>*]:after:bottom-0 md:[&>*]:after:inset-x-0 md:[&>*]:after:h-px md:[&>*]:after:bg-border",
@@ -103,14 +105,14 @@ const B = r.forwardRef(
         "md:[&>*:last-child]:after:right-3"
       ],
       // Hover background with optional rounded corners on first and last cells (unless noHover)
-      !v && [
+      !m && [
         "[&>*]:z-0",
         "[&>*]:before:absolute [&>*]:before:inset-0 [&>*]:before:-z-10 [&>*]:before:bg-muted/50 [&>*]:before:opacity-0 [&>*]:before:transition-opacity",
         "hover:[&>*]:before:opacity-100",
         // Only add rounded corners if noRound is not set
         !b && "[&>*:first-child]:before:rounded-l-lg [&>*:last-child]:before:rounded-r-lg"
       ],
-      o && "md:[&>*]:after:hidden",
+      d && "md:[&>*]:after:hidden",
       n && "[&>*]:opacity-0"
     );
     return f ? (
@@ -118,40 +120,40 @@ const B = r.forwardRef(
       /* @__PURE__ */ l(
         "div",
         {
-          ref: y,
+          ref: x,
           role: "row",
           tabIndex: 0,
           className: s(
             // Use subgrid to inherit parent grid columns
             "grid grid-cols-subgrid col-span-full",
-            x,
+            h,
             "cursor-pointer",
             e
           ),
-          style: { ...u, ...m ? { height: m } : {} },
-          onClick: w,
-          onKeyDown: z,
-          ...g,
-          children: p
+          style: { ...p, ...c ? { height: c } : {} },
+          onClick: j,
+          onKeyDown: w,
+          ...y,
+          children: g
         }
       )
     ) : /* @__PURE__ */ l(
-      T,
+      G,
       {
-        ref: y,
+        ref: x,
         cols: t,
         gap: a,
-        className: s("contents", x, e),
-        style: { ...u, ...m ? { height: m } : {} },
-        ...g,
-        children: p
+        className: s("contents", h, e),
+        style: { ...p, ...c ? { height: c } : {} },
+        ...y,
+        children: g
       }
     );
   }
 );
-B.displayName = "GridTableRow";
-const F = c(
-  "flex items-center justify-startborder-b text-left align-middle font-medium text-muted-foreground !bg-transparent",
+D.displayName = "GridTableRow";
+const A = u(
+  "flex items-center justify-start text-left align-middle font-medium text-muted-foreground !bg-transparent",
   {
     variants: {
       size: {
@@ -163,26 +165,34 @@ const F = c(
         start: "justify-start",
         center: "justify-center",
         end: "justify-end"
+      },
+      gapBefore: {
+        sm: "pl-5",
+        md: "pl-10",
+        none: ""
       }
     },
     defaultVariants: {
       size: "default",
-      justify: "start"
+      justify: "start",
+      gapBefore: "none"
     }
   }
-), G = r.forwardRef(
-  ({ className: e, size: t, span: a = 1, justify: o = "start", ...i }, n) => /* @__PURE__ */ l(
-    h,
+), N = r.forwardRef(
+  ({ className: e, size: t, span: a = 1, justify: d = "start", gapBefore: i, ...n }, m) => /* @__PURE__ */ l(
+    T,
     {
-      ref: n,
+      ref: m,
       span: a,
-      className: s(F({ size: t, justify: o, className: e })),
-      ...i
+      className: s(
+        A({ size: t, justify: d, gapBefore: i, className: e })
+      ),
+      ...n
     }
   )
 );
-G.displayName = "GridTableHead";
-const K = c("align-middle", {
+N.displayName = "GridTableHead";
+const F = u("flex items-center align-middle", {
   variants: {
     size: {
       sm: "p-2",
@@ -190,27 +200,36 @@ const K = c("align-middle", {
       lg: "p-6"
     },
     textAlign: {
-      left: "text-left",
-      center: "text-center",
-      right: "text-right"
+      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"
+    size: "default",
+    textAlign: "left",
+    gapBefore: "none"
   }
-}), N = r.forwardRef(
-  ({ className: e, size: t, span: a = 1, textAlign: o, ...i }, n) => /* @__PURE__ */ l(
-    h,
+}), v = r.forwardRef(
+  ({ className: e, size: t, span: a = 1, textAlign: d, gapBefore: i, ...n }, m) => /* @__PURE__ */ l(
+    T,
     {
-      ref: n,
+      ref: m,
       span: a,
-      className: s(K({ size: t, textAlign: o, className: e })),
-      ...i
+      className: s(
+        F({ size: t, textAlign: d, gapBefore: i, className: e })
+      ),
+      ...n
     }
   )
 );
-N.displayName = "GridTableCell";
-const A = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
+v.displayName = "GridTableCell";
+const K = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
   "div",
   {
     ref: a,
@@ -221,20 +240,20 @@ const A = r.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ l(
     ...t
   }
 ));
-A.displayName = "GridTableCaption";
-const q = N, J = G;
+K.displayName = "GridTableCaption";
+const q = v, J = N;
 export {
-  C as GridTable,
-  R as GridTableBody,
-  A as GridTableCaption,
-  N as GridTableCell,
-  D as GridTableFooter,
-  G as GridTableHead,
-  H as GridTableHeader,
-  B as GridTableRow,
+  V as GridTable,
+  H as GridTableBody,
+  K as GridTableCaption,
+  v as GridTableCell,
+  R as GridTableFooter,
+  N as GridTableHead,
+  C as GridTableHeader,
+  D as GridTableRow,
   q as Td,
   J as Th,
-  K as gridTableCellVariants,
-  F as gridTableHeadVariants,
-  V as gridTableVariants
+  F as gridTableCellVariants,
+  A as gridTableHeadVariants,
+  B as gridTableVariants
 };

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

@@ -1,8 +1,8 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as t } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 function h({
   title: s,
   className: o,
@@ -10,7 +10,7 @@ function h({
   ...l
 }) {
   return /* @__PURE__ */ i("div", { className: t("flex flex-col gap-1", o), ...l, children: [
-    s && /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground font-medium", children: s }),
+    s && /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground font-medium uppercase", children: s }),
     /* @__PURE__ */ e("div", { className: "text-sm", children: r })
   ] });
 }
@@ -21,10 +21,10 @@ function S({
   columnsMd: l,
   columns: a,
   className: n,
-  children: x,
-  ...g
+  children: p,
+  ...x
 }) {
-  const m = o, c = r ?? m, d = l ?? c, p = a ?? d;
+  const c = o, m = r ?? c, d = l ?? m, g = a ?? d;
   return /* @__PURE__ */ i(
     "div",
     {
@@ -32,7 +32,7 @@ function S({
         "flex flex-col gap-3 py-3 px-0 md:px-4 border-b border-border",
         n
       ),
-      ...g,
+      ...x,
       children: [
         s && /* @__PURE__ */ e("div", { className: "font-medium mb-2", children: s }),
         /* @__PURE__ */ e(
@@ -40,12 +40,12 @@ function S({
           {
             className: "grid gap-2 md:gap-4 table-sm-grid",
             style: {
-              "--grid-cols-xs": m,
-              "--grid-cols-sm": c,
+              "--grid-cols-xs": c,
+              "--grid-cols-sm": m,
               "--grid-cols-md": d,
-              "--grid-cols-lg": p
+              "--grid-cols-lg": g
             },
-            children: x
+            children: p
           }
         )
       ]

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

@@ -3,10 +3,10 @@ import { cva as d } from "class-variance-authority";
 import { ArrowDown as u } from "lucide-react";
 import * as l from "react";
 import { Button as g } from "../buttons/button/button.js";
-import { TooltipProvider as h, Tooltip as x, TooltipTrigger as T, TooltipContent as N } from "../tooltip/tooltip.js";
+import { TooltipProvider as x, Tooltip as h, TooltipTrigger as T, TooltipContent as N } from "../tooltip/tooltip.js";
+import "@gearbox-protocol/sdk";
 import { cn as o } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const w = d("w-full caption-bottom", {
   variants: {
     size: {
@@ -80,7 +80,7 @@ const C = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
 ));
 C.displayName = "TableRow";
 const H = d(
-  "border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground border-input",
+  "border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground border-input flex items-center",
   {
     variants: {
       size: {
@@ -104,7 +104,7 @@ const H = d(
   )
 );
 n.displayName = "TableHead";
-const V = d("align-middle", {
+const V = d("align-middle flex items-center", {
   variants: {
     size: {
       sm: "p-1",
@@ -145,7 +145,7 @@ const S = l.forwardRef(
     children: m,
     className: b,
     ...c
-  }, p) => /* @__PURE__ */ r(n, { ref: p, className: b, ...c, children: /* @__PURE__ */ r(h, { children: /* @__PURE__ */ i(x, { delayDuration: 200, children: [
+  }, p) => /* @__PURE__ */ r(n, { ref: p, className: b, ...c, children: /* @__PURE__ */ r(x, { children: /* @__PURE__ */ i(h, { delayDuration: 200, children: [
     /* @__PURE__ */ r(T, { asChild: !0, children: /* @__PURE__ */ i(
       "div",
       {

package/dist/esm/components/tabs/tabs.js

@@ -1,9 +1,9 @@
 import { jsx as o } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-tabs";
 import * as i from "react";
+import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const g = e.Root, n = i.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ o(
   e.List,
   {

package/dist/esm/components/text-button/text-button.js

@@ -1,55 +1,107 @@
-import { jsxs as h, jsx as e } from "react/jsx-runtime";
-import * as d from "react";
-import { cn as g } from "../../utils/cn.js";
-import "sonner";
+import { jsxs as v, Fragment as D, jsx as t } from "react/jsx-runtime";
+import { cva as n } from "class-variance-authority";
+import * as g from "react";
 import "@gearbox-protocol/sdk";
-const v = {
-  sm: "text-xs",
-  md: "text-sm",
-  lg: "text-base"
-}, m = {
-  primary: "text-primary hover:text-primary/80",
-  secondary: "text-secondary-foreground hover:text-secondary-foreground/80",
-  muted: "text-muted-foreground hover:text-foreground",
-  primaryDashed: "text-primary hover:text-primary/80 border-b border-dashed border-primary",
-  secondaryDashed: "text-secondary-foreground hover:text-secondary-foreground/80 border-b border-dashed border-secondary-foreground",
-  empty: "text-foreground hover:text-foreground/80"
-}, N = d.forwardRef(
+import { cn as o } from "../../utils/cn.js";
+import "sonner";
+const f = n("", {
+  variants: {
+    buttonColor: {
+      primaryDashed: "text-foreground",
+      secondaryDashed: "text-secondary-foreground group-hover:text-foreground",
+      empty: "text-foreground"
+    }
+  },
+  defaultVariants: {
+    buttonColor: "primaryDashed"
+  }
+}), w = n("", {
+  variants: {
+    size: {
+      sm: "text-[13px] leading-[15px]",
+      default: "",
+      md: "",
+      lg: "text-base"
+    },
+    width: {
+      compact: "w-auto",
+      wide: "w-full"
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    width: "compact"
+  }
+}), N = n("", {
+  variants: {
+    borderColor: {
+      primaryDashed: "border-b border-dashed border-secondary-foreground group-hover:border-foreground",
+      secondaryDashed: "border-b border-dashed border-secondary-foreground group-hover:border-foreground",
+      empty: ""
+    },
+    defaultVariants: {
+      primaryDashed: "primaryDashed"
+    }
+  }
+}), V = g.forwardRef(
   ({
-    children: o,
-    $icon: i,
-    icon: c,
-    $size: l = "md",
-    size: p,
-    $color: x = "primary",
-    color: u,
-    as: t = "button",
-    className: f,
-    ...s
-  }, n) => {
-    const r = c || i, y = p || l, b = u || x, a = g(
-      "inline-flex items-center gap-1 bg-transparent border-none cursor-pointer transition-colors",
-      "hover:underline underline-offset-2",
-      v[y],
-      m[b] || m.primary,
-      f
-    );
-    return t === "button" ? /* @__PURE__ */ h("button", { ref: n, className: a, ...s, children: [
-      /* @__PURE__ */ e("span", { children: o }),
-      r && /* @__PURE__ */ e("span", { className: "ml-1", children: r })
-    ] }) : d.createElement(
-      t,
+    children: y,
+    icon: s,
+    size: h = "default",
+    buttonColor: e = "primaryDashed",
+    width: x = "compact",
+    as: a = "button",
+    className: b,
+    disabled: r,
+    ...d
+  }, c) => {
+    const i = a === "a", l = o(
+      "group inline-block p-0 leading-[100%] font-normal bg-transparent border-none cursor-pointer transition-colors",
+      w({ size: h, width: x }),
+      !i && f({ buttonColor: e }),
+      r && "text-gray-110 cursor-default [&_svg]:text-gray-110",
+      b
+    ), p = i ? o(f({ buttonColor: e }), r && "text-gray-110") : null, u = /* @__PURE__ */ v(D, { children: [
+      /* @__PURE__ */ t(
+        "span",
+        {
+          className: o(
+            "inline-block",
+            N({ borderColor: e }),
+            r && e !== "empty" && "border-gray-110"
+          ),
+          children: y
+        }
+      ),
+      s && /* @__PURE__ */ t(
+        "span",
+        {
+          className: o(
+            "ml-1.5 [&_svg]:fill-current",
+            r ? "text-gray-110" : "text-gray-90 group-hover:text-foreground"
+          ),
+          children: s
+        }
+      )
+    ] }), m = p ? /* @__PURE__ */ t("span", { className: p, children: u }) : u;
+    return a === "button" ? /* @__PURE__ */ t(
+      "button",
       {
-        ref: n,
-        className: a,
-        ...s
-      },
-      /* @__PURE__ */ e("span", { children: o }),
-      r && /* @__PURE__ */ e("span", { className: "ml-1", children: r })
+        ref: c,
+        type: "button",
+        className: l,
+        disabled: r,
+        ...d,
+        children: m
+      }
+    ) : g.createElement(
+      a,
+      { ref: c, className: l, ...d },
+      m
     );
   }
 );
-N.displayName = "TextButton";
+V.displayName = "TextButton";
 export {
-  N as TextButton
+  V as TextButton
 };

package/dist/esm/components/textarea/textarea.js

@@ -1,9 +1,9 @@
 import { jsx as i } from "react/jsx-runtime";
 import { cva as l } from "class-variance-authority";
 import * as s from "react";
+import "@gearbox-protocol/sdk";
 import { cn as n } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const d = l(
   "flex w-full rounded-md border border-[rgb(100,100,100)] px-3 py-2 shadow-sm transition-colors placeholder:text-muted-foreground/70 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm bg-[rgb(40,40,40)] text-foreground focus:bg-[rgb(40,40,40)] active:bg-[rgb(40,40,40)] [&:not(:placeholder-shown)]:bg-[rgb(40,40,40)] autofill:bg-[rgb(40,40,40)] [-webkit-autofill]:bg-[rgb(40,40,40)] [&:-webkit-autofill]:shadow-[0_0_0_1000px_rgb(40,40,40)_inset] [&:-webkit-autofill]:[text-fill-color:currentColor] outline-none",
   {