@gearbox-protocol/permissionless-ui 1.17.8 → 1.18.0

package/dist/esm/components/split-list/split-list.js

@@ -0,0 +1,39 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as l from "react";
+import { cn as u } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk";
+function d(t) {
+  if (t === !0) return "flex-1";
+  if (t === "auto") return "flex-none";
+  if (typeof t == "number") {
+    const r = t / 12;
+    return r === 1 ? "w-full" : r === 0.5 ? "w-1/2" : r === 0.25 ? "w-1/4" : r === 0.75 ? "w-3/4" : r === 1 / 3 ? "w-1/3" : r === 2 / 3 ? "w-2/3" : "";
+  }
+  return "";
+}
+function x({
+  children: t,
+  colSize: r = !0,
+  className: c
+}) {
+  const i = l.Children.toArray(t).filter(Boolean);
+  return /* @__PURE__ */ s("div", { className: u("flex flex-wrap items-stretch", c), children: i.map((e, n) => {
+    const o = typeof r == "function" ? r(n) : r, a = n === i.length - 1, f = d(o), m = typeof o == "number" && !f ? { width: `${o / 12 * 100}%` } : void 0, p = l.isValidElement(e) && e.key ? e.key : `split-item-${n}`;
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        className: u(
+          f,
+          !a && "border-r border-border pr-4 mr-4"
+        ),
+        style: m,
+        children: e
+      },
+      p
+    );
+  }) });
+}
+export {
+  x as SplitList
+};

package/dist/esm/components/stat-badge/stat-badge.js

