@gearbox-protocol/permissionless-ui 1.22.0-next.7 → 1.22.0-next.70

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

@@ -1,12 +1,15 @@
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
 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 { Button as u } from "../buttons/button/button.js";
+import { faArrowDown as g } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as x } from "../icons/fa-icon.js";
+import "../tooltip/simple-tooltip.js";
+import { TooltipProvider as h, Tooltip as T, TooltipTrigger as N, TooltipContent as y } from "../tooltip/tooltip.js";
+import "@gearbox-protocol/sdk";
 import { cn as o } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 const w = d("w-full caption-bottom", {
   variants: {
     size: {
@@ -18,18 +21,18 @@ const w = d("w-full caption-bottom", {
   defaultVariants: {
     size: "default"
   }
-}), y = l.forwardRef(
-  ({ className: t, size: a, ...e }, s) => /* @__PURE__ */ r("div", { className: "relative w-full overflow-auto rounded-lg border border-input bg-card", children: /* @__PURE__ */ r(
+}), v = l.forwardRef(
+  ({ className: t, size: a, ...e }, i) => /* @__PURE__ */ r("div", { className: "relative w-full overflow-auto rounded-lg border border-input bg-card", children: /* @__PURE__ */ r(
     "table",
     {
-      ref: s,
+      ref: i,
       className: o(w({ size: a, className: t })),
       ...e
     }
   ) })
 );
-y.displayName = "Table";
-const v = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
+v.displayName = "Table";
+const R = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "thead",
   {
     ref: e,
@@ -40,8 +43,8 @@ const v = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
     ...a
   }
 ));
-v.displayName = "TableHeader";
-const R = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
+R.displayName = "TableHeader";
+const z = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "tbody",
   {
     ref: e,
@@ -49,8 +52,8 @@ const R = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
     ...a
   }
 ));
-R.displayName = "TableBody";
-const z = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
+z.displayName = "TableBody";
+const C = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "tfoot",
   {
     ref: e,
@@ -61,8 +64,8 @@ const z = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
     ...a
   }
 ));
-z.displayName = "TableFooter";
-const C = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
+C.displayName = "TableFooter";
+const H = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "tr",
   {
     ref: e,
@@ -78,9 +81,9 @@ const C = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
     ...a
   }
 ));
