@gearbox-protocol/ui-kit 2.1.0-next.1

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

@@ -0,0 +1,163 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { cva as T } from "class-variance-authority";
+import * as R 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 "../../utils/z-index.js";
+import { useIconSlotWidths as S } from "./use-icon-slot-widths.js";
+const z = T(
+  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-semibold file:text-foreground file:my-0",
+    "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: {
+        xs: "px-3 py-[6px] rounded-[6px]",
+        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:border-ring focus:ring-1 focus:ring-inset 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:border-ring focus:ring-1 focus:ring-inset 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:border-ring focus:ring-1 focus:ring-inset focus:ring-ring",
+          "[&:-webkit-autofill]:shadow-[0_0_0_1000px_hsl(var(--white))_inset] [&:-webkit-autofill]:[text-fill-color:currentColor]"
+        )
+      },
+      variant: {
+        default: "",
+        error: "border-destructive",
+        success: "border-success"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      colorTheme: "filledDark",
+      variant: "default"
+    }
+  }
+), G = R.forwardRef(
+  ({
+    hasError: o,
+    errorMessage: d,
+    value: g,
+    size: u,
+    colorTheme: b,
+    variant: m,
+    className: x,
+    style: y,
+    startingIcon: i,
+    onStartingIconClick: l,
+    endingIcon: s,
+    onEndingIconClick: f,
+    ...a
+  }, w) => {
+    const c = b ?? "filledDark", r = u ?? "default", v = a.type === "file" && e(
+      "cursor-pointer text-muted-foreground flex items-center justify-start py-0 file:mr-3 file:cursor-pointer",
+      r === "xs" && "min-h-8 leading-8",
+      r === "sm" && "leading-8",
+      r === "default" && "leading-10",
+      r === "lg" && "leading-11"
+    ), h = c === "filledLight" ? "text-gray-50" : "text-gray-110", { setStartRef: _, setEndRef: k, inputPaddingStyle: C } = S(), N = (n) => (D) => {
+      D.key === "Enter" && n?.();
+    }, j = {
+      ...y,
+      ...C(!!i, !!s)
+    };
+    return /* @__PURE__ */ p("div", { className: "flex flex-col space-y-2", children: [
+      /* @__PURE__ */ p("div", { className: "relative", children: [
+        i && /* @__PURE__ */ t(
+          "button",
+          {
+            ref: _,
+            type: "button",
+            onClick: l,
+            onKeyDown: N(l),
+            className: e(
+              "absolute left-0 top-1/2 -translate-y-1/2",
+              "flex h-9 min-w-9 px-3 items-center justify-center",
+              h,
+              l ? "cursor-pointer" : "cursor-default"
+            ),
+            children: i
+          }
+        ),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            ref: w,
+            ...a,
+            value: g,
+            "data-error": o ? "true" : "false",
+            style: j,
+            className: e(
+              z({
+                size: u,
+                colorTheme: c,
+                variant: o ? "error" : m
+              }),
+              v,
+              x
+            ),
+            onWheel: a.type === "number" ? (n) => n.currentTarget.blur() : void 0
+          }
+        ),
+        s && /* @__PURE__ */ t(
+          "button",
+          {
+            ref: k,
+            type: "button",
+            onClick: f,
+            className: e(
+              "absolute right-0 top-1/2 -translate-y-1/2",
+              "flex h-9 min-w-9 px-3 items-center justify-center",
+              h,
+              f ? "cursor-pointer" : "cursor-default"
+            ),
+            children: s
+          }
+        )
+      ] }),
+      o && d && /* @__PURE__ */ t("p", { className: "text-destructive text-sm", children: d })
+    ] });
+  }
+);
+export {
+  G as Input,
+  z as inputVariants
+};

package/dist/esm/components/input/use-icon-slot-widths.js

@@ -0,0 +1,41 @@
+import * as e from "react";
+const c = 36;
+function i(n, s) {
+  const u = () => s(n.getBoundingClientRect().width);
+  u();
+  const r = new ResizeObserver(u);
+  return r.observe(n), () => r.disconnect();
+}
+function S() {
+  const [n, s] = e.useState(
+    null
+  ), [u, r] = e.useState(null), l = e.useRef(null), o = e.useRef(null), d = e.useCallback((t) => {
+    if (l.current?.(), l.current = null, !t) {
+      s(null);
+      return;
+    }
+    l.current = i(t, s);
+  }, []), a = e.useCallback((t) => {
+    if (o.current?.(), o.current = null, !t) {
+      r(null);
+      return;
+    }
+    o.current = i(t, r);
+  }, []), f = e.useCallback(
+    (t, R) => ({
+      paddingLeft: t ? n ?? c : void 0,
+      paddingRight: R ? u ?? c : void 0
+    }),
+    [n, u]
+  );
+  return {
+    startSlotWidth: n,
+    endSlotWidth: u,
+    setStartRef: d,
+    setEndRef: a,
+    inputPaddingStyle: f
+  };
+}
+export {
+  S as useIconSlotWidths
+};

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

