@gearbox-protocol/ui-kit 4.0.0-next.9 → 4.0.1

package/dist/esm/components/buttons/back-button/back-button.js

@@ -1,15 +1,11 @@
 import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import { cva as f } from "class-variance-authority";
-import { faArrowLeft as u } from "@fortawesome/free-solid-svg-icons";
+import { faArrowLeft as f } from "@fortawesome/free-solid-svg-icons";
+import { cva as u } from "class-variance-authority";
 import { FaIcon as c } from "../../icons/fa-icon.js";
-import "react";
-import "@gearbox-protocol/sdk";
-import { cn as p } from "../../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import { cn as x } from "../../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../utils/z-index.js";
-const x = f("flex items-center transition-colors", {
+const l = u("flex items-center transition-colors", {
   variants: {
     variant: {
       default: "text-muted-foreground hover:text-foreground",
@@ -27,37 +23,36 @@ const x = f("flex items-center transition-colors", {
     size: "default"
   }
 });
-function l({
+function d({
   href: t,
   className: r,
-  onClick: o,
-  children: e
+  onClick: e,
+  children: o
 }) {
-  return /* @__PURE__ */ a("a", { href: t, className: r, onClick: o, children: e });
+  return /* @__PURE__ */ a("a", { href: t, className: r, onClick: e, children: o });
 }
-function N({
+function z({
   href: t,
   text: r,
-  onClick: o,
-  className: e,
+  onClick: e,
+  className: o,
   variant: i,
-  size: m,
-  LinkComponent: n = l
+  size: n,
+  LinkComponent: m = d
 }) {
   return /* @__PURE__ */ s(
-    n,
+    m,
     {
       href: t,
-      className: p(x({ variant: i, size: m, className: e })),
-      onClick: o,
+      className: x(l({ variant: i, size: n, className: o })),
+      onClick: e,
       children: [
-        /* @__PURE__ */ a(c, { icon: u, className: "mr-2 size-4" }),
+        /* @__PURE__ */ a(c, { icon: f, className: "mr-2 size-4" }),
         r || "Back"
       ]
     }
   );
 }
 export {
-  N as BackButton,
-  x as backButtonVariants
+  z as BackButton
 };

package/dist/esm/components/buttons/back-button/index.js

@@ -1,5 +1,4 @@
-import { BackButton as o, backButtonVariants as n } from "./back-button.js";
+import { BackButton as r } from "./back-button.js";
 export {
-  o as BackButton,
-  n as backButtonVariants
+  r as BackButton
 };

package/dist/esm/components/buttons/button/button.js

@@ -1,109 +1,41 @@
-import { jsx as u } from "react/jsx-runtime";
-import { Slot as c } from "@radix-ui/react-slot";
-import { cva as x } from "class-variance-authority";
-import * as y from "react";
-import "@gearbox-protocol/sdk";
-import { cn as e } from "../../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import { jsx as l } from "react/jsx-runtime";
+import { Slot as u } from "@radix-ui/react-slot";
+import * as C from "react";
+import { cn as k } from "../../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../utils/z-index.js";
-const h = x(
-  // TODO: remove !
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer disabled:!cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([style*='width']):not([style*='height'])]:size-4 [&_svg]:shrink-0 border border-transparent outline-none focus-visible:outline-none",
-  {
-    variants: {
-      variant: {
-        default: e(
-          "text-primary-foreground bg-primary border border-primary",
-          "hover:bg-accent hover:border-accent",
-          "disabled:text-secondary-foreground disabled:bg-gray-20 disabled:border-gray-20"
-        ),
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 disabled:opacity-50",
-        outline: e(
-          "text-primary-foreground bg-transparent border border-gray-40",
-          "hover:bg-gray-60 hover:border-gray-60",
-          "disabled:text-secondary-foreground disabled:bg-gray-20 disabled:border-gray-20"
-        ),
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 disabled:opacity-50",
-        ghost: "hover:bg-secondary hover:text-accent-foreground disabled:opacity-50",
-        white: e(
-          "font-medium text-white-foreground bg-white border border-white",
-          "shadow-[0_1px_1px_0_rgba(0,0,0,0.15)]",
-          "hover:shadow-[0_3px_3px_0_rgba(0,0,0,0.25)]",
-          "disabled:text-gray-80 disabled:bg-gray-110 disabled:border-gray-110",
-          "disabled:shadow-[0_1px_1px_0_rgba(0,0,0,0.15)]"
-        ),
-        neutral: e(
-          "text-primary-foreground bg-gray-60 border border-gray-60",
-          "hover:bg-gray-90 hover:border-gray-90",
-          "disabled:text-secondary-foreground disabled:bg-gray-20 disabled:border-gray-20"
-        ),
-        success: e(
-          "font-medium text-success-foreground bg-success border border-success",
-          "hover:bg-success-hover hover:border-success-hover",
-          "disabled:text-secondary-foreground disabled:bg-gray-20 disabled:border-gray-20"
-        ),
-        link: "text-primary underline-offset-4 hover:underline disabled:opacity-50",
-        text: "text-muted-foreground hover:text-foreground hover:bg-transparent disabled:opacity-50",
-        pink: "bg-pink-700 hover:bg-pink-600 disabled:bg-pink-700 text-primary-foreground disabled:opacity-50",
-        "pink-outline": "border-pink-700 hover:border-pink-600 disabled:border-pink-700 text-foreground disabled:opacity-50",
-        blue: "bg-blue-800 hover:bg-blue-700 disabled:bg-blue-700 text-primary-foreground disabled:opacity-50",
-        "blue-outline": "border-blue-800 hover:border-blue-700 disabled:border-blue-800 text-foreground disabled:opacity-50"
-      },
-      // TODO: remove !
-      size: {
-        auto: "h-auto p-1.5",
-        xs: "px-3 py-0.5 text-xs rounded-full",
-        sm: "h-7 px-3 !text-xs !leading-[14px] rounded-[6px]",
-        md: "h-8 px-3.5 !text-sm !leading-4 rounded-[8px]",
-        default: "px-4 h-[40px] !text-[15px] !leading-[18px] rounded-[12px]",
-        lg: "px-4 h-[44px] !text-[16px] !leading-[19px] rounded-[22px]",
-        icon: "h-9 w-9 p-2"
-      },
-      width: {
-        compact: "w-auto",
-        wide: "w-full"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      width: "compact"
-    }
-  }
-), f = y.forwardRef(
+import { buttonVariants as x } from "./button.variants.js";
+const B = C.forwardRef(
   ({
-    className: t,
-    variant: d,
-    size: a,
-    width: i,
-    asChild: s = !1,
+    className: r,
+    variant: m,
+    size: n,
+    width: a,
+    asChild: p = !1,
     disabled: o,
-    onClick: n,
-    ...b
-  }, g) => {
-    const l = s ? c : "button", p = (r) => {
+    onClick: i,
+    ...f
+  }, s) => {
+    const e = p ? u : "button", c = (t) => {
       if (o) {
-        r.preventDefault(), r.stopPropagation();
+        t.preventDefault(), t.stopPropagation();
         return;
       }
-      n?.(r);
+      i?.(t);
     };
-    return /* @__PURE__ */ u(
-      l,
+    return /* @__PURE__ */ l(
+      e,
       {
-        className: e(h({ variant: d, size: a, className: t, width: i })),
-        ref: g,
+        className: k(x({ variant: m, size: n, className: r, width: a })),
+        ref: s,
         disabled: o,
-        onClick: p,
-        ...b
+        onClick: c,
+        ...f
       }
     );
   }
 );
-f.displayName = "Button";
+B.displayName = "Button";
 export {
-  f as Button,
-  h as buttonVariants
+  B as Button
 };

package/dist/esm/components/buttons/button/button.variants.js

@@ -0,0 +1,72 @@
+import { cva as r } from "class-variance-authority";
+import { cn as e } from "../../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import "../../../utils/z-index.js";
+const i = r(
+  // TODO: remove !
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer disabled:!cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([style*='width']):not([style*='height'])]:size-4 [&_svg]:shrink-0 border border-transparent outline-none focus-visible:outline-none",
+  {
+    variants: {
+      variant: {
+        default: e(
+          "text-primary-foreground bg-primary border border-primary",
+          "hover:bg-accent hover:border-accent",
+          "disabled:text-secondary-foreground disabled:bg-gray-20 disabled:border-gray-20"
+        ),
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 disabled:opacity-50",
+        outline: e(
+          "text-primary-foreground bg-transparent border border-gray-40",
+          "hover:bg-gray-60 hover:border-gray-60",
+          "disabled:text-secondary-foreground disabled:bg-gray-20 disabled:border-gray-20"
+        ),
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 disabled:opacity-50",
+        ghost: "hover:bg-secondary hover:text-accent-foreground disabled:opacity-50",
+        white: e(
+          "font-medium text-white-foreground bg-white border border-white",
+          "shadow-[0_1px_1px_0_rgba(0,0,0,0.15)]",
+          "hover:shadow-[0_3px_3px_0_rgba(0,0,0,0.25)]",
+          "disabled:text-gray-80 disabled:bg-gray-110 disabled:border-gray-110",
+          "disabled:shadow-[0_1px_1px_0_rgba(0,0,0,0.15)]"
+        ),
+        neutral: e(
+          "text-primary-foreground bg-gray-60 border border-gray-60",
+          "hover:bg-gray-90 hover:border-gray-90",
+          "disabled:text-secondary-foreground disabled:bg-gray-20 disabled:border-gray-20"
+        ),
+        success: e(
+          "font-medium text-success-foreground bg-success border border-success",
+          "hover:bg-success-hover hover:border-success-hover",
+          "disabled:text-secondary-foreground disabled:bg-gray-20 disabled:border-gray-20"
+        ),
+        link: "text-primary underline-offset-4 hover:underline disabled:opacity-50",
+        text: "text-muted-foreground hover:text-foreground hover:bg-transparent disabled:opacity-50",
+        pink: "bg-pink-700 hover:bg-pink-600 disabled:bg-pink-700 text-primary-foreground disabled:opacity-50",
+        "pink-outline": "border-pink-700 hover:border-pink-600 disabled:border-pink-700 text-foreground disabled:opacity-50",
+        blue: "bg-blue-800 hover:bg-blue-700 disabled:bg-blue-700 text-primary-foreground disabled:opacity-50",
+        "blue-outline": "border-blue-800 hover:border-blue-700 disabled:border-blue-800 text-foreground disabled:opacity-50"
+      },
+      // TODO: remove !
+      size: {
+        auto: "h-auto p-1.5",
+        xs: "px-3 py-0.5 text-xs rounded-full",
+        sm: "h-7 px-3 !text-xs !leading-[14px] rounded-[6px]",
+        md: "h-8 px-3.5 !text-sm !leading-4 rounded-[8px]",
+        default: "px-4 h-[40px] !text-[15px] !leading-[18px] rounded-[12px]",
+        lg: "px-4 h-[44px] !text-[16px] !leading-[19px] rounded-[22px]",
+        icon: "h-9 w-9 p-2"
+      },
+      width: {
+        compact: "w-auto",
+        wide: "w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      width: "compact"
+    }
+  }
+);
+export {
+  i as buttonVariants
+};

package/dist/esm/components/buttons/button/index.js

@@ -1,5 +1,4 @@
-import { Button as n, buttonVariants as r } from "./button.js";
+import { Button as r } from "./button.js";
 export {
-  n as Button,
-  r as buttonVariants
+  r as Button
 };

package/dist/esm/components/buttons/copy-button/copy-button.js

@@ -1,67 +1,57 @@
-import { jsxs as y, jsx as t } from "react/jsx-runtime";
-import { IconCopy as h } from "@gearbox-protocol/static";
-import * as r from "react";
-import { Button as C } from "../button/button.js";
-import { faCheck as x } from "@fortawesome/free-solid-svg-icons";
-import { FaIcon as w } from "../../icons/fa-icon.js";
-import "@gearbox-protocol/sdk";
-import { cn as i } from "../../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { faCheck as f } from "@fortawesome/free-solid-svg-icons";
+import { IconCopy as y } from "@gearbox-protocol/static";
+import * as d from "react";
+import { Button as u } from "../button/button.js";
+import { FaIcon as C } from "../../icons/fa-icon.js";
+import { useCopyToClipboard as h } from "../../../hooks/use-copy-to-clipboard.js";
+import { cn as e } from "../../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../utils/z-index.js";
-const N = {
+const x = {
   3: "h-3 w-3",
   "3.5": "h-3.5 w-3.5",
   4: "h-4 w-4",
   5: "h-5 w-5",
   6: "h-6 w-6"
-}, b = {
+}, w = {
   3: 12,
   "3.5": 14,
   4: 16,
   5: 20,
   6: 24
-}, j = r.forwardRef(
-  ({ text: n, className: l, iconSize: a = "3.5", successDuration: p = 1500, ...m }, u) => {
-    const [e, s] = r.useState(!1), o = r.useRef(null), f = async () => {
-      try {
-        await navigator.clipboard.writeText(n), o.current && clearTimeout(o.current), s(!0), o.current = setTimeout(() => {
-          s(!1);
-        }, p);
-      } catch (d) {
-        console.error("Failed to copy:", d);
-      }
-    }, c = N[a];
-    return /* @__PURE__ */ y(
-      C,
+}, N = d.forwardRef(
+  ({ text: r, className: s, iconSize: i = "3.5", successDuration: c = 1500, ...n }, p) => {
+    const { isCopied: t, copy: l } = h(c), a = x[i];
+    return /* @__PURE__ */ m(
+      u,
       {
-        ref: u,
+        ref: p,
         variant: "text",
         size: "auto",
-        className: i("p-1! border-0! relative", l),
-        onClick: f,
-        title: e ? "Copied!" : "Copy to clipboard",
-        ...m,
+        className: e("p-1! border-0! relative", s),
+        onClick: () => l(r),
+        title: t ? "Copied!" : "Copy to clipboard",
+        ...n,
         children: [
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ o(
             "span",
             {
-              className: i(
+              className: e(
                 "absolute inset-0 flex items-center justify-center transition-all duration-200",
-                e ? "opacity-100 scale-100 text-green-500" : "opacity-0 scale-50 text-green-500"
+                t ? "opacity-100 scale-100 text-green-500" : "opacity-0 scale-50 text-green-500"
               ),
-              children: /* @__PURE__ */ t(w, { icon: x, className: c })
+              children: /* @__PURE__ */ o(C, { icon: f, className: a })
             }
           ),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ o(
             "span",
             {
-              className: i(
+              className: e(
                 "flex items-center justify-center transition-all duration-200",
-                e ? "opacity-0 scale-50" : "opacity-100 scale-100"
+                t ? "opacity-0 scale-50" : "opacity-100 scale-100"
               ),
-              children: /* @__PURE__ */ t(h, { size: b[a], className: c })
+              children: /* @__PURE__ */ o(y, { size: w[i], className: a })
             }
           )
         ]
@@ -69,7 +59,7 @@ const N = {
     );
   }
 );
-j.displayName = "CopyButton";
+N.displayName = "CopyButton";
 export {
-  j as CopyButton
+  N as CopyButton
 };

package/dist/esm/components/buttons/external-button/external-button.js

@@ -1,12 +1,9 @@
 import { jsx as t } from "react/jsx-runtime";
-import { IconExternal as e } from "@gearbox-protocol/static";
+import { IconExternal as m } from "@gearbox-protocol/static";
 import * as p from "react";
 import { Button as s } from "../button/button.js";
-import "@gearbox-protocol/sdk";
 import { cn as r } from "../../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../utils/z-index.js";
 const c = {
   3: "!h-3 !w-3",
@@ -21,17 +18,17 @@ const c = {
   5: 20,
   6: 24
 }, w = p.forwardRef(
-  ({ url: i, className: n, iconSize: o = "3.5", ...m }, a) => /* @__PURE__ */ t(
+  ({ url: n, className: a, iconSize: o = "3.5", ...e }, i) => /* @__PURE__ */ t(
     s,
     {
-      ref: a,
+      ref: i,
       variant: "text",
       size: "auto",
-      className: r("p-1! border-0!", n),
-      onClick: () => window.open(i, "_blank"),
-      ...m,
+      className: r("p-1! border-0!", a),
+      onClick: () => window.open(n, "_blank"),
+      ...e,
       children: /* @__PURE__ */ t(
-        e,
+        m,
         {
           size: l[o],
           className: r(c[o])

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

@@ -1,20 +1,12 @@
-import { BackButton as r, backButtonVariants as n } from "./back-button/back-button.js";
-import { Button as e, buttonVariants as u } from "./button/button.js";
-import { CopyButton as p } from "./copy-button/copy-button.js";
+import { BackButton as r } from "./back-button/back-button.js";
+import { Button as n } from "./button/button.js";
+import { CopyButton as x } from "./copy-button/copy-button.js";
 import { ExternalButton as f } from "./external-button/external-button.js";
-import { FilterButton as i } from "./filter-button/filter-button.js";
-import { NavigationButton as s } from "./navigation-button/navigation-button.js";
-import { RangeButtons as g } from "./range-buttons/range-buttons.js";
-import { TabButton as l } from "./tab-button/tab-button.js";
+import { TabButton as u } from "./tab-button/tab-button.js";
 export {
   r as BackButton,
-  e as Button,
-  p as CopyButton,
+  n as Button,
+  x as CopyButton,
   f as ExternalButton,
-  i as FilterButton,
-  s as NavigationButton,
-  g as RangeButtons,
-  l as TabButton,
-  n as backButtonVariants,
-  u as buttonVariants
+  u as TabButton
 };

package/dist/esm/components/buttons/range-buttons/index.js

@@ -1,4 +1 @@
-import { RangeButtons as e } from "./range-buttons.js";
-export {
-  e as RangeButtons
-};
+

package/dist/esm/components/buttons/range-buttons/range-buttons.js

@@ -1,36 +1 @@
-import { jsx as r } 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 f({
-  range: n,
-  rangeList: o,
-  setRange: i,
-  className: d
-}) {
-  return /* @__PURE__ */ r("div", { className: t("flex flex-row flex-nowrap", d), children: o.map((e, l) => /* @__PURE__ */ r(
-    "button",
-    {
-      type: "button",
-      onClick: () => i(e.value),
-      className: t(
-        "px-2.5 py-2 flex min-w-[44px] min-h-[26px] justify-center items-center",
-        "text-xs leading-[14px] font-medium text-center",
-        "rounded-md border cursor-pointer transition-colors",
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        e.value === n ? "bg-secondary border-secondary text-foreground" : "bg-muted border-muted text-muted-foreground hover:border-secondary",
-        l < o.length - 1 && "mr-1.5"
-      ),
-      children: e.label
-    },
-    String(e.value)
-  )) });
-}
-export {
-  f as RangeButtons
-};
+

package/dist/esm/components/cards/card/card.js

@@ -1,13 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
-import { cva as s } from "class-variance-authority";
+import { cva as i } from "class-variance-authority";
 import * as o from "react";
-import "@gearbox-protocol/sdk";
 import { cn as d } from "../../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../utils/z-index.js";
-const n = s(
+const s = i(
   "rounded-xl border border-border bg-card text-card-foreground",
   {
     variants: {
@@ -21,18 +18,18 @@ const n = s(
       variant: "default"
     }
   }
-), m = o.forwardRef(
-  ({ className: r, variant: a, ...e }, i) => /* @__PURE__ */ t(
+), c = o.forwardRef(
+  ({ className: r, variant: a, ...e }, n) => /* @__PURE__ */ t(
     "div",
     {
-      ref: i,
-      className: d(n({ variant: a, className: r })),
+      ref: n,
+      className: d(s({ variant: a, className: r })),
       ...e
     }
   )
 );
-m.displayName = "Card";
-const c = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
+c.displayName = "Card";
+const m = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
   "div",
   {
     ref: e,
@@ -43,7 +40,7 @@ const c = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
     ...a
   }
 ));
-c.displayName = "CardHeader";
+m.displayName = "CardHeader";
 const p = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
   "div",
   {
@@ -67,20 +64,10 @@ const f = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
 f.displayName = "CardDescription";
 const l = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t("div", { ref: e, className: d("p-4", r), ...a }));
 l.displayName = "CardContent";
-const C = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
-  "div",
-  {
-    ref: e,
-    className: d("flex items-center p-4 border-t border-input", r),
-    ...a
-  }
-));
-C.displayName = "CardFooter";
 export {
-  m as Card,
+  c as Card,
   l as CardContent,
   f as CardDescription,
-  C as CardFooter,
-  c as CardHeader,
+  m as CardHeader,
   p as CardTitle
 };

package/dist/esm/components/cards/card/index.js

@@ -1,9 +1,8 @@
-import { Card as d, CardContent as e, CardDescription as C, CardFooter as o, CardHeader as t, CardTitle as i } from "./card.js";
+import { Card as d, CardContent as e, CardDescription as C, CardHeader as t, CardTitle as o } from "./card.js";
 export {
   d as Card,
   e as CardContent,
   C as CardDescription,
-  o as CardFooter,
   t as CardHeader,
-  i as CardTitle
+  o as CardTitle
 };