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

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

@@ -1,101 +1,99 @@
-import { jsxs as T, jsx as t } from "react/jsx-runtime";
+import { jsxs as x, jsx as e } from "react/jsx-runtime";
 import { Children as p } from "react";
-import { Guard as x } from "../guard/guard.js";
-import { HeadCell as y } from "../head-cell/head-cell.js";
-import "react-intl";
-import "../buttons/button/button.js";
-import "@gearbox-protocol/sdk";
-import { cn as n } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import "../../utils/z-index.js";
-import { GridTable as C, GridTableHeader as j, GridTableRow as f, GridTableHead as H, GridTableBody as N, GridTableCell as S } from "../table/grid-table.js";
-import "../skeleton/skeleton.js";
-import "../table/table.js";
-import { TableLoaderGuard as v } from "../table/table-loader-guard.js";
-import { useIsMobile as z } from "../../hooks/use-media-query.js";
-import { BaseTableTest as d } from "./constants.js";
-function B({
+import { Guard as f } from "../guard/guard.js";
+import { HeadCell as C } from "../head-cell/head-cell.js";
+import { GridLoadingLine as j } from "../table/grid-loading-line.js";
+import { GridTable as H, GridTableHeader as N, GridTableRow as u, GridTableHead as B, GridTableBody as c, GridTableCell as S } from "../table/grid-table.js";
+import { useIsMobile as v } from "../../hooks/use-media-query.js";
+import { cn as h } from "../../utils/cn.js";
+import { BaseTableTest as m } from "./constants.js";
+import { BaseTableLineTest as J } from "./constants.js";
+function z({
   message: i,
-  testId: o
+  testId: a
 }) {
-  return /* @__PURE__ */ t(f, { noHover: !0, last: !0, children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ e(u, { noHover: !0, last: !0, children: /* @__PURE__ */ e(
     S,
     {
       span: "full",
       size: "sm",
       textAlign: "center",
       className: "py-8",
-      "data-testid": o,
+      "data-testid": a,
       children: i
     }
   ) });
 }
-function X({
+function P({
   columns: i,
-  isLoading: o,
-  emptyMessage: c,
-  sort: a,
-  rowHeight: h = "66px",
-  loaderRows: u = 5,
-  className: w,
-  wrapperClassName: b,
-  children: s
+  isLoading: a,
+  emptyMessage: g,
+  sort: s,
+  rowHeight: b = "66px",
+  loaderRows: l = 5,
+  className: T,
+  wrapperClassName: G,
+  children: d
 }) {
-  const l = z(), g = i.map((e) => e.track).join(" ");
-  return /* @__PURE__ */ T(
-    C,
+  const n = v(), w = i.map((t) => t.track).join(" ");
+  return /* @__PURE__ */ x(
+    H,
     {
-      cols: l ? "1fr" : g,
+      cols: n ? "1fr" : w,
       gap: 0,
       size: "lg",
-      className: n("min-w-0 w-full", w),
-      wrapperClassName: b,
-      "data-testid": d.root,
+      className: h("min-w-0 w-full", T),
+      wrapperClassName: G,
+      "data-testid": m.root,
       children: [
-        !l && /* @__PURE__ */ t(j, { "data-testid": d.head, children: /* @__PURE__ */ t(f, { noHover: !0, height: "32px", children: i.map((e) => {
-          const m = e.justify ?? "start", r = e.sort, G = r && a ? a.getSortDirection(r.field) : void 0;
-          return /* @__PURE__ */ t(
-            H,
+        !n && /* @__PURE__ */ e(N, { "data-testid": m.head, children: /* @__PURE__ */ e(u, { noHover: !0, height: "32px", children: i.map((t) => {
+          const o = t.justify ?? "start", r = t.sort, y = r && s ? s.getSortDirection(r.field) : void 0;
+          return /* @__PURE__ */ e(
+            B,
             {
-              justify: m,
+              justify: o,
               size: "sm",
-              className: n(
+              className: h(
                 "min-w-0 whitespace-nowrap",
-                e.headClassName
+                t.headClassName
               ),
-              children: r && a ? /* @__PURE__ */ t(
-                y,
+              children: r && s ? /* @__PURE__ */ e(
+                C,
                 {
-                  arrowPosition: m === "end" ? "left" : "right",
-                  title: e.title,
-                  sortDirection: G,
+                  arrowPosition: o === "end" ? "left" : "right",
+                  title: t.title,
+                  sortDirection: y,
                   sortField: r.label,
-                  onSort: () => a.onSort(
+                  onSort: () => s.onSort(
                     r.field,
                     r.defaultDirection
                   )
                 }
-              ) : e.title
+              ) : t.title
             },
-            e.id
+            t.id
           );
         }) }) }),
-        /* @__PURE__ */ t(
-          v,
+        /* @__PURE__ */ e(
+          f,
           {
-            showGuard: o,
-            rows: u,
-            columns: l ? 1 : i.length,
-            height: h,
-            cellClassName: "min-w-0 px-1 py-2 first:pl-4 last:pr-4",
-            children: !o && /* @__PURE__ */ t(
-              x,
+            showGuard: a,
+            guard: a && /* @__PURE__ */ e(c, { children: Array.from({ length: l }, (t, o) => /* @__PURE__ */ e(
+              j,
               {
-                showGuard: p.count(s) === 0,
-                guard: /* @__PURE__ */ t(B, { message: c, testId: d.empty }),
-                children: p.count(s) > 0 && /* @__PURE__ */ t(N, { children: s })
+                height: b,
+                columns: n ? 1 : i.length,
+                cellClassName: "min-w-0 px-1 py-2 first:pl-4 last:pr-4",
+                last: o === l - 1
+              },
+              `${o}-${l}`
+            )) }),
+            children: !a && /* @__PURE__ */ e(
+              f,
+              {
+                showGuard: p.count(d) === 0,
+                guard: /* @__PURE__ */ e(z, { message: g, testId: m.empty }),
+                children: p.count(d) > 0 && /* @__PURE__ */ e(c, { children: d })
               }
             )
           }
@@ -105,6 +103,7 @@ function X({
   );
 }
 export {
-  X as BaseTable,
-  d as BaseTableTest
+  P as BaseTable,
+  J as BaseTableLineTest,
+  m as BaseTableTest
 };

package/dist/esm/components/breadcrumbs/breadcrumbs.js

@@ -1,28 +1,24 @@
 import { jsx as r, jsxs as h } from "react/jsx-runtime";
 import { IconExpand as x } from "@gearbox-protocol/static";
 import { useNavigationAdapter as N } from "../navigation-context/navigation-context.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 "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-const u = "text-sm! transition-colors text-muted-foreground! hover:text-foreground!";
-function T({
+const i = "text-sm! transition-colors text-muted-foreground! hover:text-foreground!";
+function S({
   items: n,
   onClick: d,
   currentStep: m,
-  disabledSteps: p,
-  className: f
+  disabledSteps: f,
+  className: p
 }) {
   const { Link: g } = N();
-  return !n || n.length === 0 ? null : /* @__PURE__ */ r("nav", { "aria-label": "breadcrumb", className: c("flex items-center", f), children: /* @__PURE__ */ r("ol", { className: "flex items-center gap-2.5 flex-wrap", children: n.map((e, t, i) => {
-    const { href: o } = e, s = t === i.length - 1, a = m === t, l = p?.(e, t) ?? !1, b = o || e.step || `${e.label}-${t}`;
+  return !n || n.length === 0 ? null : /* @__PURE__ */ r("nav", { "aria-label": "breadcrumb", className: c("flex items-center", p), children: /* @__PURE__ */ r("ol", { className: "flex items-center gap-2.5 flex-wrap", children: n.map((e, t, u) => {
+    const { href: o } = e, s = t === u.length - 1, a = m === t, l = f?.(e, t) ?? !1, b = o || e.step || `${e.label}-${t}`;
     return /* @__PURE__ */ h("li", { className: "group flex items-center gap-2", children: [
       !!o && !s && !a && !l ? (
         // Navigation with href
-        /* @__PURE__ */ r(g, { to: o, className: u, children: e.label })
+        /* @__PURE__ */ r(g, { to: o, className: i, children: e.label })
       ) : !!d && !o && !s && !a && !l ? (
         // Wizard mode: use button
         /* @__PURE__ */ r(
@@ -31,7 +27,7 @@ function T({
             type: "button",
             onClick: () => d(e, t),
             disabled: l,
-            className: c(u, "cursor-pointer"),
+            className: c(i, "cursor-pointer"),
             children: e.label
           }
         )
@@ -48,7 +44,7 @@ function T({
           }
         )
       ),
-      (!s || i.length === 1) && /* @__PURE__ */ r(
+      (!s || u.length === 1) && /* @__PURE__ */ r(
         x,
         {
           size: 10,
@@ -62,5 +58,5 @@ function T({
   }) }) });
 }
 export {
-  T as BreadCrumbs
+  S as BreadCrumbs
 };

package/dist/esm/components/breakpoints/breakpoint-provider.js

@@ -0,0 +1,17 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useState as d, useEffect as w, useMemo as a } from "react";
+import { DEFAULT_BREAKPOINT_STATE as u, getBreakpointState as i, subscribeBreakpoints as f, BreakpointContext as s } from "../../hooks/breakpoint-state.js";
+function b({
+  children: n
+}) {
+  const [e, t] = d(() => typeof window > "u" ? u : i(window.matchMedia.bind(window)));
+  w(() => {
+    if (!(typeof window > "u"))
+      return t(i(window.matchMedia.bind(window))), f(window.matchMedia.bind(window), t);
+  }, []);
+  const o = a(() => e, [e]);
+  return /* @__PURE__ */ r(s.Provider, { value: o, children: n });
+}
+export {
+  b as BreakpointProvider
+};

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

@@ -0,0 +1,4 @@
+import { BreakpointProvider as e } from "./breakpoint-provider.js";
+export {
+  e as BreakpointProvider
+};

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
 };