@gearbox-protocol/permissionless-ui 1.7.3 → 1.7.5

package/dist/cjs/components/signatures/vertical-timeline.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+
+function VerticalTimeline({
+  steps,
+  minWidth = 300
+}) {
+  const [showAll, setShowAll] = React.useState(steps.map(() => false));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative min-w-[${minWidth}px]`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-[11px] top-[2px] bottom-[20px] w-[2px] h-[calc(100% - 20px)] bg-gray-800" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        children: [
+          step.type === "default" && step.status !== "not-started" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: `absolute left-[2px] flex h-5 w-5 items-center justify-center rounded-full ${step.status === "success" ? "bg-green-500" : step.status === "error" ? "bg-red-500" : "border-2 border-gray-600 bg-transparent"}`,
+                children: [
+                  step.status === "success" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3 text-black" }),
+                  step.status === "error" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3 text-black" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-10 text-foreground", children: step.title })
+          ] }),
+          step.type === "extention" && step.status !== "not-started" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-[8px] h-2 w-2 rounded-full bg-green-500" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowAll([
+                    ...showAll.slice(0, index),
+                    !showAll[index],
+                    ...showAll.slice(index + 1)
+                  ]),
+                  className: "ml-10 text-green-500 hover:underline cursor-pointer",
+                  children: showAll[index] ? "Hide all" : "Show all"
+                }
+              )
+            ] }),
+            showAll[index] && step.children
+          ] })
+        ]
+      },
+      `step-${index}`
+    )) })
+  ] });
+}
+
+exports.VerticalTimeline = VerticalTimeline;

package/dist/cjs/components/skeleton/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_skeleton_skeleton = require('./skeleton.cjs');
+
+
+
+exports.Skeleton = components_skeleton_skeleton.Skeleton;
+exports.skeletonVariants = components_skeleton_skeleton.skeletonVariants;

package/dist/cjs/components/skeleton/skeleton.cjs

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const classVarianceAuthority = require('class-variance-authority');
+require('react');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+require('@gearbox-protocol/sdk');
+
+const skeletonVariants = classVarianceAuthority.cva("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 Skeleton({
+  className,
+  variant,
+  speed,
+  width,
+  height,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils_cn.cn(
+        skeletonVariants({ variant, speed, width, height, className })
+      ),
+      ...props
+    }
+  );
+}
+
+exports.Skeleton = Skeleton;
+exports.skeletonVariants = skeletonVariants;

package/dist/cjs/components/stat-badge/index.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_statBadge_statBadge = require('./stat-badge.cjs');
+
+
+
+exports.StatBadge = components_statBadge_statBadge.StatBadge;
+exports.StatBadgeGrid = components_statBadge_statBadge.StatBadgeGrid;
+exports.statBadgeContentVariants = components_statBadge_statBadge.statBadgeContentVariants;
+exports.statBadgeGridVariants = components_statBadge_statBadge.statBadgeGridVariants;
+exports.statBadgeTitleVariants = components_statBadge_statBadge.statBadgeTitleVariants;
+exports.statBadgeVariants = components_statBadge_statBadge.statBadgeVariants;

package/dist/cjs/components/stat-badge/stat-badge.cjs

@@ -0,0 +1,175 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const classVarianceAuthority = require('class-variance-authority');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const components_tooltip_tooltip = require('../tooltip/tooltip.cjs');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+require('@gearbox-protocol/sdk');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const statBadgeVariants = classVarianceAuthority.cva(
+  "w-full h-full rounded-lg border transition-colors",
+  {
+    variants: {
+      variant: {
+        filled: "bg-card border-border",
+        outlined: "bg-transparent border-border",
+        elevated: "bg-card border-border shadow-md",
+        primary: "bg-primary/10 border-primary/20"
+      },
+      size: {
+        sm: "p-4",
+        default: "p-6"
+      }
+    },
+    defaultVariants: {
+      variant: "filled",
+      size: "default"
+    }
+  }
+);
+const statBadgeTitleVariants = classVarianceAuthority.cva("font-medium text-muted-foreground", {
+  variants: {
+    size: {
+      sm: "text-xs leading-[0.8125rem]",
+      default: "text-sm leading-[1.0625rem]"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const statBadgeContentVariants = classVarianceAuthority.cva("font-medium text-foreground flex", {
+  variants: {
+    size: {
+      sm: "text-sm leading-[1.0625rem]",
+      default: "text-xl leading-[1.5625rem]"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const StatBadge = React__namespace.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    title,
+    value,
+    valueDescription,
+    delta,
+    ...props
+  }, ref) => {
+    const isNegative = delta && delta.value < 0;
+    const isPositive = delta && delta.value > 0;
+    const showDelta = delta && delta.value !== 0;
+    const deltaContent = showDelta && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: utils_cn.cn(
+          "inline-flex items-center gap-1 text-xs font-medium",
+          isNegative && "text-destructive",
+          isPositive && "text-success"
+        ),
+        children: [
+          isPositive && (delta.positiveIcon || /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "h-3 w-3" })),
+          isNegative && (delta.negativeIcon || /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { className: "h-3 w-3" })),
+          delta.label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: delta.label })
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: utils_cn.cn(statBadgeVariants({ variant, size }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: utils_cn.cn("flex items-center", size === "sm" ? "mb-2.5" : "mb-3"),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn(statBadgeTitleVariants({ size }), "flex-1"), children: title }),
+                showDelta && (delta.tooltip ? /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_tooltip.Tooltip, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cursor-help", children: deltaContent }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_tooltip.TooltipContent, { children: delta.tooltip })
+                ] }) }) : deltaContent)
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn(statBadgeContentVariants({ size })), children: [
+            value,
+            valueDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-sm ml-1", children: valueDescription })
+          ] })
+        ]
+      }
+    );
+  }
+);
+StatBadge.displayName = "StatBadge";
+const statBadgeGridVariants = classVarianceAuthority.cva("grid w-full", {
+  variants: {
+    cols: {
+      1: "grid-cols-1",
+      2: "grid-cols-1 md:grid-cols-2",
+      3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+      4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+      5: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
+      6: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+    },
+    gap: {
+      sm: "gap-2",
+      default: "gap-4",
+      lg: "gap-6",
+      xl: "gap-8"
+    }
+  },
+  defaultVariants: {
+    cols: 4,
+    gap: "default"
+  }
+});
+const StatBadgeGrid = React__namespace.forwardRef(({ className, cols, gap, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: utils_cn.cn(statBadgeGridVariants({ cols, gap }), className),
+      ...props,
+      children
+    }
+  );
+});
+StatBadgeGrid.displayName = "StatBadgeGrid";
+
+exports.StatBadge = StatBadge;
+exports.StatBadgeGrid = StatBadgeGrid;
+exports.statBadgeContentVariants = statBadgeContentVariants;
+exports.statBadgeGridVariants = statBadgeGridVariants;
+exports.statBadgeTitleVariants = statBadgeTitleVariants;
+exports.statBadgeVariants = statBadgeVariants;

package/dist/cjs/components/tab-control/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_tabControl_tabControl = require('./tab-control.cjs');
+
+
+
+exports.TabControl = components_tabControl_tabControl.TabControl;
+exports.TabItem = components_tabControl_tabControl.TabItem;
+exports.useHashTabs = components_tabControl_tabControl.useHashTabs;
+exports.useSectionTab = components_tabControl_tabControl.useSectionTab;
+exports.useTabControl = components_tabControl_tabControl.useTabControl;

package/dist/cjs/components/tab-control/tab-control.cjs

@@ -0,0 +1,221 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const reactRouterDom = require('react-router-dom');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+require('@gearbox-protocol/sdk');
+
+function getRefParams(activeRef) {
+  if (!activeRef) return null;
+  const { width = 0, height = 0 } = activeRef?.getBoundingClientRect() || {};
+  const top = activeRef?.offsetTop || 0;
+  const left = activeRef?.offsetLeft || 0;
+  return { width, height, left, top };
+}
+function useSliderElementPosition(id, wrapRef, itemsRef) {
+  const handleUpdateRef = React.useRef(null);
+  const [state, setState] = React.useState(null);
+  const positionRef = React.useRef(null);
+  const handleSetState = React.useCallback((p) => {
+    setState(p);
+    positionRef.current = p;
+  }, []);
+  React.useEffect(() => {
+    const activeRef = itemsRef.current[id];
+    const handleUpdate = () => {
+      const p = getRefParams(activeRef);
+      const heightUpdate = p?.height !== positionRef.current?.height;
+      const widthUpdate = p?.width !== positionRef.current?.width;
+      const leftUpdate = p?.left !== positionRef.current?.left;
+      const topUpdate = p?.top !== positionRef.current?.top;
+      if (heightUpdate || widthUpdate || leftUpdate || topUpdate) {
+        handleSetState(p);
+      }
+    };
+    handleUpdateRef.current = handleUpdate;
+    handleUpdate();
+    const observer = activeRef ? new ResizeObserver(handleUpdate) : null;
+    if (activeRef) observer?.observe(activeRef);
+    return () => {
+      activeRef && observer?.unobserve(activeRef);
+    };
+  }, [id, itemsRef, handleSetState]);
+  React.useEffect(() => {
+    const observer = wrapRef ? new ResizeObserver(() => {
+      handleUpdateRef.current?.();
+    }) : null;
+    if (wrapRef) observer?.observe(wrapRef);
+    return () => {
+      wrapRef && observer?.unobserve(wrapRef);
+    };
+  }, [wrapRef]);
+  return state;
+}
+function TabControl({
+  tabs,
+  state: controlState,
+  variant = "auto",
+  showBorder = true,
+  tabItemWrapPadding
+}) {
+  const wrapRef = React.useRef(null);
+  const itemsRef = React.useRef({});
+  const state = useSliderElementPosition(
+    controlState.id,
+    wrapRef.current,
+    itemsRef
+  );
+  const handleTabSelect = (tab, index) => () => controlState.handleTabChange(tab, index);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full flex flex-col border-b border-border", children: [
+    state && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute bottom-[-1px] left-0 h-[3px] bg-primary transition-transform duration-200 ease-in-out",
+        style: {
+          width: `${state.width}px`,
+          transform: `translate(${state.left}px)`
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: wrapRef,
+        className: utils_cn.cn(
+          "relative bottom-[-1px] flex items-stretch gap-3",
+          showBorder && "border-b border-border"
+        ),
+        children: tabs.map((t, index, arr) => {
+          const s = t.id === controlState.id;
+          const isLast = index === arr.length - 1;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              ref: (r) => {
+                itemsRef.current[t.id] = r;
+              },
+              type: "button",
+              onClick: t.disabled ? void 0 : handleTabSelect(t.id, index),
+              disabled: t.disabled,
+              className: utils_cn.cn(
+                "flex items-center bg-transparent border-none",
+                tabItemWrapPadding || "pb-3.5",
+                variant === "equal" ? "flex-1 justify-center" : !isLast && "mr-10 sm:mr-8",
+                s || t.disabled ? "cursor-default" : "cursor-pointer",
+                !t.disabled && "hover:text-foreground"
+              ),
+              style: tabItemWrapPadding ? { padding: tabItemWrapPadding } : void 0,
+              children: t.item
+            },
+            `tab-item-${t.id}`
+          );
+        })
+      }
+    )
+  ] });
+}
+function TabItem({
+  icon,
+  label,
+  selected,
+  textSize = "default",
+  amount
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: utils_cn.cn(
+          "mr-3",
+          selected ? "text-foreground" : "text-muted-foreground"
+        ),
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: utils_cn.cn(
+          "m-0 p-0 whitespace-nowrap",
+          textSize === "default" && "text-sm leading-[17px] font-normal",
+          selected ? "text-foreground" : "text-muted-foreground"
+        ),
+        children: label
+      }
+    ),
+    !!amount && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2.5 py-0.5 text-[11px] leading-[150%] font-normal bg-muted rounded-[19px]", children: amount }) })
+  ] });
+}
+function useTabControl(initialId, initialIndex = 0) {
+  const [id, setId] = React.useState(initialId);
+  const [index, setIndex] = React.useState(initialIndex);
+  const handleTabChange = React.useCallback((id2, i) => {
+    setId(id2);
+    setIndex(i);
+  }, []);
+  return { id, index, handleTabChange };
+}
+function useHashTabs(tabs) {
+  const { hash: locationHash } = reactRouterDom.useLocation();
+  const navigate = reactRouterDom.useNavigate();
+  const record = React.useMemo(
+    () => tabs.reduce(
+      (acc, item, i) => {
+        acc[item.id] = { id: item.id, index: i };
+        return acc;
+      },
+      {}
+    ),
+    [tabs]
+  );
+  const hash = React.useMemo(() => {
+    return locationHash.slice(1).toLowerCase();
+  }, [locationHash]);
+  const { id, index } = record[hash] || {};
+  const handleSelectTab = React.useCallback(
+    (tab) => {
+      navigate(`#${tab}`);
+    },
+    [navigate]
+  );
+  return {
+    id,
+    index,
+    handleTabChange: handleSelectTab
+  };
+}
+function useSectionTab({
+  defaultTabs,
+  pathRoot,
+  selectedSection
+}) {
+  const navigate = reactRouterDom.useNavigate();
+  const record = React.useMemo(
+    () => defaultTabs.reduce(
+      (acc, item, i) => {
+        acc[item.id] = { id: item.id, index: i };
+        return acc;
+      },
+      {}
+    ),
+    [defaultTabs]
+  );
+  const handleTabChange = React.useCallback(
+    (tab) => {
+      navigate(`${pathRoot}/${tab}`);
+    },
+    [navigate, pathRoot]
+  );
+  const { id, index } = record[selectedSection] || {};
+  return { id, index, handleTabChange };
+}
+
+exports.TabControl = TabControl;
+exports.TabItem = TabItem;
+exports.useHashTabs = useHashTabs;
+exports.useSectionTab = useSectionTab;
+exports.useTabControl = useTabControl;

package/dist/cjs/components/table/edit-button.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+require('../buttons/back-button/back-button.cjs');
+const components_buttons_button_button = require('../buttons/button/button.cjs');
+require('../buttons/copy-button/copy-button.cjs');
+require('../buttons/external-button/external-button.cjs');
+require('../buttons/filter-button/filter-button.cjs');
+require('../buttons/navigation-button/navigation-button.cjs');
+require('react');
+require('clsx');
+require('tailwind-merge');
+require('sonner');
+require('@gearbox-protocol/sdk');
+require('../buttons/tab-button/tab-button.cjs');
+
+function EditButton({
+  onClick,
+  customButton,
+  disabled
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: customButton ? "px-4 py-2" : "px-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+    components_buttons_button_button.Button,
+    {
+      className: customButton ? "p-0 h-fit hover:bg-accent/0" : "p-2 h-fit",
+      variant: "ghost",
+      onClick,
+      disabled,
+      children: customButton ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4" })
+    }
+  ) });
+}
+
+exports.EditButton = EditButton;