@@ -0,0 +1,5 @@
+import { Label as l, labelVariants as r } from "./label.js";
+export {
+  l as Label,
+  r as labelVariants
+};

package/dist/esm/components/label/label.js

@@ -0,0 +1,83 @@
+import { jsx as x } from "react/jsx-runtime";
+import * as d from "@radix-ui/react-label";
+import { cva as v } from "class-variance-authority";
+import * as r from "react";
+import "@gearbox-protocol/sdk";
+import { cn as g } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const y = v(
+  "flex leading-none peer-disabled:cursor-not-allowed",
+  {
+    variants: {
+      disabledStyle: {
+        default: "peer-disabled:opacity-70",
+        none: ""
+      },
+      size: {
+        sm: "text-sm",
+        default: "text-md",
+        lg: "text-xl"
+      },
+      variant: {
+        default: "text-foreground",
+        muted: "text-muted-foreground",
+        error: "text-destructive",
+        success: "text-green-500"
+      },
+      required: {
+        true: "after:content-['*'] after:ml-0.5 after:text-destructive"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+      disabledStyle: "default"
+    }
+  }
+), w = r.forwardRef(
+  ({ className: n, size: l, variant: u, required: c, disabledStyle: f, htmlFor: e, ...m }, b) => {
+    const [p, a] = r.useState(!1);
+    return r.useEffect(() => {
+      if (!e) {
+        a(!1);
+        return;
+      }
+      const s = () => {
+        const t = document.getElementById(e);
+        t && a(
+          t.hasAttribute("disabled") || t.disabled
+        );
+      };
+      s();
+      const i = document.getElementById(e);
+      if (!i) return;
+      const o = new MutationObserver(s);
+      return o.observe(i, {
+        attributes: !0,
+        attributeFilter: ["disabled"]
+      }), () => {
+        o.disconnect();
+      };
+    }, [e]), /* @__PURE__ */ x(
+      d.Root,
+      {
+        ref: b,
+        className: g(
+          y({ size: l, variant: u, required: c, disabledStyle: f }),
+          e && (p ? "cursor-not-allowed" : "cursor-pointer"),
+          n
+        ),
+        htmlFor: e,
+        ...m
+      }
+    );
+  }
+);
+w.displayName = d.Root.displayName;
+export {
+  w as Label,
+  y as labelVariants
+};

package/dist/esm/components/layout/app-logo/app-logo.js

@@ -0,0 +1,99 @@
+import { jsxs as i, jsx as e, Fragment as m } from "react/jsx-runtime";
+import { BaseLink as l } from "../../base-link/base-link.js";
+import { Image as g } from "../../image/image.js";
+import { NavBarLogo as a } from "../../navbar-logo/navbar-logo.js";
+import { cn as r } from "../../../utils/cn.js";
+import { getStatic as o } from "../../../utils/static.js";
+function u({
+  appName: n,
+  size: t = "default"
+}) {
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: r(
+        "text-foreground flex items-center gap-1 sm:gap-2",
+        t === "default" ? "text-base sm:text-lg md:text-xl" : "text-sm sm:text-base md:text-md"
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          g,
+          {
+            src: o("/logo/logo_monochrome_white@2x.png"),
+            alt: "Gearbox Protocol",
+            width: t === "default" ? 113 : 100,
+            height: t === "default" ? 36 : 24,
+            loading: "eager",
+            className: r(
+              "h-auto shrink-0",
+              t === "default" ? "w-auto h-[36px]" : "w-auto h-[24px]"
+            )
+          }
+        ),
+        n && /* @__PURE__ */ e("span", { className: "text-muted-foreground whitespace-nowrap", children: n })
+      ]
+    }
+  );
+}
+function f({
+  appName: n,
+  className: t
+}) {
+  return /* @__PURE__ */ i(m, { children: [
+    /* @__PURE__ */ e("div", { className: r("hidden lg:block", t), children: /* @__PURE__ */ i(
+      l,
+      {
+        size: "unset",
+        variant: "unset",
+        color: "main",
+        href: "/",
+        className: "inline-flex items-center gap-2",
+        children: [
+          /* @__PURE__ */ e(
+            a,
+            {
+              src: o("/logo/logo_monochrome_white.png"),
+              srcSet: `${o(
+                "/logo/logo_monochrome_white.png"
+              )} 1x, ${o(
+                "/logo/logo_monochrome_white@2x.png"
+              )} 2x, ${o("/logo/logo_monochrome_white@2x.png")} 3x`,
+              alt: "Logo",
+              style: { height: "40px" },
+              className: "w-auto cursor-pointer"
+            }
+          ),
+          n && /* @__PURE__ */ e("span", { className: "text-muted-foreground whitespace-nowrap", children: n })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: r("block lg:hidden", t), children: /* @__PURE__ */ e(
+      l,
+      {
+        size: "unset",
+        variant: "unset",
+        color: "main",
+        href: "/",
+        className: "inline-flex",
+        children: /* @__PURE__ */ e(
+          a,
+          {
+            src: o("/logo/sign_monochrome_white.png"),
+            srcSet: `${o(
+              "/logo/sign_monochrome_white.png"
+            )} 1x, ${o(
+              "/logo/sign_monochrome_white@2x.png"
+            )} 2x, ${o("/logo/sign_monochrome_white@2x.png")} 3x`,
+            alt: "Logo",
+            style: { height: "34px", marginLeft: "4px", marginTop: "4px" },
+            className: "w-auto cursor-pointer"
+          }
+        )
+      }
+    ) })
+  ] });
+}
+export {
+  u as AppLogo,
+  f as AppLogoLink
+};

package/dist/esm/components/layout/app-logo/index.js

@@ -0,0 +1,5 @@
+import { AppLogo as L, AppLogoLink as g } from "./app-logo.js";
+export {
+  L as AppLogo,
+  g as AppLogoLink
+};

package/dist/esm/components/layout/block/block.js

@@ -0,0 +1,50 @@
+import { jsx as i } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as o } from "../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+const f = {
+  none: "mb-0",
+  sm: "mb-4",
+  md: "mb-6",
+  lg: "mb-8"
+}, l = {
+  "flex-start": "justify-start",
+  center: "justify-center",
+  "flex-end": "justify-end",
+  between: "justify-between"
+}, a = {
+  "flex-start": "items-start",
+  center: "items-center",
+  "flex-end": "items-end",
+  stretch: "items-stretch"
+};
+function w({
+  children: t,
+  margin: e = "md",
+  justify: s = "flex-start",
+  align: r = "flex-start",
+  className: m,
+  ...n
+}) {
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: o(
+        "flex flex-row flex-nowrap",
+        f[e],
+        l[s],
+        a[r],
+        m
+      ),
+      ...n,
+      children: t
+    }
+  );
+}
+export {
+  w as Block
+};

