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

package/dist/esm/components/signatures/confirmation-item.js

@@ -0,0 +1,39 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import "../buttons/back-button/back-button.js";
+import "../buttons/button/button.js";
+import { CopyButton as m } from "../buttons/copy-button/copy-button.js";
+import { ExternalButton as p } from "../buttons/external-button/external-button.js";
+import "../buttons/filter-button/filter-button.js";
+import "../buttons/navigation-button/navigation-button.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import "clsx";
+import "tailwind-merge";
+import "sonner";
+import { shortenHash as s } from "../../utils/format.js";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+import "../buttons/tab-button/tab-button.js";
+import { Identicon as a } from "./identicon.js";
+function z({
+  confirmation: r,
+  note: o,
+  explorerUrl: i
+}) {
+  return /* @__PURE__ */ e("div", { className: "group relative flex items-center", children: [
+    /* @__PURE__ */ t("div", { className: "absolute left-[8px] h-2 w-2 rounded-full bg-green-500" }),
+    /* @__PURE__ */ e("div", { className: "ml-10 flex items-center gap-2", children: [
+      /* @__PURE__ */ t(a, { address: r, size: 32 }),
+      /* @__PURE__ */ t("span", { className: "text-foreground whitespace-nowrap", children: s(r) }),
+      o && /* @__PURE__ */ t("span", { className: "text-gray-500 text-xs whitespace-nowrap", children: o }),
+      /* @__PURE__ */ e("div", { className: "flex opacity-0 transition-opacity group-hover:opacity-100", children: [
+        /* @__PURE__ */ t(m, { text: r }),
+        i && /* @__PURE__ */ t(p, { url: i })
+      ] })
+    ] })
+  ] });
+}
+export {
+  z as ConfirmationItem
+};

package/dist/esm/components/signatures/identicon.js

@@ -0,0 +1,17 @@
+import { jsx as r } from "react/jsx-runtime";
+function i({
+  address: t,
+  size: e = 32
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: "rounded-full bg-gray-700 flex items-center justify-center text-foreground text-xs",
+      style: { width: e, height: e },
+      children: t.slice(2, 4)
+    }
+  );
+}
+export {
+  i as Identicon
+};

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

@@ -0,0 +1,8 @@
+import { ConfirmationItem as r } from "./confirmation-item.js";
+import { Identicon as i } from "./identicon.js";
+import { VerticalTimeline as n } from "./vertical-timeline.js";
+export {
+  r as ConfirmationItem,
+  i as Identicon,
+  n as VerticalTimeline
+};

package/dist/esm/components/signatures/vertical-timeline.js

@@ -0,0 +1,56 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { useState as n } from "react";
+import { faCheck as m, faXmark as d } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as c } from "../icons/fa-icon.js";
+function b({
+  steps: s,
+  minWidth: i = 300
+}) {
+  const [r, o] = n(s.map(() => !1));
+  return /* @__PURE__ */ t("div", { className: "py-1", children: /* @__PURE__ */ l("div", { className: `relative min-w-[${i}px]`, children: [
+    /* @__PURE__ */ t("div", { className: "absolute left-[11px] top-[2px] bottom-[20px] w-[2px] h-[calc(100%-20px)] bg-gray-800" }),
+    /* @__PURE__ */ t("div", { className: "space-y-4", children: s.map((e, a) => /* @__PURE__ */ l(
+      "div",
+      {
+        children: [
+          e.type === "default" && e.status !== "not-started" && /* @__PURE__ */ l("div", { className: "relative flex items-center", children: [
+            /* @__PURE__ */ l(
+              "div",
+              {
+                className: `absolute left-[2px] flex h-5 w-5 items-center justify-center rounded-full ${e.status === "success" ? "bg-green-500" : e.status === "error" ? "bg-red-500" : "border-2 border-gray-600 bg-transparent"}`,
+                children: [
+                  e.status === "success" && /* @__PURE__ */ t(c, { icon: m, className: "size-3 text-black" }),
+                  e.status === "error" && /* @__PURE__ */ t(c, { icon: d, className: "size-3 text-black" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ t("span", { className: "ml-10 text-foreground", children: e.title })
+          ] }),
+          e.type === "extention" && e.status !== "not-started" && /* @__PURE__ */ l("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ l("div", { className: "relative flex items-center", children: [
+              /* @__PURE__ */ t("div", { className: "absolute left-[8px] h-2 w-2 rounded-full bg-green-500" }),
+              /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => o([
+                    ...r.slice(0, a),
+                    !r[a],
+                    ...r.slice(a + 1)
+                  ]),
+                  className: "ml-10 text-green-500 hover:underline cursor-pointer",
+                  children: r[a] ? "Hide all" : "Show all"
+                }
+              )
+            ] }),
+            r[a] && e.children
+          ] })
+        ]
+      },
+      `step-${a}`
+    )) })
+  ] }) });
+}
+export {
+  b as VerticalTimeline
+};

