@gearbox-protocol/permissionless-ui 1.22.0-next.26 → 1.22.0-next.28

package/dist/esm/components/help-center-container/help-center-container.js

@@ -1,73 +1,63 @@
 import { jsx as f } from "react/jsx-runtime";
-import { useState as s, useEffect as u } from "react";
+import { useState as s, useEffect as a } from "react";
 import { BlockSync as h } from "../block-sync/block-sync.js";
 import { cn as g } from "../../utils/cn.js";
-function w() {
-  const [t, i] = s(
-    typeof window < "u" ? window.scrollY : 0
-  ), [e, c] = s(
-    typeof document < "u" ? document.documentElement.clientHeight : 0
-  );
-  u(() => {
-    const n = () => {
-      i(window.scrollY);
-    }, o = () => {
-      c(document.documentElement.clientHeight);
-    };
-    return window.addEventListener("scroll", n), window.addEventListener("resize", o), () => {
-      window.removeEventListener("scroll", n), window.removeEventListener("resize", o);
-    };
-  }, []);
-  const d = typeof document < "u" ? Math.max(
-    document.body.scrollHeight,
-    document.documentElement.scrollHeight,
-    document.body.offsetHeight,
-    document.documentElement.offsetHeight,
-    document.body.clientHeight,
-    document.documentElement.clientHeight
-  ) : 0;
-  return {
-    pageVerticalOffset: t,
-    clientHeight: e,
-    clientOffsetHeight: d
-  };
-}
-function E({
-  blockSyncProps: t,
+function y({
+  blockSyncProps: e,
   footerHeight: i,
-  gapFromFooter: e
+  gapFromFooter: t
 }) {
-  const [c, d] = s(e), { pageVerticalOffset: n, clientOffsetHeight: o, clientHeight: l } = w();
-  return u(() => {
-    const r = i + e, m = o - (l + n), a = m < r ? r - m : 0;
-    d(e + a);
-  }, [
-    n,
-    l,
-    o,
-    i,
-    e
-  ]), /* @__PURE__ */ f(
+  const [c, o] = s(t), { pageVerticalOffset: n, clientOffsetHeight: l, clientHeight: d } = H();
+  return a(() => {
+    const r = i + t, m = l - (d + n), u = m < r ? r - m : 0;
+    o(t + u);
+  }, [n, d, l]), /* @__PURE__ */ f(
     "div",
     {
       className: g(
         // Desktop: fixed position with dynamic bottom
         "hidden sm:flex",
-        "fixed right-9 flex-col items-end gap-2 text-xs text-muted-foreground z-[100]",
-        "transition-[bottom] duration-300 ease-in-out"
+        "fixed right-9 flex-col items-end gap-2 text-xs text-muted-foreground z-[100]"
       ),
       style: { bottom: `${c}px` },
       children: /* @__PURE__ */ f(
         h,
         {
-          blockByChain: t.blockByChain,
-          explorerAddresses: t.explorerAddresses,
-          networkById: t.networkById
+          blockByChain: e.blockByChain,
+          explorerAddresses: e.explorerAddresses,
+          networkById: e.networkById
         }
       )
     }
   );
 }
+const w = () => Math.max(
+  document.body.scrollHeight,
+  document.documentElement.scrollHeight,
+  document.body.offsetHeight,
+  document.documentElement.offsetHeight,
+  document.body.clientHeight,
+  document.documentElement.clientHeight
+);
+function H() {
+  const [e, i] = s(window.scrollY), [t, c] = s(
+    document.documentElement.clientHeight
+  );
+  return a(() => {
+    const o = () => {
+      i(window.scrollY);
+    }, n = () => {
+      c(document.documentElement.clientHeight);
+    };
+    return window.addEventListener("scroll", o), window.addEventListener("resize", n), () => {
+      window.removeEventListener("scroll", o), window.removeEventListener("resize", n);
+    };
+  }, []), {
+    pageVerticalOffset: e,
+    clientHeight: t,
+    clientOffsetHeight: w()
+  };
+}
 export {
-  E as HelpCenterContainer
+  y as HelpCenterContainer
 };

package/dist/esm/components/input/input.js

@@ -1,17 +1,59 @@
-import { jsxs as u, jsx as o } from "react/jsx-runtime";
-import { cva as d } from "class-variance-authority";
-import "react";
-import { cn as b } from "../../utils/cn.js";
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { cva as y } from "class-variance-authority";
+import * as v from "react";
+import { cn as e } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
-const c = d(
-  "flex w-full rounded-md border border-input px-3 py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm bg-[rgb(40,40,40)] text-foreground border-[rgb(100,100,100)] focus:bg-[rgb(40,40,40)] active:bg-[rgb(40,40,40)] [&:not(:placeholder-shown)]:bg-[rgb(40,40,40)] autofill:bg-[rgb(40,40,40)] [-webkit-autofill]:bg-[rgb(40,40,40)] [&:-webkit-autofill]:shadow-[0_0_0_1000px_rgb(40,40,40)_inset] [&:-webkit-autofill]:[text-fill-color:currentColor] outline-none [&::-webkit-search-cancel-button]:cursor-pointer",
+const _ = y(
+  e(
+    // Layout + typography (matches styled-components: 14/17)
+    "flex w-full border shadow-sm transition-colors",
+    "!text-sm leading-[17px] font-normal font-feature-settings-normal placeholder:text-sm",
+    "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+    "focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+    "outline-none",
+    // Hide built-in search clear / decorations (we render our own endingIcon)
+    "[&::-ms-clear]:hidden [&::-ms-reveal]:hidden",
+    "[&::-webkit-search-decoration]:hidden [&::-webkit-search-cancel-button]:hidden",
+    "[&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden",
+    // Error visuals (matches old styled-components data-error approach)
+    "data-[error=true]:border-destructive data-[error=true]:ring-2 data-[error=true]:ring-destructive"
+  ),
   {
     variants: {
       size: {
-        sm: "h-8 text-xs px-2",
-        default: "h-9",
-        lg: "h-11 text-base px-4"
+        // Matches reference paddings/heights (Tailwind uses border-box)
+        sm: "h-8 px-3 py-2 rounded-[6px]",
+        default: "h-10 px-3 py-[14px] rounded-md",
+        lg: "h-11 px-3 py-[14px] rounded-md"
+      },
+      colorTheme: {
+        filledDark: e(
+          "bg-gray-20 border-gray-30 text-foreground",
+          "placeholder:text-text-secondary",
+          "hover:bg-gray-30 hover:border-gray-50",
+          "focus:bg-gray-20 focus:border-gray-20",
+          "focus:ring-2 focus:ring-ring",
+          // WebKit autofill background fix
+          "[&:-webkit-autofill]:shadow-[0_0_0_1000px_hsl(var(--gray-20))_inset] [&:-webkit-autofill]:[text-fill-color:currentColor]"
+        ),
+        filledLight: e(
+          "bg-white border-white text-white-foreground",
+          "placeholder:text-gray-100",
+          "hover:bg-white hover:border-primary",
+          "focus:bg-white focus:border-white",
+          "focus:ring-2 focus:ring-ring",
+          "[&:-webkit-autofill]:shadow-[0_0_0_1000px_hsl(var(--white))_inset] [&:-webkit-autofill]:[text-fill-color:currentColor]"
+        ),
+        outlined: e(
+          "bg-transparent border-gray-40 text-foreground",
+          "placeholder:text-foreground",
+          "hover:bg-transparent hover:border-gray-90",
+          "focus:bg-white focus:border-white",
+          "focus:text-white-foreground focus:placeholder:text-gray-100",
+          "focus:ring-2 focus:ring-ring",
+          "[&:-webkit-autofill]:shadow-[0_0_0_1000px_hsl(var(--white))_inset] [&:-webkit-autofill]:[text-fill-color:currentColor]"
+        )
       },
       variant: {
         default: "",
@@ -21,39 +63,85 @@ const c = d(
     },
     defaultVariants: {
       size: "default",
+      colorTheme: "filledDark",
       variant: "default"
     }
   }
-);
-function v({
-  hasError: e,
-  errorMessage: t,
-  value: i,
-  size: l,
-  variant: a,
-  className: n,
-  ...r
-}) {
-  return /* @__PURE__ */ u("div", { className: "flex flex-col space-y-2", children: [
-    /* @__PURE__ */ o(
-      "input",
-      {
-        ...r,
-        value: i,
-        className: b(
-          c({
-            size: l,
-            variant: e ? "error" : a,
-            className: n
-          })
+), K = v.forwardRef(
+  ({
+    hasError: t,
+    errorMessage: s,
+    value: h,
+    size: b,
+    colorTheme: p,
+    variant: m,
+    className: g,
+    startingIcon: o,
+    onStartingIconClick: l,
+    endingIcon: a,
+    onEndingIconClick: d,
+    ...n
+  }, x) => {
+    const u = p ?? "filledDark", c = u === "filledLight" ? "text-gray-50" : "text-gray-110";
+    return /* @__PURE__ */ f("div", { className: "flex flex-col space-y-2", children: [
+      /* @__PURE__ */ f("div", { className: "relative", children: [
+        o && /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: l,
+            onKeyDown: ((i) => (w) => {
+              w.key === "Enter" && i?.();
+            })(l),
+            className: e(
+              "absolute left-0 top-1/2 transform -translate-y-1/2",
+              "w-9 h-9 flex items-center justify-center",
+              c,
+              l ? "cursor-pointer" : "cursor-default"
+            ),
+            children: o
+          }
         ),
-        onWheel: r.type === "number" ? (s) => s.currentTarget.blur() : void 0
-      }
-    ),
-    e && t && /* @__PURE__ */ o("p", { className: "text-destructive text-sm", children: t })
-  ] });
-}
+        /* @__PURE__ */ r(
+          "input",
+          {
+            ref: x,
+            ...n,
+            value: h,
+            "data-error": t ? "true" : "false",
+            className: e(
+              _({
+                size: b,
+                colorTheme: u,
+                variant: t ? "error" : m
+              }),
+              o && "pl-9",
+              a && "pr-9",
+              g
+            ),
+            onWheel: n.type === "number" ? (i) => i.currentTarget.blur() : void 0
+          }
+        ),
+        a && /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: d,
+            className: e(
+              "absolute right-0 top-1/2 transform -translate-y-1/2 w-9 h-9",
+              "flex items-center justify-center",
+              c,
+              d ? "cursor-pointer" : "cursor-default"
+            ),
+            children: a
+          }
+        )
+      ] }),
+      t && s && /* @__PURE__ */ r("p", { className: "text-destructive text-sm", children: s })
+    ] });
+  }
+);
 export {
-  v as Input,
-  c as inputVariants
+  K as Input,
+  _ as inputVariants
 };