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

package/dist/esm/components/rounded-image/rounded-image.js

@@ -1,32 +1,65 @@
-import { jsx as e } from "react/jsx-runtime";
-import "react";
-import { cn as i } from "../../utils/cn.js";
-import "sonner";
+import { jsx as L } from "react/jsx-runtime";
+import * as b from "react";
+import { useState as s, useRef as E, useEffect as j } from "react";
 import "@gearbox-protocol/sdk";
-function p({
-  className: t,
-  size: o,
-  style: r,
-  ...m
-}) {
-  return (
-    // biome-ignore lint/performance/noImgElement: Universal component that works outside Next.js
-    /* @__PURE__ */ e(
-      "img",
-      {
-        alt: "",
-        className: i("rounded-full object-cover", t),
-        style: {
-          ...o ? { width: o, height: o } : {},
-          ...r
-        },
-        loading: "lazy",
-        decoding: "async",
-        ...m
-      }
-    )
-  );
+import { cn as k } from "../../utils/cn.js";
+import "sonner";
+import { getStatic as w } from "../../utils/static.js";
+import "luxon";
+const c = w("/tokens/default.svg"), i = /* @__PURE__ */ new Map();
+function d(e) {
+  return i.get(e) ? c : e;
 }
+const N = b.forwardRef(
+  ({
+    className: e,
+    size: o,
+    rounded: f = !0,
+    style: l,
+    src: r,
+    defaultIcon: u = c,
+    fit: m = "cover",
+    ...g
+  }, p) => {
+    const [h, a] = s(void 0), [v, n] = s(!1), t = E(!1);
+    j(() => {
+      d(r), a(void 0), n(!1), t.current = !1;
+    }, [r]);
+    const y = (I) => {
+      t.current || (t.current = !0, i.set(I.currentTarget.src, !0), a(u));
+    }, R = () => {
+      n(!0);
+    };
+    return (
+      // biome-ignore lint/performance/noImgElement: Universal component that works outside Next.js
+      /* @__PURE__ */ L(
+        "img",
+        {
+          ref: p,
+          src: h || d(r),
+          alt: "",
+          className: k(
+            m === "cover" ? "object-cover" : "object-contain",
+            f && "rounded-full",
+            !v && "bg-gray-90 dark:bg-gray-110 rounded-full",
+            e
+          ),
+          style: {
+            width: o,
+            height: o,
+            ...l
+          },
+          loading: "lazy",
+          decoding: "async",
+          onError: y,
+          onLoad: R,
+          ...g
+        }
+      )
+    );
+  }
+);
+N.displayName = "RoundedImage";
 export {
-  p as RoundedImage
+  N as RoundedImage
 };

package/dist/esm/components/row/row.js

@@ -1,8 +1,9 @@
 import { jsx as w } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as b } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 const v = {
   "flex-start": "items-start",
   "flex-end": "items-end",
@@ -17,13 +18,13 @@ const v = {
   "space-around": "justify-around",
   "space-evenly": "justify-evenly"
 };
-function G({
+function J({
   $align: n,
   align: i,
   $justify: r,
-  justify: a,
-  $flexDirection: l = "row",
-  flexDirection: o,
+  justify: o,
+  $flexDirection: a = "row",
+  flexDirection: l,
   $wrap: f = !0,
   wrap: c,
   $gap: m,
@@ -32,7 +33,7 @@ function G({
   children: x,
   ...y
 }) {
-  const e = i || n, t = a || r, d = o || l, j = c ?? f, s = p ?? m;
+  const e = i || n, t = o || r, d = l || a, j = c ?? f, s = p ?? m;
   return /* @__PURE__ */ w(
     "div",
     {
@@ -51,5 +52,5 @@ function G({
   );
 }
 export {
-  G as Row
+  J as Row
 };

package/dist/esm/components/search-bar/search-bar.js

@@ -1,12 +1,14 @@
-import { jsx as e, jsxs as b } from "react/jsx-runtime";
+import { jsx as e, jsxs as y } from "react/jsx-runtime";
 import { cva as i } from "class-variance-authority";
-import { Search as y } from "lucide-react";
 import { useState as n } from "react";
-import { Input as w } from "../input/input.js";
+import { faMagnifyingGlass as b } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as w } from "../icons/fa-icon.js";
+import { Input as V } from "../input/input.js";
+import "@gearbox-protocol/sdk";
 import { cn as l } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const S = i("relative w-full transition-all duration-200", {
+import "luxon";
+const B = i("relative w-full transition-all duration-200", {
   variants: {
     size: {
       sm: "max-w-xs",
@@ -18,7 +20,7 @@ const S = i("relative w-full transition-all duration-200", {
   defaultVariants: {
     size: "default"
   }
-}), V = i("transition-all duration-200 pl-10", {
+}), I = i("transition-all duration-200 pl-10", {
   variants: {
     active: {
       true: "",
@@ -56,40 +58,40 @@ const S = i("relative w-full transition-all duration-200", {
     theme: "light"
   }
 });
-function q({
+function A({
   onChange: c,
-  placeholder: u = "Search...",
-  className: m,
-  size: d,
-  theme: f = "light",
+  placeholder: m = "Search...",
+  className: u,
+  size: f,
+  theme: d = "light",
   value: t
 }) {
-  const [h, g] = n(""), [p, a] = n(!1), r = t !== void 0, s = r ? t : h, v = s !== "" || p, x = (N) => {
-    const o = N.target.value;
-    r || g(o), c(o);
+  const [h, p] = n(""), [g, a] = n(!1), r = t !== void 0, o = r ? t : h, v = o !== "" || g, x = (N) => {
+    const s = N.target.value;
+    r || p(s), c(s);
   };
-  return /* @__PURE__ */ e("div", { className: l(S({ size: d }), m), children: /* @__PURE__ */ b("div", { className: "relative", children: [
+  return /* @__PURE__ */ e("div", { className: l(B({ size: f }), u), children: /* @__PURE__ */ y("div", { className: "relative", children: [
     /* @__PURE__ */ e(
-      y,
+      w,
       {
-        className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground pointer-events-none",
-        size: 18
+        icon: b,
+        className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none size-[18px]"
       }
     ),
     /* @__PURE__ */ e(
-      w,
+      V,
       {
         type: "search",
-        placeholder: u,
-        value: s,
+        placeholder: m,
+        value: o,
         onChange: x,
         onFocus: () => a(!0),
         onBlur: () => a(!1),
-        className: l(V({ active: v, theme: f }))
+        className: l(I({ active: v, theme: d }))
       }
     )
   ] }) });
 }
 export {
-  q as SearchBar
+  A as SearchBar
 };

package/dist/esm/components/search-line/search-line.js

@@ -1,12 +1,15 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { cva as g } from "class-variance-authority";
-import { Search as S, ArrowRight as j, Loader2 as C } from "lucide-react";
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import { IconPending as C } from "@gearbox-protocol/static";
+import { cva as x } from "class-variance-authority";
 import * as r from "react";
+import { faMagnifyingGlass as I, faArrowRight as S } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as p } from "../icons/fa-icon.js";
 import { Input as V } from "../input/input.js";
+import "@gearbox-protocol/sdk";
 import { cn as f } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const R = g("relative w-full transition-all duration-200", {
+import "luxon";
+const D = x("relative w-full transition-all duration-200", {
   variants: {
     size: {
       sm: "max-w-xs",
@@ -18,7 +21,7 @@ const R = g("relative w-full transition-all duration-200", {
   defaultVariants: {
     size: "default"
   }
-}), D = g("transition-all duration-200 pr-10", {
+}), F = x("transition-all duration-200 pr-10", {
   variants: {
     active: {
       true: "",
@@ -26,7 +29,8 @@ const R = g("relative w-full transition-all duration-200", {
     },
     theme: {
       light: "",
-      dark: ""
+      dark: "",
+      "deep-light": "focus:border-none focus:ring-0"
     }
   },
   compoundVariants: [
@@ -40,6 +44,11 @@ const R = g("relative w-full transition-all duration-200", {
       theme: "dark",
       className: "bg-[rgb(40,40,40)] text-foreground"
     },
+    {
+      active: !0,
+      theme: "deep-light",
+      className: "bg-foreground text-gray-10 placeholder:text-gray-90"
+    },
     {
       active: !1,
       theme: "light",
@@ -49,64 +58,70 @@ const R = g("relative w-full transition-all duration-200", {
       active: !1,
       theme: "dark",
       className: "text-foreground placeholder:text-foreground"
+    },
+    {
+      active: !1,
+      theme: "deep-light",
+      className: "text-foreground placeholder:text-foreground"
     }
   ],
   defaultVariants: {
     active: !1,
     theme: "light"
   }
-}), x = r.forwardRef(
+}), v = r.forwardRef(
   ({
-    className: i,
+    className: o,
     size: n,
-    searchState: o,
-    placeholder: c = "Search...",
-    theme: m = "light",
+    searchState: c,
+    placeholder: m = "Search...",
+    theme: l = "light",
     showSearchIcon: s = !1,
-    customIcon: v,
+    customIcon: N,
     onSubmit: t,
-    ...N
+    ...b
   }, w) => {
-    const { value: a, handleSubmit: l, handleInput: b, loading: d } = o, [y, u] = r.useState(!1), h = a !== "" || y, k = r.useCallback(
-      (z) => {
-        z.preventDefault(), l({ preventDefault: () => {
+    const { value: a, handleSubmit: i, handleInput: y, loading: d } = c, [k, u] = r.useState(!1), h = a !== "" || k, z = r.useCallback(
+      (j) => {
+        j.preventDefault(), i({ preventDefault: () => {
         } }), t && t(a);
       },
-      [l, t, a]
+      [i, t, a]
     ), L = r.useCallback(() => {
-      l({ preventDefault: () => {
+      i({ preventDefault: () => {
       } }), t && t(a);
-    }, [l, t, a]);
+    }, [i, t, a]);
     return /* @__PURE__ */ e(
       "div",
       {
         ref: w,
-        className: f(R({ size: n }), i),
-        ...N,
-        children: /* @__PURE__ */ p(
+        className: f(D({ size: n }), o),
+        ...b,
+        children: /* @__PURE__ */ g(
           "form",
           {
-            onSubmit: k,
+            onSubmit: z,
             onFocus: () => u(!0),
             onBlur: () => u(!1),
             className: "relative",
             children: [
               s && /* @__PURE__ */ e(
-                S,
+                p,
                 {
-                  className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground pointer-events-none",
-                  size: 18
+                  icon: I,
+                  className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none size-[18px]"
                 }
               ),
               /* @__PURE__ */ e(
                 V,
                 {
                   type: "search",
-                  placeholder: c,
+                  placeholder: m,
                   value: a,
-                  onChange: b,
+                  colorTheme: l === "deep-light" ? "outlined" : "filledDark",
+                  onChange: y,
                   className: f(
-                    D({ active: h, theme: m }),
+                    F({ active: h, theme: l }),
                     s && "pl-10"
                   )
                 }
@@ -118,14 +133,20 @@ const R = g("relative w-full transition-all duration-200", {
                   onClick: L,
                   className: "absolute right-2 top-1/2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center rounded-full transition-colors cursor-pointer",
                   "aria-label": "Submit search",
-                  children: v || /* @__PURE__ */ e(j, { className: "text-primary", size: 18 })
+                  children: N || /* @__PURE__ */ e(
+                    p,
+                    {
+                      icon: S,
+                      className: "text-primary size-[18px]"
+                    }
+                  )
                 }
               ),
               d && /* @__PURE__ */ e("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center", children: /* @__PURE__ */ e(
                 C,
                 {
-                  className: "text-muted-foreground animate-spin",
-                  size: 18
+                  size: 18,
+                  className: "text-muted-foreground animate-spin"
                 }
               ) })
             ]
@@ -135,30 +156,30 @@ const R = g("relative w-full transition-all duration-200", {
     );
   }
 );
-x.displayName = "SearchLine";
-const F = r.forwardRef(
+v.displayName = "SearchLine";
+const R = r.forwardRef(
   ({
-    searchState: i,
+    searchState: o,
     children: n,
-    placeholder: o = "Search...",
-    theme: c = "light",
-    className: m
-  }, s) => /* @__PURE__ */ p(
+    placeholder: c = "Search...",
+    theme: m = "light",
+    className: l
+  }, s) => /* @__PURE__ */ g(
     "div",
     {
       ref: s,
       className: f(
         "w-full flex gap-4 flex-col sm:flex-row sm:items-center md:justify-between",
-        m
+        l
       ),
       children: [
         /* @__PURE__ */ e("div", { className: "sm:flex-shrink-0 sm:flex-grow-1", children: n }),
         /* @__PURE__ */ e("div", { className: "w-full sm:flex-1 md:flex-initial md:max-w-md", children: /* @__PURE__ */ e(
-          x,
+          v,
           {
-            searchState: i,
-            placeholder: o,
-            theme: c,
+            searchState: o,
+            placeholder: c,
+            theme: m,
             size: "full"
           }
         ) })
@@ -166,10 +187,10 @@ const F = r.forwardRef(
     }
   )
 );
-F.displayName = "WithSearchLine";
+R.displayName = "WithSearchLine";
 export {
-  x as SearchLine,
-  F as WithSearchLine,
-  D as searchLineInputVariants,
-  R as searchLineVariants
+  v as SearchLine,
+  R as WithSearchLine,
+  F as searchLineInputVariants,
+  D as searchLineVariants
 };

package/dist/esm/components/segmented-control/segmented-control.js

@@ -1,116 +1,93 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { cva as k } from "class-variance-authority";
-import * as z from "react";
-import { cn as s } from "../../utils/cn.js";
-import "sonner";
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { cva as u } from "class-variance-authority";
+import * as g from "react";
 import "@gearbox-protocol/sdk";
-const C = k(
-  "relative flex flex-row flex-nowrap items-center bg-muted rounded-md",
+import { cn as m } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const h = u(
+  "relative z-0 flex w-full flex-row flex-nowrap items-center bg-gray-30",
   {
     variants: {
       size: {
-        xs: "h-6 text-[10px]",
-        sm: "h-7 text-xs",
-        md: "h-10 text-sm",
-        default: "h-8 text-xs sm:h-10 sm:text-sm",
-        lg: "h-10 text-sm sm:h-12 sm:text-base"
-      },
-      fullWidth: {
-        true: "w-full",
-        false: "w-fit"
+        sm: "h-[28px] rounded-sm text-xs leading-[130%]",
+        md: "h-[40px] rounded-lg text-[0.9375rem] leading-[18px]"
       }
     },
-    defaultVariants: {
-      size: "md",
-      fullWidth: !0
-    }
+    defaultVariants: { size: "md" }
   }
-), N = z.forwardRef(
-  ({ className: u, name: h, items: a, size: m, fullWidth: f, minItemWidth: d, ...x }, p) => {
-    const n = m ?? "md", o = f ?? !0, t = a.findIndex((e) => e.checked), l = a.length, g = {
-      xs: "rounded-sm",
+), x = u("", {
+  variants: {
+    size: {
       sm: "rounded-sm",
-      md: "rounded-md",
-      default: "rounded-md",
-      lg: "rounded-md"
-    }, b = d ? { minWidth: d, flex: "0 0 auto" } : {};
-    return /* @__PURE__ */ i(
+      md: "rounded-lg"
+    }
+  },
+  defaultVariants: { size: "md" }
+}), b = g.forwardRef(({ className: l, name: d, items: a, size: r = "md", ...n }, e) => {
+  const s = a.findIndex((t) => t.checked), i = s < 0 ? 0 : s, c = a.length;
+  return /* @__PURE__ */ p("div", { ref: e, className: m(h({ size: r }), l), ...n, children: [
+    a.map((t, f) => /* @__PURE__ */ o(
+      v,
+      {
+        ...t,
+        name: d
+      },
+      typeof t.value == "string" ? t.value : f
+    )),
+    /* @__PURE__ */ o(
       "div",
       {
-        ref: p,
-        className: s(
-          C({
-            size: n,
-            fullWidth: o
-          }),
-          u
+        className: m(
+          "absolute top-0 left-0 z-[-1] h-full bg-gray-60 shadow-[0_2px_2px_rgba(0,0,0,0.25)] transition-transform duration-200 ease-in-out",
+          x({ size: r })
         ),
-        ...x,
-        children: [
-          a.map((e, w) => {
-            const v = e.switchLabel ?? e.label, y = e.onChange ?? e.onSelect, c = typeof e.value == "string" ? e.value : void 0;
-            return /* @__PURE__ */ i(
-              "label",
-              {
-                className: s(
-                  "relative z-10 m-0 p-0 flex h-full cursor-pointer select-none",
-                  o ? "flex-1" : "shrink-0",
-                  e.disabled && "cursor-not-allowed opacity-50"
-                ),
-                style: b,
-                "data-checked": e.checked,
-                "data-disabled": e.disabled,
-                children: [
-                  /* @__PURE__ */ r(
-                    "input",
-                    {
-                      type: "radio",
-                      name: h,
-                      value: c,
-                      checked: e.checked,
-                      disabled: e.disabled,
-                      onChange: y,
-                      className: "absolute h-0 w-0 opacity-0 cursor-pointer"
-                    }
-                  ),
-                  /* @__PURE__ */ r(
-                    "span",
-                    {
-                      className: s(
-                        "flex h-full w-full items-center justify-center px-2 sm:px-3 whitespace-nowrap",
-                        e.checked ? "text-foreground" : "text-muted-foreground"
-                      ),
-                      children: v
-                    }
-                  )
-                ]
-              },
-              c ?? w
-            );
-          }),
-          /* @__PURE__ */ r(
-            "div",
-            {
-              className: s(
-                "absolute z-0 h-full bg-gray-600 shadow transition-all duration-200 ease-in-out",
-                g[n]
-              ),
-              style: o ? {
-                width: l > 0 ? `${100 / l}%` : "0%",
-                transform: t >= 0 ? `translateX(${100 * t}%)` : "translateX(0%)"
-              } : {
-                width: t >= 0 ? `calc(100% / ${l})` : d || "auto",
-                left: t >= 0 ? `calc(${t} * 100% / ${l})` : "0"
-              }
-            }
-          )
-        ]
+        style: {
+          width: c > 0 ? `${100 / c}%` : "0%",
+          transform: `translateX(${c > 0 ? 100 * i : 0}%)`
+        }
       }
-    );
-  }
-);
-N.displayName = "SegmentedControl";
+    )
+  ] });
+});
+b.displayName = "SegmentedControl";
+function v({
+  name: l,
+  switchLabel: d,
+  label: a,
+  onChange: r,
+  onSelect: n,
+  ...e
+}) {
+  const s = r ?? (n ? (i) => {
+    i.preventDefault(), n();
+  } : void 0);
+  return /* @__PURE__ */ p(
+    "label",
+    {
+      className: m(
+        "relative m-0 block h-full grow shrink-0 basis-0 cursor-pointer select-none",
+        e.disabled && "cursor-default opacity-50"
+      ),
+      "data-checked": e.checked,
+      "data-disabled": e.disabled,
+      children: [
+        /* @__PURE__ */ o(
+          "input",
+          {
+            type: "radio",
+            name: l,
+            className: "absolute h-0 w-0 cursor-pointer opacity-0",
+            ...e,
+            onChange: s
+          }
+        ),
+        /* @__PURE__ */ o("span", { className: "flex h-full grow shrink-0 basis-0 items-center justify-center px-2 py-1", children: d ?? a })
+      ]
+    }
+  );
+}
 export {
-  N as SegmentedControl,
-  C as segmentedControlVariants
+  b as SegmentedControl,
+  h as segmentedControlVariants
 };