package/dist/esm/components/simple-accordion/index.js

@@ -0,0 +1,5 @@
+import { SimpleAccordion as e, SimpleAccordionItem as i } from "./simple-accordion.js";
+export {
+  e as SimpleAccordion,
+  i as SimpleAccordionItem
+};

package/dist/esm/components/simple-accordion/simple-accordion.js

@@ -0,0 +1,90 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { IconExpand as N } from "@gearbox-protocol/static";
+import { AccordionTrigger as y, AccordionItem as S, AccordionContent as b, Accordion as p } from "../accordion/accordion.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as a } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const h = "flex-wrap text-left bg-transparent border-0 [&[data-state=open]>[data-accordion-icon]]:rotate-180";
+function u({
+  value: i,
+  title: n,
+  description: e,
+  className: c,
+  hideIcon: r = !1,
+  reverse: t = !1,
+  last: d = !1,
+  triggerClassName: l,
+  onClick: g
+}) {
+  const s = /* @__PURE__ */ m(
+    y,
+    {
+      hideIcon: !0,
+      className: a(h, l),
+      onClick: (A) => {
+        const f = A.currentTarget.getAttribute("data-state") === "open";
+        g?.(!f);
+      },
+      children: [
+        n,
+        !r && /* @__PURE__ */ o(
+          "span",
+          {
+            "data-accordion-icon": !0,
+            className: "shrink-0 leading-0 transition-transform duration-100 ease-in-out",
+            children: /* @__PURE__ */ o(N, { size: 12 })
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ m(
+    S,
+    {
+      value: i,
+      className: a(d && "border-b-0", c),
+      children: [
+        !t && s,
+        /* @__PURE__ */ o(b, { children: /* @__PURE__ */ o("div", { className: "bg-transparent", children: e }) }),
+        t && s
+      ]
+    }
+  );
+}
+u.displayName = "SimpleAccordionItem";
+function x({
+  children: i,
+  className: n,
+  type: e = "single",
+  collapsible: c = !0,
+  defaultValue: r
+}) {
+  const t = a("m-0 list-none p-0", n);
+  return e === "multiple" ? /* @__PURE__ */ o(
+    p,
+    {
+      type: "multiple",
+      defaultValue: Array.isArray(r) ? r : r ? [r] : void 0,
+      className: t,
+      children: i
+    }
+  ) : /* @__PURE__ */ o(
+    p,
+    {
+      type: "single",
+      collapsible: c,
+      defaultValue: typeof r == "string" ? r : r?.[0],
+      className: t,
+      children: i
+    }
+  );
+}
+x.displayName = "SimpleAccordion";
+export {
+  x as SimpleAccordion,
+  u as SimpleAccordionItem
+};

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

@@ -0,0 +1,6 @@
+import { SimpleDropdown as p } from "./simple-dropdown.js";
+import { SimpleDropdownMenuItem as m } from "./simple-dropdown-menu-item.js";
+export {
+  p as SimpleDropdown,
+  m as SimpleDropdownMenuItem
+};

package/dist/esm/components/simple-dropdown/simple-dropdown-menu-item.js

@@ -0,0 +1,30 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as p from "react";
+import "../dropdown-menu/dropdown-menu.js";
+import "../dropdown-menu/dropdown-menu-checkbox-item.js";
+import "../dropdown-menu/dropdown-menu-content.js";
+import { DropdownMenuItem as i } 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 "@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";
+const n = "cursor-pointer gap-0 rounded-lg px-3 py-3 text-sm font-normal leading-[17px] text-foreground hover:bg-gray-80 focus:bg-gray-80", a = p.forwardRef(({ className: o, ...r }, m) => /* @__PURE__ */ t(
+  i,
+  {
+    ref: m,
+    className: e(n, o),
+    ...r
+  }
+));
+a.displayName = "SimpleDropdownMenuItem";
+export {
+  a as SimpleDropdownMenuItem
+};

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

@@ -0,0 +1,90 @@
+import { jsxs as R, jsx as r } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-dropdown-menu";
+import { useRef as j } from "react";
+import "@gearbox-protocol/sdk";
+import { cn as l } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import { Z_INDEX as y } from "../../utils/z-index.js";
+function E({
+  children: p,
+  title: f,
+  asChild: a = !1,
+  placement: m = "bottom",
+  align: u = "start",
+  sideOffset: c = 4,
+  maxWidth: d,
+  minWidth: i,
+  open: g,
+  onOpenChange: e,
+  modal: w = !1,
+  avoidCollisions: b = !0,
+  matchTriggerWidth: D = !1,
+  closeOnlyOnOutsideClick: o = !1,
+  className: h,
+  triggerClassName: v
+}) {
+  const s = j(null), x = (n) => {
+    const P = n.target;
+    if (s.current?.contains(P)) {
+      n.preventDefault();
+      return;
+    }
+    e?.(!1);
+  }, N = l(
+    y.DROPDOWN,
+    "overflow-hidden rounded-lg border border-border bg-gray-40 p-1 text-popover-foreground shadow-lg",
+    D ? "w-[var(--radix-dropdown-menu-trigger-width)]" : "min-w-32",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out",
+    "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+    "duration-100",
+    "data-[side=bottom]:slide-in-from-bottom-2 data-[side=top]:slide-in-from-top-2 data-[side=left]:slide-in-from-left-2 data-[side=right]:slide-in-from-right-2",
+    "data-[state=closed]:data-[side=bottom]:slide-out-to-bottom-2 data-[state=closed]:data-[side=top]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-left-2 data-[state=closed]:data-[side=right]:slide-out-to-right-2",
+    h
+  );
+  return /* @__PURE__ */ R(
+    t.Root,
+    {
+      open: g,
+      onOpenChange: o ? () => {
+      } : e,
+      modal: w,
+      children: [
+        /* @__PURE__ */ r(
+          t.Trigger,
+          {
+            ref: s,
+            asChild: a,
+            className: a ? void 0 : l(
+              "inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",
+              v
+            ),
+            children: f
+          }
+        ),
+        /* @__PURE__ */ r(t.Portal, { children: /* @__PURE__ */ r(
+          t.Content,
+          {
+            side: m,
+            align: u,
+            sideOffset: c,
+            avoidCollisions: b,
+            className: N,
+            style: {
+              ...d && { maxWidth: d },
+              ...i && { minWidth: i }
+            },
+            onPointerDownOutside: o ? x : void 0,
+            onEscapeKeyDown: o ? () => e?.(!1) : void 0,
+            children: p
+          }
+        ) })
+      ]
+    }
+  );
+}
+E.displayName = "SimpleDropdown";
+export {
+  E as SimpleDropdown
+};

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

@@ -0,0 +1,7 @@
+import { Skeleton as t, skeletonVariants as r } from "./skeleton.js";
+import { SkeletonStack as n } from "./skeleton-stack.js";
+export {
+  t as Skeleton,
+  n as SkeletonStack,
+  r as skeletonVariants
+};

package/dist/esm/components/skeleton/skeleton-stack.js

@@ -0,0 +1,34 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useMemo as c } from "react";
+import "@gearbox-protocol/sdk";
+import { cn as r } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+import { Skeleton as i } from "./skeleton.js";
+const n = {
+  sm: "space-y-2",
+  md: "space-y-3",
+  lg: "space-y-4"
+};
+function w({
+  lines: o = 5,
+  className: t,
+  gap: e = "md"
+}) {
+  const p = c(
+    () => Array.from({ length: o }, () => crypto.randomUUID()),
+    [o]
+  );
+  return /* @__PURE__ */ m("div", { className: r(n[e], t), children: p.map((s, a) => /* @__PURE__ */ m(
+    i,
+    {
+      className: r("h-4 w-full", a === o - 1 && "w-3/4")
+    },
+    s
+  )) });
+}
+export {
+  w as SkeletonStack
+};

package/dist/esm/components/skeleton/skeleton.js

@@ -0,0 +1,92 @@
+import { jsx as a, Fragment as p } from "react/jsx-runtime";
+import { cva as f } from "class-variance-authority";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as w } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const c = f("animate-pulse rounded-md bg-muted", {
+  variants: {
+    variant: {
+      default: "",
+      lighter: "opacity-50",
+      darker: "opacity-80"
+    },
+    speed: {
+      slow: "[animation-duration:2s]",
+      default: "",
+      fast: "[animation-duration:0.5s]"
+    },
+    width: {
+      full: "w-full",
+      "3/4": "w-3/4",
+      "1/2": "w-1/2",
+      "1/3": "w-1/3",
+      "1/4": "w-1/4",
+      xs: "w-20",
+      sm: "w-32",
+      md: "w-48",
+      lg: "w-64",
+      xl: "w-80",
+      "2xl": "w-96"
+    },
+    height: {
+      xs: "h-3",
+      sm: "h-4",
+      md: "h-6",
+      lg: "h-8",
+      xl: "h-10",
+      "2xl": "h-12",
+      "3xl": "h-16",
+      "4xl": "h-20",
+      "5xl": "h-24"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    speed: "default",
+    width: "full",
+    height: "md"
+  }
+});
+function j({
+  className: s,
+  variant: l,
+  speed: n,
+  width: t,
+  height: e,
+  loading: m = !0,
+  children: i,
+  style: d,
+  ...h
+}) {
+  if (!m && i !== void 0)
+    return /* @__PURE__ */ a(p, { children: i });
+  const r = typeof t == "number", o = typeof e == "number", u = {
+    ...d,
+    ...r && { width: `${t}px` },
+    ...o && { height: `${e}px` }
+  };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: w(
+        c({
+          variant: l,
+          speed: n,
+          width: r ? void 0 : t ?? "full",
+          height: o ? void 0 : e ?? "md",
+          className: s
+        })
+      ),
+      style: u,
+      ...h
+    }
+  );
+}
+export {
+  j as Skeleton,
+  c as skeletonVariants
+};

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

@@ -0,0 +1,28 @@
+import { Slider as o } from "./slider.js";
+import { SliderProvider as i, useSliderContext as a } from "./slider-context.js";
+import { SliderMark as m } from "./slider-mark.js";
+import { SliderTrack as d } from "./slider-track.js";
+import { makeMarkerPoints as n, validateMarkerPoints as p } from "./slider-utils.js";
+import { THEME_COLOR_MAP as M, THUMB_HALF as S, THUMB_SIZE as v, getIntervalBounds as T, getThumbInBoundsOffset as k, resolveColor as u } from "./types.js";
+import { decimalsToStep as c, findClosestPoint as B, formatWithDecimals as C, formatWithoutDecimals as H, splitInterval as I, validateMinMax as _ } from "../../utils/math.js";
+export {
+  o as Slider,
+  m as SliderMark,
+  i as SliderProvider,
+  d as SliderTrack,
+  M as THEME_COLOR_MAP,
+  S as THUMB_HALF,
+  v as THUMB_SIZE,
+  c as decimalsToStep,
+  B as findClosestPoint,
+  C as formatWithDecimals,
+  H as formatWithoutDecimals,
+  T as getIntervalBounds,
+  k as getThumbInBoundsOffset,
+  n as makeMarkerPoints,
+  u as resolveColor,
+  I as splitInterval,
+  a as useSliderContext,
+  p as validateMarkerPoints,
+  _ as validateMinMax
+};

package/dist/esm/components/slider/slider-context.js

@@ -0,0 +1,22 @@
+import { jsx as u } from "react/jsx-runtime";
+import { createContext as d, useMemo as s, useContext as x } from "react";
+const r = d(void 0);
+function C({
+  children: n,
+  colorIntervals: e,
+  min: t,
+  max: o
+}) {
+  const i = s(
+    () => ({ colorIntervals: e, min: t, max: o }),
+    [e, t, o]
+  );
+  return /* @__PURE__ */ u(r.Provider, { value: i, children: n });
+}
+function m() {
+  return x(r);
+}
+export {
+  C as SliderProvider,
+  m as useSliderContext
+};

package/dist/esm/components/slider/slider-mark.js

@@ -0,0 +1,35 @@
+import { jsx as p } from "react/jsx-runtime";
+import { useSliderContext as i } from "./slider-context.js";
+import { getThumbInBoundsOffset as d, getIntervalBounds as b, resolveColor as g } from "./types.js";
+function I({ value: o, min: r, max: t, onSelect: n }) {
+  const c = i()?.colorIntervals, s = t - r;
+  if (s <= 0) return null;
+  const a = (o - r) / s * 100, l = d(a), u = m(o, c);
+  return /* @__PURE__ */ p(
+    "button",
+    {
+      type: "button",
+      tabIndex: -1,
+      className: "absolute h-2.5 w-2.5 rounded-full -translate-x-1/2 -translate-y-1/2 pointer-events-auto cursor-pointer border-0 p-0 appearance-none bg-transparent",
+      style: {
+        left: `calc(${a}% + ${l}px)`,
+        top: "50%",
+        backgroundColor: u ?? "hsl(var(--gray-40))"
+      },
+      onPointerDown: (f) => {
+        f.stopPropagation(), n?.(o);
+      }
+    }
+  );
+}
+function m(o, r) {
+  if (r)
+    for (const t of r) {
+      const { start: n, end: e } = b(t);
+      if (o >= n && o <= e)
+        return g(t.color) ?? "hsl(var(--success))";
+    }
+}
+export {
+  I as SliderMark
+};

package/dist/esm/components/slider/slider-track.js

@@ -0,0 +1,40 @@
+import { jsx as s, Fragment as m } from "react/jsx-runtime";
+import { useMemo as f } from "react";
+import { useSliderContext as d } from "./slider-context.js";
+import { getIntervalBounds as v, resolveColor as h } from "./types.js";
+function k() {
+  const r = d();
+  if (!r) return null;
+  const { colorIntervals: t, min: n, max: o } = r;
+  if (!t?.length) return null;
+  const e = o - n;
+  return e <= 0 ? null : /* @__PURE__ */ s(p, { intervals: t, range: e, min: n });
+}
+function p({
+  intervals: r,
+  range: t,
+  min: n
+}) {
+  const o = f(
+    () => [...r || []].reverse(),
+    [r]
+  );
+  return /* @__PURE__ */ s(m, { children: o.map((e, u) => {
+    const { start: l, end: c } = v(e), i = (l - n) / t * 100, a = (c - l) / t * 100;
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        className: "absolute h-full",
+        style: {
+          left: `${i}%`,
+          width: `${a}%`,
+          backgroundColor: h(e.color) ?? "hsl(var(--success))"
+        }
+      },
+      `interval-${u}-${l}-${c}`
+    );
+  }) });
+}
+export {
+  k as SliderTrack
+};