package/dist/esm/components/layout/block/index.js

@@ -0,0 +1,4 @@
+import { Block as c } from "./block.js";
+export {
+  c as Block
+};

package/dist/esm/components/layout/col/col.js

@@ -0,0 +1,133 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as S from "react";
+import { cn as f } from "../../../utils/cn.js";
+const C = {
+  1: "col-span-1",
+  2: "col-span-2",
+  3: "col-span-3",
+  4: "col-span-4",
+  5: "col-span-5",
+  6: "col-span-6",
+  7: "col-span-7",
+  8: "col-span-8",
+  9: "col-span-9",
+  10: "col-span-10",
+  11: "col-span-11",
+  12: "col-span-12",
+  full: "col-span-full",
+  auto: "col-auto"
+}, g = {
+  1: "sm:col-span-1",
+  2: "sm:col-span-2",
+  3: "sm:col-span-3",
+  4: "sm:col-span-4",
+  5: "sm:col-span-5",
+  6: "sm:col-span-6",
+  7: "sm:col-span-7",
+  8: "sm:col-span-8",
+  9: "sm:col-span-9",
+  10: "sm:col-span-10",
+  11: "sm:col-span-11",
+  12: "sm:col-span-12",
+  full: "sm:col-span-full",
+  auto: "sm:col-auto"
+}, x = {
+  1: "md:col-span-1",
+  2: "md:col-span-2",
+  3: "md:col-span-3",
+  4: "md:col-span-4",
+  5: "md:col-span-5",
+  6: "md:col-span-6",
+  7: "md:col-span-7",
+  8: "md:col-span-8",
+  9: "md:col-span-9",
+  10: "md:col-span-10",
+  11: "md:col-span-11",
+  12: "md:col-span-12",
+  full: "md:col-span-full",
+  auto: "md:col-auto"
+}, _ = {
+  1: "lg:col-span-1",
+  2: "lg:col-span-2",
+  3: "lg:col-span-3",
+  4: "lg:col-span-4",
+  5: "lg:col-span-5",
+  6: "lg:col-span-6",
+  7: "lg:col-span-7",
+  8: "lg:col-span-8",
+  9: "lg:col-span-9",
+  10: "lg:col-span-10",
+  11: "lg:col-span-11",
+  12: "lg:col-span-12",
+  full: "lg:col-span-full",
+  auto: "lg:col-auto"
+}, L = {
+  1: "xl:col-span-1",
+  2: "xl:col-span-2",
+  3: "xl:col-span-3",
+  4: "xl:col-span-4",
+  5: "xl:col-span-5",
+  6: "xl:col-span-6",
+  7: "xl:col-span-7",
+  8: "xl:col-span-8",
+  9: "xl:col-span-9",
+  10: "xl:col-span-10",
+  11: "xl:col-span-11",
+  12: "xl:col-span-12",
+  full: "xl:col-span-full",
+  auto: "xl:col-auto"
+}, s = (l, o) => !l || l === 1 && !o ? "" : o === "sm" ? g[l] || "" : o === "md" ? x[l] || "" : o === "lg" ? _[l] || "" : o === "xl" ? L[l] || "" : C[l] || "", A = {
+  1: "col-start-1",
+  2: "col-start-2",
+  3: "col-start-3",
+  4: "col-start-4",
+  5: "col-start-5",
+  6: "col-start-6",
+  7: "col-start-7",
+  8: "col-start-8",
+  9: "col-start-9",
+  10: "col-start-10",
+  11: "col-start-11",
+  12: "col-start-12",
+  13: "col-start-13",
+  auto: "col-start-auto"
+}, i = {
+  1: "order-1",
+  2: "order-2",
+  3: "order-3",
+  4: "order-4",
+  5: "order-5",
+  6: "order-6",
+  7: "order-7",
+  8: "order-8",
+  9: "order-9",
+  10: "order-10",
+  11: "order-11",
+  12: "order-12",
+  first: "order-first",
+  last: "order-last",
+  none: "order-none"
+}, E = (l) => l && A[l] || "", O = (l) => l && i[l] || "", N = S.forwardRef(
+  ({ span: l = 1, sm: o, md: c, lg: a, xl: n, start: r, order: t, className: p, children: m, ...d }, u) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: u,
+      className: f(
+        s(l),
+        s(o, "sm"),
+        s(c, "md"),
+        s(a, "lg"),
+        s(n, "xl"),
+        E(r),
+        O(t),
+        p
+      ),
+      ...d,
+      children: m
+    }
+  )
+);
+N.displayName = "Col";
+export {
+  N as Col
+};

package/dist/esm/components/layout/col/index.js

@@ -0,0 +1,4 @@
+import { Col as e } from "./col.js";
+export {
+  e as Col
+};

package/dist/esm/components/layout/container/container.js

@@ -0,0 +1,38 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as n from "react";
+import { cn as o } from "../../../utils/cn.js";
+const c = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-screen-xl",
+  "2xl": "max-w-screen-2xl",
+  full: "max-w-full"
+}, f = n.forwardRef(
+  ({
+    maxWidth: e = "xl",
+    padding: m = !0,
+    center: r = !0,
+    className: a,
+    children: s,
+    ...x
+  }, l) => /* @__PURE__ */ t(
+    "div",
+    {
+      ref: l,
+      className: o(
+        "w-full",
+        c[e],
+        r && "mx-auto",
+        m && "px-4 sm:px-6 lg:px-8",
+        a
+      ),
+      ...x,
+      children: s
+    }
+  )
+);
+f.displayName = "Container";
+export {
+  f as Container
+};

package/dist/esm/components/layout/container/index.js

@@ -0,0 +1,4 @@
+import { Container as e } from "./container.js";
+export {
+  e as Container
+};