@@ -1,12 +1,12 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import { cva as l } from "class-variance-authority";
-import * as x from "react";
-import { StatusTriangle as p } from "../status-triangle/status-triangle.js";
-import { TooltipProvider as b, Tooltip as N, TooltipTrigger as B, TooltipContent as V } from "../tooltip/tooltip.js";
-import { cn as i } from "../../utils/cn.js";
+import * as v from "react";
+import { StatusTriangle as x } from "../status-triangle/status-triangle.js";
+import { TooltipProvider as B, Tooltip as V, TooltipTrigger as T, TooltipContent as w } from "../tooltip/tooltip.js";
+import { cn as a } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
-const T = l(
+const y = l(
   "w-full h-full rounded-lg border transition-colors",
   {
     variants: {
@@ -18,6 +18,7 @@ const T = l(
       },
       size: {
         sm: "p-4",
+        md: "p-5",
         default: "p-6"
       }
     },
@@ -26,83 +27,92 @@ const T = l(
       size: "default"
     }
   }
-), w = l("font-medium text-muted-foreground", {
+), S = l("font-medium text-muted-foreground", {
   variants: {
     size: {
       sm: "text-xs leading-[0.8125rem]",
+      md: "text-xs leading-[0.9rem]",
       default: "text-sm leading-[1.0625rem]"
     }
   },
   defaultVariants: {
     size: "default"
   }
-}), y = l("font-medium text-foreground flex", {
+}), z = l("font-medium text-foreground flex", {
   variants: {
     size: {
       sm: "text-sm leading-[1.0625rem]",
+      md: "text-base leading-[1.25rem]",
       default: "text-xl leading-[1.5625rem]"
     }
   },
   defaultVariants: {
     size: "default"
   }
-}), z = x.forwardRef(
+}), C = v.forwardRef(
   ({
     className: d,
     variant: o,
-    size: t,
+    size: r,
     title: n,
-    value: c,
-    valueDescription: s,
+    titleInfo: s,
+    value: m,
+    valueDescription: c,
     delta: e,
-    ...v
+    ...b
   }, h) => {
-    const m = e && e.value < 0, g = e && e.value > 0, f = e && e.value !== 0, u = f && /* @__PURE__ */ a(
+    const g = e && e.value < 0, f = e && e.value > 0, p = e && e.value !== 0, u = p && /* @__PURE__ */ i(
       "div",
       {
-        className: i(
+        className: a(
           "inline-flex items-center gap-1 text-xs font-medium",
-          m && "text-destructive",
-          g && "text-success"
+          g && "text-destructive",
+          f && "text-success"
         ),
         children: [
-          g && (e.positiveIcon || /* @__PURE__ */ r(p, { size: 4 })),
-          m && (e.negativeIcon || /* @__PURE__ */ r(p, { size: 4, isNegative: !0 })),
-          e.label && /* @__PURE__ */ r("span", { children: e.label })
+          f && (e.positiveIcon || /* @__PURE__ */ t(x, { size: 4 })),
+          g && (e.negativeIcon || /* @__PURE__ */ t(x, { size: 4, isNegative: !0 })),
+          e.label && /* @__PURE__ */ t("span", { children: e.label })
         ]
       }
-    );
-    return /* @__PURE__ */ a(
+    ), N = r === "sm" ? "mb-2.5" : r === "md" ? "mb-2" : "mb-3";
+    return /* @__PURE__ */ i(
       "div",
       {
         ref: h,
-        className: i(T({ variant: o, size: t }), d),
-        ...v,
+        className: a(y({ variant: o, size: r }), d),
+        ...b,
         children: [
-          /* @__PURE__ */ a(
-            "div",
-            {
-              className: i("flex items-center", t === "sm" ? "mb-2.5" : "mb-3"),
-              children: [
-                /* @__PURE__ */ r("div", { className: i(w({ size: t }), "flex-1"), children: n }),
-                f && (e.tooltip ? /* @__PURE__ */ r(b, { children: /* @__PURE__ */ a(N, { children: [
-                  /* @__PURE__ */ r(B, { asChild: !0, children: /* @__PURE__ */ r("div", { className: "cursor-help", children: u }) }),
-                  /* @__PURE__ */ r(V, { children: e.tooltip })
-                ] }) }) : u)
-              ]
-            }
-          ),
-          /* @__PURE__ */ a("div", { className: i(y({ size: t })), children: [
-            c,
-            s && /* @__PURE__ */ r("span", { className: "text-muted-foreground text-sm ml-1", children: s })
+          /* @__PURE__ */ i("div", { className: a("flex items-center", N), children: [
+            /* @__PURE__ */ i(
+              "div",
+              {
+                className: a(
+                  S({ size: r }),
+                  "flex-1 flex items-center gap-1"
+                ),
+                children: [
+                  n,
+                  s?.text && /* @__PURE__ */ t("span", { className: "inline-flex", children: s.text })
+                ]
+              }
+            ),
+            p && (e.tooltip ? /* @__PURE__ */ t(B, { children: /* @__PURE__ */ i(V, { children: [
+              /* @__PURE__ */ t(T, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "cursor-help", children: u }) }),
+              /* @__PURE__ */ t(w, { children: e.tooltip })
+            ] }) }) : u)
+          ] }),
+          /* @__PURE__ */ i("div", { className: a(z({ size: r })), children: [
+            m,
+            c && /* @__PURE__ */ t("span", { className: "text-muted-foreground text-sm ml-1", children: c })
           ] })
         ]
       }
     );
   }
 );
-z.displayName = "StatBadge";
-const S = l("grid w-full", {
+C.displayName = "StatBadge";
+const G = l("grid w-full", {
   variants: {
     cols: {
       1: "grid-cols-1",
@@ -123,21 +133,21 @@ const S = l("grid w-full", {
     cols: 4,
     gap: "default"
   }
-}), C = x.forwardRef(({ className: d, cols: o, gap: t, children: n, ...c }, s) => /* @__PURE__ */ r(
+}), R = v.forwardRef(({ className: d, cols: o, gap: r, children: n, ...s }, m) => /* @__PURE__ */ t(
   "div",
   {
-    ref: s,
-    className: i(S({ cols: o, gap: t }), d),
-    ...c,
+    ref: m,
+    className: a(G({ cols: o, gap: r }), d),
+    ...s,
     children: n
   }
 ));
-C.displayName = "StatBadgeGrid";
+R.displayName = "StatBadgeGrid";
 export {
-  z as StatBadge,
-  C as StatBadgeGrid,
-  y as statBadgeContentVariants,
-  S as statBadgeGridVariants,
-  w as statBadgeTitleVariants,
-  T as statBadgeVariants
+  C as StatBadge,
+  R as StatBadgeGrid,
+  z as statBadgeContentVariants,
+  G as statBadgeGridVariants,
+  S as statBadgeTitleVariants,
+  y as statBadgeVariants
 };

package/dist/esm/components/status-triangle/status-triangle.js

@@ -1,30 +1,37 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import "react";
-import { cn as i } from "../../utils/cn.js";
+import { cn as d } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
-function m({
-  isNegative: r = !1,
+const c = {
+  xs: 4,
+  sm: 5,
+  md: 6,
+  lg: 8
+};
+function x({
+  isNegative: i,
+  $isNegative: o,
   size: t = 5,
-  className: o
+  className: n
 }) {
-  const e = t - 1;
-  return /* @__PURE__ */ s(
+  const e = i ?? o ?? !1, r = typeof t == "string" ? c[t] || 5 : t, s = r - 1;
+  return /* @__PURE__ */ a(
     "div",
     {
-      className: i("inline-flex items-center justify-center", o),
+      className: d("inline-flex items-center justify-center", n),
       style: {
         width: 0,
         height: 0,
-        borderLeft: `${e}px solid transparent`,
-        borderRight: `${e}px solid transparent`,
-        borderTop: `${t}px solid ${r ? "hsl(var(--destructive))" : "hsl(var(--success, 142 76% 36%))"}`,
+        borderLeft: `${s}px solid transparent`,
+        borderRight: `${s}px solid transparent`,
+        borderTop: `${r}px solid ${e ? "hsl(var(--destructive))" : "hsl(var(--success, 142 76% 36%))"}`,
         borderRadius: "1px",
-        transform: r ? "rotate(0deg)" : "rotate(180deg)"
+        transform: e ? "rotate(0deg)" : "rotate(180deg)"
       }
     }
   );
 }
 export {
-  m as StatusTriangle
+  x as StatusTriangle
 };

package/dist/esm/components/styled-dropdown/index.js

@@ -0,0 +1,4 @@
+import { StyledDropdown as d } from "./styled-dropdown.js";
+export {
+  d as StyledDropdown
+};

package/dist/esm/components/styled-dropdown/styled-dropdown.js

@@ -0,0 +1,106 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { DropdownMenu as I, DropdownMenuTrigger as $ } from "../dropdown-menu/dropdown-menu.js";
+import "../dropdown-menu/dropdown-menu-checkbox-item.js";
+import { DropdownMenuContent as A } from "../dropdown-menu/dropdown-menu-content.js";
+import { DropdownMenuItem as B } from "../dropdown-menu/dropdown-menu-item.js";
+import "../dropdown-menu/dropdown-menu-label.js";
+import "../dropdown-menu/dropdown-menu-radio-item.js";
+import "../dropdown-menu/dropdown-menu-separator.js";
+import "../dropdown-menu/dropdown-menu-shortcut.js";
+import "../dropdown-menu/dropdown-menu-sub-content.js";
+import "../dropdown-menu/dropdown-menu-sub-trigger.js";
+import "react";
+import { cn as c } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk";
+function U({
+  children: g,
+  open: u,
+  onOpenChange: h,
+  trigger: b,
+  label: y,
+  items: i,
+  onSelect: f,
+  theme: x = "default",
+  size: w = "md",
+  icon: t,
+  iconSize: l,
+  align: v = "start",
+  side: D = "bottom",
+  className: k,
+  triggerClassName: C,
+  onClickAnalytics: M
+}) {
+  const s = b || y, p = {
+    xs: "text-xs px-1.5 py-0.5",
+    sm: "text-sm px-2 py-1",
+    md: "text-sm px-3 py-1.5",
+    lg: "text-base px-4 py-2"
+  }, d = {
+    empty: "bg-transparent hover:bg-accent",
+    default: "bg-background border border-border hover:bg-accent",
+    dark: "bg-gray-800 text-white hover:bg-gray-700",
+    light: "bg-white text-gray-900 hover:bg-gray-100",
+    filledDark: "bg-gray-900 text-white hover:bg-gray-800"
+  }, N = t && typeof t == "object" && "iconName" in t, j = () => {
+    if (!t) return null;
+    if (N) {
+      const { icon: r } = t;
+      if (!r) return null;
+      const [o, n, , , a] = r;
+      return /* @__PURE__ */ e(
+        "svg",
+        {
+          "aria-hidden": "true",
+          className: "inline-block fill-current",
+          style: { width: l || 12, height: l || 12 },
+          viewBox: `0 0 ${o} ${n}`,
+          children: /* @__PURE__ */ e("path", { d: Array.isArray(a) ? a[0] : a })
+        }
+      );
+    }
+    return t;
+  };
+  return /* @__PURE__ */ m(I, { open: u, onOpenChange: h, children: [
+    s && /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ m(
+      "button",
+      {
+        type: "button",
+        className: c(
+          "inline-flex items-center gap-1 rounded transition-colors",
+          p[w] || p.md,
+          d[x] || d.default,
+          C
+        ),
+        children: [
+          s,
+          j()
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      A,
+      {
+        align: v,
+        side: D,
+        className: c("min-w-[8rem]", k),
+        children: i ? i.map((r, o) => {
+          const n = typeof r.value == "string" || typeof r.value == "number" ? r.value : `item-${o}`;
+          return /* @__PURE__ */ e(
+            B,
+            {
+              onClick: () => {
+                M?.(r), f?.(r);
+              },
+              children: r.title || r.label || r.value
+            },
+            n
+          );
+        }) : g
+      }
+    )
+  ] });
+}
+export {
+  U as StyledDropdown
+};