package/dist/esm/components/slider/slider-utils.js

@@ -0,0 +1,32 @@
+import { splitInterval as m, formatWithoutDecimals as a } from "../../utils/math.js";
+import { decimalsToStep as l, findClosestPoint as y, formatWithDecimals as u, validateMinMax as x } from "../../utils/math.js";
+function f(t, i, e) {
+  if (t.length === 0) return t;
+  const o = t.length - 1, r = {
+    point: Math.max(t[0].point, i),
+    type: t[0].type
+  }, s = {
+    point: Math.min(t[o].point, e),
+    type: t[o].type
+  }, c = t.slice(1, o).reduce((p, n) => (n.point !== r.point && n.point !== s.point && (p[n.point] = n), p), {});
+  return [r, ...Object.values(c), s];
+}
+function d(t, i, e, o, r) {
+  const s = a(t, e, 1), p = m(s, i, r).map(
+    (n) => ({
+      point: a(n, e, o),
+      type: "base"
+    })
+  );
+  return f(p, t, i);
+}
+export {
+  l as decimalsToStep,
+  y as findClosestPoint,
+  u as formatWithDecimals,
+  a as formatWithoutDecimals,
+  d as makeMarkerPoints,
+  m as splitInterval,
+  f as validateMarkerPoints,
+  x as validateMinMax
+};