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

package/dist/esm/components/time-to-liquidation/time-to-liquidation.js

@@ -1,45 +1,166 @@
-import { jsxs as s, jsx as a, Fragment as e } from "react/jsx-runtime";
-import { Duration as m } from "luxon";
-import { useMemo as c } from "react";
-import { StatusDot as d } from "../status-dot/status-dot.js";
-const f = {
-  good: "success",
-  medium: "warning",
-  bad: "alert",
-  critical: "alert",
-  liquidation: "alert"
-};
-function u(r) {
-  const t = m.fromMillis(r), o = t.as("months");
-  if (o > 3) return { months: Math.floor(o) };
-  const n = t.as("days");
-  if (n >= 1) return { day: Math.floor(n) };
-}
-function x({
-  timeToLiquidation: r,
-  ttlZone: t,
-  className: o
-}) {
-  const n = c(() => {
+import { jsxs as o, jsx as m, Fragment as t } from "react/jsx-runtime";
+import * as d from "react";
+import { useMemo as a } from "react";
+import "@gearbox-protocol/sdk";
+import { cn as f } from "../../utils/cn.js";
+import "sonner";
+import { ttlLeft as h } from "../../utils/ttl.js";
+import "../accordion/accordion.js";
+import "@gearbox-protocol/static";
+import "@fortawesome/free-solid-svg-icons";
+import "../icons/fa-icon.js";
+import "../alert-badge/alert-badge.js";
+import "../alert-dialog/alert-dialog.js";
+import "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import "../asset-line/asset-line.js";
+import "../buttons/back-button/back-button.js";
+import "../buttons/button/button.js";
+import "../buttons/copy-button/copy-button.js";
+import "../buttons/external-button/external-button.js";
+import "../buttons/filter-button/filter-button.js";
+import "../buttons/navigation-button/navigation-button.js";
+import "../buttons/tab-button/tab-button.js";
+import "../token-icon/token-icon.js";
+import "connectkit";
+import "wagmi";
+import "viem/siwe";
+import "../avatar/avatar.js";
+import "../badge/badge.js";
+import "../base-link/base-link.js";
+import "react-router-dom";
+import "../card-grid/card-grid.js";
+import "../cards/card/card.js";
+import "../carousel/carousel.js";
+import "../checkbox/checkbox.js";
+import "../checkbox/checkbox-labeled.js";
+import "../checkbox-item/checkbox-item.js";
+import "../client-adapters/styled-button/styled-button.js";
+import "../client-adapters/styled-dialog-container/styled-dialog-container.js";
+import "../client-adapters/styled-rounded-image/styled-rounded-image.js";
+import "../colored-text/colored-text.js";
+import "../input/input.js";
+import "../with-title/with-title.js";
+import "../smart-number-input/balance-indicator.js";
+import "../smart-number-input/smart-number-input.js";
+import "../points-icon/points-icon.js";
+import "../skeleton/skeleton.js";
+import "react-intl";
+import "../vertical-indicator/vertical-indicator.js";
+import "../vertical-list/vertical-list.js";
+import "../confirm-menu/confirm-menu.js";
+import "../currency-button/currency-button.js";
+import "../description/description.js";
+import "../dropdown-menu/dropdown-menu.js";
+import "../dropdown-menu/dropdown-menu-checkbox-item.js";
+import "../dropdown-menu/dropdown-menu-content.js";
+import "../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 "../page-title/page-title.js";
+import "../modal/modal.js";
+import "@radix-ui/react-dialog";
+import "../dialog/dialog-container.js";
+import "../dialog/dialog-content.js";
+import "../dialog/dialog-description.js";
+import "../dialog/dialog-footer.js";
+import "../dialog/dialog-header.js";
+import "../dialog/dialog-title.js";
+import "../dialog/dialog-modal-container.js";
+import "../dialog/dialog-overlay.js";
+import "viem";
+import "../label/label.js";
+import "../edit-input/edit-input.js";
+import "../fadeout-loading/fadeout-loading.js";
+import "../filter/filter-block.js";
+import "../filter/filter-checkbox-item.js";
+import "../filter/filter-chip.js";
+import "../filter/filter-chips.js";
+import "../filter/filter-dropdown-item.js";
+import "../filter/filter-group.js";
+import "../filter/filter-label.js";
+import "../search-line/search-line.js";
+import "../tabs/tabs.js";
+import "../filter/filter-modal-item.js";
+import "../filter/filter-radio-item.js";
+import "../filter/filter-separator.js";
+import "../filter/variants.js";
+import "../token-symbol/token-symbol.js";
+import "../graph/formatters.js";
+import "lightweight-charts";
+import "../graph/graph-view.js";
+import "../help-tip/help-tip.js";
+import "../health-factor/health-factor.js";
+import "../horizontal-indicator/horizontal-indicator.js";
+import "../icon-button/icon-button.js";
+import "../layout/col/col.js";
+import "../layout/container/container.js";
+import "../layout/footer/footer.js";
+import "../layout/grid/grid.js";
+import "../layout/header/header.js";
+import "../layout/layout/layout.js";
+import "../link/link.js";
+import "../../utils/reactochart-compat.js";
+import { HealthDot as u } from "../status-elements/status-elements.js";
+import "../text-button/text-button.js";
+import "react-markdown";
+import "remark-gfm";
+import "../navbar/navbar.js";
+import "../navbar/navbar-indicator-context.js";
+import "../navitem/navitem.js";
+import "../pool-indicator-icon/pool-indicator-icon.js";
+import "../progress/progress.js";
+import "../radio-group/radio-group.js";
+import "../rounded-image/rounded-image.js";
+import "../search-bar/search-bar.js";
+import "../segmented-control/segmented-control.js";
+import "../select/select.js";
+import "../separate-line/separate-line.js";
+import "../separator/separator.js";
+import "../simple-dropdown/simple-dropdown.js";
+import "../slider/slider.js";
+import "../slider/slider-context.js";
+import "../spinner/spinner.js";
+import "../spinner-loader/spinner-loader.js";
+import "../split-list/split-list.js";
+import "../stat-badge/stat-badge.js";
+import "../status-dot/status-dot.js";
+import "../stepper/stepper.js";
+import "../switch/switch.js";
+import "../table/grid-table.js";
+import "../table/table.js";
+import "../table/grid-table-loader.js";
+import "../textarea/textarea.js";
+import "../theme-provider.js";
+import "../tip-card/tip-card.js";
+import "../toggle/toggle.js";
+import "../typography/typography.js";
+import "../with-filter-button/with-filter-button.js";
+const N = d.forwardRef(function({ timeToLiquidation: r, ttlZone: i, className: l }, s) {
+  const p = a(() => {
     if (r !== null)
-      return u(Number(r));
-  }, [r]), { months: l, day: i } = n || {};
-  return /* @__PURE__ */ s("div", { className: `flex items-center ${o || ""}`, children: [
-    r !== null ? /* @__PURE__ */ s(e, { children: [
-      l && /* @__PURE__ */ s(e, { children: [
-        l,
+      return h(r);
+  }, [r]), { months: e, day: n } = p || {}, c = () => "N/A";
+  return /* @__PURE__ */ o("div", { ref: s, className: f("flex items-center", l), children: [
+    r !== null ? /* @__PURE__ */ o(t, { children: [
+      e && /* @__PURE__ */ o(t, { children: [
+        e,
         "mo"
       ] }),
-      i && /* @__PURE__ */ s(e, { children: [
-        i,
+      n && /* @__PURE__ */ o(t, { children: [
+        n,
         "d"
       ] }),
-      !n && /* @__PURE__ */ a(e, { children: "<1d" })
-    ] }) : "N/A",
-    t && /* @__PURE__ */ a("span", { className: "ml-1.5", children: /* @__PURE__ */ a(d, { variant: f[t], size: "sm" }) })
+      !p && /* @__PURE__ */ m(t, { children: "<1d" })
+    ] }) : c(),
+    i && /* @__PURE__ */ m("span", { className: "ml-1.5", children: /* @__PURE__ */ m(u, { zone: i }) })
   ] });
-}
+});
+N.displayName = "TimeToLiquidation";
 export {
-  x as TimeToLiquidation,
-  x as default
+  N as TimeToLiquidation
 };

package/dist/esm/components/tip-card/tip-card.js

@@ -1,75 +1,112 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { cva as b } from "class-variance-authority";
-import * as g from "react";
-import { cn as a } from "../../utils/cn.js";
-import "sonner";
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import { cva as t } from "class-variance-authority";
+import * as f from "react";
 import "@gearbox-protocol/sdk";
-const m = b(
-  "relative flex items-start gap-3 rounded-lg border p-4 text-sm",
+import { cn as e } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const p = t("rounded-lg p-5 text-[14px]", {
+  variants: {
+    backgroundColor: {
+      transparent: "bg-transparent",
+      light: "bg-gray-30",
+      dark: "bg-card",
+      "gray-10": "bg-gray-10",
+      "gray-20": "bg-gray-20",
+      "gray-30": "bg-gray-30",
+      "gray-40": "bg-gray-40",
+      "gray-50": "bg-gray-50",
+      "gray-60": "bg-gray-60",
+      "gray-70": "bg-gray-70",
+      "gray-80": "bg-gray-80",
+      "gray-90": "bg-gray-90",
+      "gray-100": "bg-gray-100",
+      "gray-110": "bg-gray-110"
+    },
+    textColor: {
+      unset: "",
+      light: "text-foreground",
+      dark: "text-secondary-foreground"
+    },
+    borderColor: {
+      light: "border border-gray-20",
+      dark: "border border-gray-10",
+      none: "border-0",
+      gradient: e(
+        // Gradient border via masked pseudo-element (matches styled-components):
+        // Only the border ring is painted; the interior remains the card background.
+        "relative border-0 isolate",
+        "before:content-[''] before:absolute before:z-[-1]",
+        "before:p-px before:-inset-px before:rounded-[inherit]",
+        "before:bg-[linear-gradient(135deg,rgb(246,44,161)_0%,rgb(255,127,35)_100%)]",
+        "before:[mask:linear-gradient(rgb(255,255,255)_0px,rgb(255,255,255)_0px)_content-box_exclude,_linear-gradient(rgb(255,255,255)_0px,rgb(255,255,255)_0px)]",
+        "before:[mask-composite:exclude] before:[-webkit-mask-composite:xor]"
+      )
+    }
+  },
+  defaultVariants: {
+    textColor: "unset",
+    backgroundColor: "transparent",
+    borderColor: "dark"
+  }
+}), y = t(
+  // Translated from styled-components:
+  // - absolute, top/left 0, w/h 100%, overflow hidden, pointer-events none
+  // - border-radius: theme borderRadius.sm
+  // - ::after: absolute top/left 0, block, 4px width, 100% height, content ""
+  "",
   {
     variants: {
-      variant: {
-        default: "border-border bg-card text-foreground",
-        info: "border-blue-500/30 bg-blue-500/10 text-blue-200",
-        warning: "border-yellow-500/30 bg-yellow-500/10 text-yellow-200",
-        error: "border-red-500/30 bg-red-500/10 text-red-200",
-        success: "border-green-500/30 bg-green-500/10 text-green-200",
-        light: "border-border/50 bg-muted/50 text-muted-foreground"
-      },
-      hasIndicator: {
-        true: "pl-5",
-        false: ""
+      attributeColor: {
+        // Color only the 4px stripe (the ::after pseudo-element)
+        warning: "after:bg-warning",
+        alert: "after:bg-destructive",
+        success: "after:bg-success",
+        primary: "after:bg-primary"
       }
-    },
-    defaultVariants: {
-      variant: "default",
-      hasIndicator: !1
     }
   }
-), u = {
-  default: "bg-muted-foreground",
-  info: "bg-blue-500",
-  warning: "bg-yellow-500",
-  error: "bg-red-500",
-  success: "bg-green-500",
-  light: "bg-muted-foreground",
-  primary: "bg-primary",
-  alert: "bg-red-500"
-}, f = g.forwardRef(
+), c = f.forwardRef(
   ({
-    className: d,
-    variant: o = "default",
-    indicatorColor: r,
-    icon: t,
-    children: l,
-    ...s
-  }, i) => /* @__PURE__ */ n(
+    className: o,
+    textColor: g,
+    backgroundColor: a,
+    borderColor: n = a === "dark" ? "dark" : "light",
+    attributeColor: r,
+    children: b,
+    ...i
+  }, d) => /* @__PURE__ */ s(
     "div",
     {
-      ref: i,
-      className: a(
-        m({ variant: o, hasIndicator: !!r }),
-        d
+      ref: d,
+      className: e(
+        r ? "relative" : "",
+        p({
+          textColor: g,
+          backgroundColor: a,
+          borderColor: n
+        }),
+        o
       ),
-      ...s,
+      ...i,
       children: [
-        r && /* @__PURE__ */ e(
+        r && /* @__PURE__ */ l(
           "div",
           {
-            className: a(
-              "absolute left-0 top-0 bottom-0 w-1 rounded-l-lg",
-              u[r]
+            className: e(
+              "absolute inset-0 h-full w-full overflow-hidden pointer-events-none rounded-lg z-0",
+              "after:absolute after:top-0 after:left-0 after:block after:w-1 after:h-full after:content-['']",
+              y({ attributeColor: r })
             )
           }
         ),
-        t && /* @__PURE__ */ e("div", { className: "shrink-0", children: t }),
-        /* @__PURE__ */ e("div", { className: "flex-1", children: l })
+        b
       ]
     }
   )
 );
-f.displayName = "TipCard";
+c.displayName = "TipCard";
 export {
-  f as TipCard,
-  m as tipCardVariants
+  c as TipCard,
+  p as tipCardVariants
 };

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

@@ -0,0 +1,5 @@
+import { Toggle as r, toggleTrackVariants as a } from "./toggle.js";
+export {
+  r as Toggle,
+  a as toggleTrackVariants
+};

package/dist/esm/components/toggle/toggle.js

@@ -0,0 +1,69 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cva as i } from "class-variance-authority";
+import * as s from "react";
+import "@gearbox-protocol/sdk";
+import { cn as l } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const c = i(
+  [
+    "relative inline-flex h-5 w-8 items-center",
+    "cursor-pointer rounded-[21px] bg-gray-60",
+    "transition-[background-color] duration-100 ease-[ease]",
+    "after:pointer-events-none after:block after:h-4 after:w-4 after:rounded-full",
+    "after:bg-foreground after:shadow-[0_2px_2px_rgba(0,0,0,0.25)]",
+    "after:absolute after:top-0.5 after:right-[calc(100%-1rem-2px)]",
+    "after:transition-[right] after:duration-100 after:ease-[ease]",
+    "after:content-['']"
+  ],
+  {
+    variants: {
+      checked: {
+        false: "",
+        true: "bg-accent after:right-0.5"
+      },
+      disabled: {
+        false: "",
+        true: "cursor-default after:bg-gray-100"
+      }
+    },
+    defaultVariants: {
+      checked: !1,
+      disabled: !1
+    }
+  }
+), d = s.forwardRef(
+  ({ checked: a, onChange: t, disabled: e = !1, className: o, ...n }, f) => /* @__PURE__ */ r(
+    "label",
+    {
+      "data-checked": a,
+      "data-disabled": e,
+      className: l(
+        c({
+          checked: a,
+          disabled: !!e
+        }),
+        o
+      ),
+      children: /* @__PURE__ */ r(
+        "input",
+        {
+          ref: f,
+          type: "checkbox",
+          checked: a,
+          disabled: e,
+          onChange: () => t?.(!a),
+          className: "sr-only",
+          "aria-checked": a,
+          "aria-disabled": e,
+          ...n
+        }
+      )
+    }
+  )
+);
+d.displayName = "Toggle";
+export {
+  d as Toggle,
+  c as toggleTrackVariants
+};

package/dist/esm/components/token-icon/token-icon.js

@@ -1,47 +1,53 @@
-import { jsx as p } from "react/jsx-runtime";
-import { useState as s, useRef as h } from "react";
-import { cn as m } from "../../utils/cn.js";
-const a = "https://static.gearbox.fi/tokens/default.svg", i = /* @__PURE__ */ new Set();
-function w(t) {
-  const e = t.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase();
-  if (!e) return a;
-  const r = `https://static.gearbox.fi/tokens/${e}.svg`;
-  return i.has(r) ? a : r;
+import { jsx as s } from "react/jsx-runtime";
+import l from "react";
+import { getStatic as c } from "../../utils/static.js";
+import { RoundedImage as m } from "../rounded-image/rounded-image.js";
+const r = c("/tokens/default.svg");
+function d(e) {
+  return e.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase();
 }
-function I({ symbol: t, size: e = 48, className: r }) {
-  const n = w(t), [o, l] = s(n), [f, d] = s(!1), c = h(!1), u = () => {
-    c.current || (c.current = !0, i.add(o), l(a));
-  }, g = () => {
-    d(!0);
-  };
-  return (
-    // biome-ignore lint/performance/noImgElement: Simple img for CDN icons with browser caching
-    /* @__PURE__ */ p(
-      "img",
+function a(e) {
+  if (!e) return r;
+  if (typeof e == "object" && e !== null && "icon" in e)
+    return e.icon;
+  const n = d(e);
+  return n ? c(`/tokens/${n}.svg`) : r;
+}
+const g = l.forwardRef(
+  ({
+    symbol: e,
+    size: n = 48,
+    fit: o = "contain",
+    rounded: t = !1,
+    className: f,
+    ...i
+  }, u) => {
+    const p = a(e);
+    return /* @__PURE__ */ s(
+      m,
       {
-        src: o,
+        ref: u,
+        className: f,
+        src: p,
         alt: "",
-        width: e,
-        height: e,
-        className: m(
-          "object-contain",
-          !f && "bg-gray-200 dark:bg-gray-700 rounded-full",
-          r
-        ),
-        style: { width: e, height: e },
-        onError: u,
-        onLoad: g
+        rounded: t,
+        fit: o,
+        width: n,
+        height: n,
+        size: n,
+        ...i
       }
-    )
-  );
-}
-function x(t) {
-  t.forEach((e) => {
-    const n = `https://static.gearbox.fi/tokens/${e.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase()}.svg`, o = new window.Image();
-    o.src = n;
+    );
+  }
+);
+g.displayName = "TokenIcon";
+function h(e) {
+  e.forEach((n) => {
+    const o = a(n), t = new window.Image();
+    t.src = o;
   });
 }
 export {
-  I as TokenIcon,
-  x as preloadTokenIcons
+  g as TokenIcon,
+  h as preloadTokenIcons
 };