@gearbox-protocol/permissionless-ui 1.22.0-next.44 → 1.22.0-next.46

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

@@ -1,116 +1,92 @@
-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 { 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";
-import { cn as s } from "../../utils/cn.js";
+import { cn as m } from "../../utils/cn.js";
 import "sonner";
-const C = k(
-  "relative flex flex-row flex-nowrap items-center bg-muted rounded-md",
+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
 };

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

@@ -1,39 +1,57 @@
-import { jsx as s } from "react/jsx-runtime";
-import * as l from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { cva as c } from "class-variance-authority";
+import * as t from "react";
 import "@gearbox-protocol/sdk";
-import { cn as u } from "../../utils/cn.js";
+import { cn as m } from "../../utils/cn.js";
 import "sonner";
-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" : "";
+const u = c(
+  [
+    /* layout */
+    "relative flex items-center",
+    /* padding: 0 18px, no padding on first/last edges */
+    "px-[18px] first:pl-0 last:pr-0",
+    /* vertical divider (::before): 60% height, centered, gray40; hidden on first item */
+    "before:absolute before:left-0 before:top-[20%] before:h-[60%] before:border-l before:border-gray-40 before:content-[''] first:before:border-l-transparent"
+  ].join(" "),
+  {
+    variants: {
+      colSize: {
+        equal: "grow shrink-0 basis-0",
+        auto: "w-auto grow-0 shrink-0 basis-auto"
+      }
+    },
+    defaultVariants: { colSize: "equal" }
   }
-  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(
+), b = t.forwardRef(
+  ({ children: i, colSize: r = !0, className: l }, s) => {
+    const n = t.Children.toArray(i).filter(Boolean);
+    return /* @__PURE__ */ a(
       "div",
       {
-        className: u(
-          f,
-          !a && "border-r border-border pr-4 mr-4"
+        ref: s,
+        className: m(
+          "flex w-full flex-row flex-nowrap",
+          "items-stretch",
+          l
         ),
-        style: m,
-        children: e
-      },
-      p
+        children: n.map((e, o) => {
+          const f = typeof r == "function" ? r(o) : r, p = t.isValidElement(e) && e.key != null ? e.key : `split-item-${o}`;
+          return /* @__PURE__ */ a(
+            "div",
+            {
+              className: u({
+                colSize: f === "auto" ? "auto" : "equal"
+              }),
+              children: e
+            },
+            p
+          );
+        })
+      }
     );
-  }) });
-}
+  }
+);
+b.displayName = "SplitList";
 export {
-  x as SplitList
+  b as SplitList
 };