-C.displayName = "TableRow";
-const H = d(
-  "border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground border-input",
+H.displayName = "TableRow";
+const V = d(
+  "border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground border-input flex items-center",
   {
     variants: {
       size: {
@@ -94,17 +97,17 @@ const H = d(
     }
   }
 ), n = l.forwardRef(
-  ({ className: t, size: a, ...e }, s) => /* @__PURE__ */ r(
+  ({ className: t, size: a, ...e }, i) => /* @__PURE__ */ r(
     "th",
     {
-      ref: s,
-      className: o(H({ size: a, className: t })),
+      ref: i,
+      className: o(V({ size: a, className: t })),
       ...e
     }
   )
 );
 n.displayName = "TableHead";
-const V = d("align-middle", {
+const _ = d("align-middle flex items-center", {
   variants: {
     size: {
       sm: "p-1",
@@ -115,18 +118,18 @@ const V = d("align-middle", {
   defaultVariants: {
     size: "default"
   }
-}), _ = l.forwardRef(
-  ({ className: t, size: a, ...e }, s) => /* @__PURE__ */ r(
+}), B = l.forwardRef(
+  ({ className: t, size: a, ...e }, i) => /* @__PURE__ */ r(
     "td",
     {
-      ref: s,
-      className: o(V({ size: a, className: t })),
+      ref: i,
+      className: o(_({ size: a, className: t })),
       ...e
     }
   )
 );
-_.displayName = "TableCell";
-const B = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
+B.displayName = "TableCell";
+const F = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
   "caption",
   {
     ref: e,
@@ -134,39 +137,40 @@ const B = l.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ r(
     ...a
   }
 ));
-B.displayName = "TableCaption";
+F.displayName = "TableCaption";
 const S = l.forwardRef(
   ({
     title: t,
     isSorted: a,
     direction: e,
-    setSort: s,
+    setSort: i,
     placement: f = "right",
     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: [
-    /* @__PURE__ */ r(T, { asChild: !0, children: /* @__PURE__ */ i(
+    className: c,
+    ...b
+  }, p) => /* @__PURE__ */ r(n, { ref: p, className: c, ...b, children: /* @__PURE__ */ r(h, { children: /* @__PURE__ */ s(T, { delayDuration: 200, children: [
+    /* @__PURE__ */ r(N, { asChild: !0, children: /* @__PURE__ */ s(
       "div",
       {
         className: o(
           "group flex items-center gap-1 w-fit cursor-pointer hover:text-foreground",
           f === "left" ? "flex-row-reverse" : "flex-row"
         ),
-        onClick: () => s(e === "asc" ? "desc" : "asc"),
+        onClick: () => i(e === "asc" ? "desc" : "asc"),
         children: [
           m,
           /* @__PURE__ */ r(
-            g,
+            u,
             {
               variant: "text",
               size: "auto",
               className: a ? void 0 : "opacity-0 group-hover:opacity-100",
               children: /* @__PURE__ */ r(
-                u,
+                x,
                 {
+                  icon: g,
                   className: o(
-                    "h-4 w-4",
+                    "size-4",
                     e === "desc" ? "rotate-180" : "",
                     "transition-transform duration-200 ease-in-out"
                   )
@@ -177,7 +181,7 @@ const S = l.forwardRef(
         ]
       }
     ) }),
-    /* @__PURE__ */ i(N, { side: "top", children: [
+    /* @__PURE__ */ s(y, { side: "top", children: [
       "Sort by ",
       t
     ] })
@@ -186,15 +190,15 @@ const S = l.forwardRef(
 S.displayName = "SortingTableHead";
 export {
   S as SortingTableHead,
-  y as Table,
-  R as TableBody,
-  B as TableCaption,
-  _ as TableCell,
-  z as TableFooter,
+  v as Table,
+  z as TableBody,
+  F as TableCaption,
+  B as TableCell,
+  C as TableFooter,
   n as TableHead,
-  v as TableHeader,
-  C as TableRow,
-  V as tableCellVariants,
-  H as tableHeadVariants,
+  R as TableHeader,
+  H as TableRow,
+  _ as tableCellVariants,
+  V as tableHeadVariants,
   w as tableVariants
 };

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

@@ -1,47 +1,48 @@
 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(
+import "luxon";
+const p = e.Root, n = i.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ o(
   e.List,
   {
-    ref: r,
+    ref: a,
     className: s(
       "inline-flex h-fit items-center justify-start bg-muted p-1 text-muted-foreground bg-transparent p-0 space-x-6 overflow-x-auto overflow-y-hidden navbar-scrollbar min-w-max",
       t
     ),
-    ...a
+    ...r
   }
 ));
 n.displayName = e.List.displayName;
-const d = i.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ o(
+const d = i.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ o(
   e.Trigger,
   {
-    ref: r,
+    ref: a,
     className: s(
       "inline-flex items-center justify-center whitespace-nowrap px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow rounded-none border-b-2 border-transparent px-2 py-2 text-gray-400 hover:text-foreground data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground focus:outline-none cursor-pointer shrink-0",
       t
     ),
-    ...a
+    ...r
   }
 ));
 d.displayName = e.Trigger.displayName;
-const f = i.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ o(
+const f = i.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ o(
   e.Content,
   {
-    ref: r,
+    ref: a,
     className: s(
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       t
     ),
-    ...a
+    ...r
   }
 ));
 f.displayName = e.Content.displayName;
 export {
-  g as Tabs,
+  p as Tabs,
   f as TabsContent,
   n as TabsList,
   d as TabsTrigger

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

@@ -1,55 +1,108 @@
-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 e } 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";
+import "luxon";
+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: t = "primaryDashed",
+    width: x = "compact",
+    as: a = "button",
+    className: b,
+    disabled: r,
+    ...d
+  }, c) => {
+    const i = a === "a", p = 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: t }),
+      r && "text-gray-110 cursor-default [&_svg]:text-gray-110",
+      b
+    ), l = i ? o(f({ buttonColor: t }), r && "text-gray-110") : null, u = /* @__PURE__ */ v(D, { children: [
+      /* @__PURE__ */ e(
+        "span",
+        {
+          className: o(
+            "inline-block",
+            N({ borderColor: t }),
+            r && t !== "empty" && "border-gray-110"
+          ),
+          children: y
+        }
+      ),
+      s && /* @__PURE__ */ e(
+        "span",
+        {
+          className: o(
+            "ml-1.5 [&_svg]:fill-current",
+            r ? "text-gray-110" : "text-gray-90 group-hover:text-foreground"
+          ),
+          children: s
+        }
+      )
+    ] }), m = l ? /* @__PURE__ */ e("span", { className: l, children: u }) : u;
+    return a === "button" ? /* @__PURE__ */ e(
+      "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: p,
+        disabled: r,
+        ...d,
+        children: m
+      }
+    ) : g.createElement(
+      a,
+      { ref: c, className: p, ...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,10 @@
 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";
+import "luxon";
 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",
   {
@@ -24,10 +25,10 @@ const d = l(
     }
   }
 ), b = s.forwardRef(
-  ({ className: t, size: e, variant: r, ...o }, a) => /* @__PURE__ */ i(
+  ({ className: t, size: r, variant: e, ...o }, a) => /* @__PURE__ */ i(
     "textarea",
     {
-      className: n(d({ size: e, variant: r, className: t })),
+      className: n(d({ size: r, variant: e, className: t })),
       ref: a,
       ...o
     }