@gearbox-protocol/permissionless-ui 1.7.3 → 1.7.5

package/dist/esm/components/skeleton.js

@@ -1,69 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import cn from "../utils/index.js";
-const skeletonVariants = 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__ */ jsx(
-    "div",
-    {
-      className: cn(
-        skeletonVariants({ variant, speed, width, height, className })
-      ),
-      ...props
-    }
-  );
-}
-export {
-  Skeleton,
-  skeletonVariants
-};

package/dist/esm/components/stat-badge.js

@@ -1,155 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import { TrendingDown, TrendingUp } from "lucide-react";
-import * as React from "react";
-import cn from "../utils/index.js";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger
-} from "./tooltip.js";
-const statBadgeVariants = 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 = 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 = 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.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__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "inline-flex items-center gap-1 text-xs font-medium",
-          isNegative && "text-destructive",
-          isPositive && "text-success"
-        ),
-        children: [
-          isPositive && (delta.positiveIcon || /* @__PURE__ */ jsx(TrendingUp, { className: "h-3 w-3" })),
-          isNegative && (delta.negativeIcon || /* @__PURE__ */ jsx(TrendingDown, { className: "h-3 w-3" })),
-          delta.label && /* @__PURE__ */ jsx("span", { children: delta.label })
-        ]
-      }
-    );
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: cn(statBadgeVariants({ variant, size }), className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn("flex items-center", size === "sm" ? "mb-2.5" : "mb-3"),
-              children: [
-                /* @__PURE__ */ jsx("div", { className: cn(statBadgeTitleVariants({ size }), "flex-1"), children: title }),
-                showDelta && (delta.tooltip ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-                  /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "cursor-help", children: deltaContent }) }),
-                  /* @__PURE__ */ jsx(TooltipContent, { children: delta.tooltip })
-                ] }) }) : deltaContent)
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: cn(statBadgeContentVariants({ size })), children: [
-            value,
-            valueDescription && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm ml-1", children: valueDescription })
-          ] })
-        ]
-      }
-    );
-  }
-);
-StatBadge.displayName = "StatBadge";
-const statBadgeGridVariants = 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.forwardRef(({ className, cols, gap, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(statBadgeGridVariants({ cols, gap }), className),
-      ...props,
-      children
-    }
-  );
-});
-StatBadgeGrid.displayName = "StatBadgeGrid";
-export {
-  StatBadge,
-  StatBadgeGrid,
-  statBadgeContentVariants,
-  statBadgeGridVariants,
-  statBadgeTitleVariants,
-  statBadgeVariants
-};

package/dist/esm/components/tab-control.js

@@ -1,216 +0,0 @@
-"use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-import cn from "../utils/index.js";
-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 = useRef(null);
-  const [state, setState] = useState(null);
-  const positionRef = useRef(null);
-  const handleSetState = useCallback((p) => {
-    setState(p);
-    positionRef.current = p;
-  }, []);
-  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]);
-  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 = useRef(null);
-  const itemsRef = useRef({});
-  const state = useSliderElementPosition(
-    controlState.id,
-    wrapRef.current,
-    itemsRef
-  );
-  const handleTabSelect = (tab, index) => () => controlState.handleTabChange(tab, index);
-  return /* @__PURE__ */ jsxs("div", { className: "relative w-full flex flex-col border-b border-border", children: [
-    state && /* @__PURE__ */ 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__ */ jsx(
-      "div",
-      {
-        ref: wrapRef,
-        className: 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__ */ jsx(
-            "button",
-            {
-              ref: (r) => {
-                itemsRef.current[t.id] = r;
-              },
-              type: "button",
-              onClick: t.disabled ? void 0 : handleTabSelect(t.id, index),
-              disabled: t.disabled,
-              className: 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__ */ jsxs(Fragment, { children: [
-    icon && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "mr-3",
-          selected ? "text-foreground" : "text-muted-foreground"
-        ),
-        children: icon
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: 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__ */ jsx("div", { className: "ml-1.5", children: /* @__PURE__ */ 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] = useState(initialId);
-  const [index, setIndex] = useState(initialIndex);
-  const handleTabChange = useCallback((id2, i) => {
-    setId(id2);
-    setIndex(i);
-  }, []);
-  return { id, index, handleTabChange };
-}
-function useHashTabs(tabs) {
-  const { hash: locationHash } = useLocation();
-  const navigate = useNavigate();
-  const record = useMemo(
-    () => tabs.reduce(
-      (acc, item, i) => {
-        acc[item.id] = { id: item.id, index: i };
-        return acc;
-      },
-      {}
-    ),
-    [tabs]
-  );
-  const hash = useMemo(() => {
-    return locationHash.slice(1).toLowerCase();
-  }, [locationHash]);
-  const { id, index } = record[hash] || {};
-  const handleSelectTab = useCallback(
-    (tab) => {
-      navigate(`#${tab}`);
-    },
-    [navigate]
-  );
-  return {
-    id,
-    index,
-    handleTabChange: handleSelectTab
-  };
-}
-function useSectionTab({
-  defaultTabs,
-  pathRoot,
-  selectedSection
-}) {
-  const navigate = useNavigate();
-  const record = useMemo(
-    () => defaultTabs.reduce(
-      (acc, item, i) => {
-        acc[item.id] = { id: item.id, index: i };
-        return acc;
-      },
-      {}
-    ),
-    [defaultTabs]
-  );
-  const handleTabChange = useCallback(
-    (tab) => {
-      navigate(`${pathRoot}/${tab}`);
-    },
-    [navigate, pathRoot]
-  );
-  const { id, index } = record[selectedSection] || {};
-  return { id, index, handleTabChange };
-}
-export {
-  TabControl,
-  TabItem,
-  useHashTabs,
-  useSectionTab,
-  useTabControl
-};

package/dist/esm/components/tabs.js

@@ -1,47 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as React from "react";
-import cn from "../utils/index.js";
-const Tabs = TabsPrimitive.Root;
-const TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.List,
-  {
-    ref,
-    className: cn(
-      "inline-flex h-fit items-center justify-start rounded-lg bg-muted p-1 text-muted-foreground bg-transparent p-0 space-x-6",
-      className
-    ),
-    ...props
-  }
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Trigger,
-  {
-    ref,
-    className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow rounded-none border-b-2 border-transparent px-2 py-2 text-gray-400 hover:text-white data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:text-white focus:outline-none cursor-pointer",
-      className
-    ),
-    ...props
-  }
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
-    ),
-    ...props
-  }
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-export {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger
-};

package/dist/esm/components/textarea.js

@@ -1,41 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import * as React from "react";
-import cn from "../utils/index.js";
-const textareaVariants = cva(
-  "flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-  {
-    variants: {
-      size: {
-        sm: "min-h-[60px] text-xs px-2 py-1.5",
-        default: "min-h-[80px]",
-        lg: "min-h-[120px] text-base px-4 py-3"
-      },
-      variant: {
-        default: "",
-        error: "border-red-500 focus-visible:ring-red-500"
-      }
-    },
-    defaultVariants: {
-      size: "default",
-      variant: "default"
-    }
-  }
-);
-const Textarea = React.forwardRef(
-  ({ className, size, variant, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        className: cn(textareaVariants({ size, variant, className })),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Textarea.displayName = "Textarea";
-export {
-  Textarea,
-  textareaVariants
-};

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

@@ -1,61 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useTheme } from "./theme-provider.js";
-function ThemeToggle() {
-  const { setTheme, actualTheme } = useTheme();
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick: () => setTheme(actualTheme === "dark" ? "light" : "dark"),
-      className: "rounded-md p-2 hover:bg-accent",
-      "aria-label": "Toggle theme",
-      children: actualTheme === "dark" ? /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "20",
-          height: "20",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          children: [
-            /* @__PURE__ */ jsx("title", { children: "Light theme" }),
-            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
-            /* @__PURE__ */ jsx("path", { d: "M12 2v2" }),
-            /* @__PURE__ */ jsx("path", { d: "M12 20v2" }),
-            /* @__PURE__ */ jsx("path", { d: "m4.93 4.93 1.41 1.41" }),
-            /* @__PURE__ */ jsx("path", { d: "m17.66 17.66 1.41 1.41" }),
-            /* @__PURE__ */ jsx("path", { d: "M2 12h2" }),
-            /* @__PURE__ */ jsx("path", { d: "M20 12h2" }),
-            /* @__PURE__ */ jsx("path", { d: "m6.34 17.66-1.41 1.41" }),
-            /* @__PURE__ */ jsx("path", { d: "m19.07 4.93-1.41 1.41" })
-          ]
-        }
-      ) : /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "20",
-          height: "20",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          children: [
-            /* @__PURE__ */ jsx("title", { children: "Dark theme" }),
-            /* @__PURE__ */ jsx("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
-          ]
-        }
-      )
-    }
-  );
-}
-export {
-  ThemeToggle
-};

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

@@ -1,83 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Image } from "./image.js";
-function TokenIcon({
-  symbol,
-  size = 48,
-  className,
-  ImageComponent = Image
-}) {
-  const name = symbol.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase();
-  const defaultSrc = "https://static.gearbox.fi/tokens/default.svg";
-  const [src, setSrc] = useState(
-    `https://static.gearbox.fi/tokens/${name}.svg`
-  );
-  const [isLoading, setIsLoading] = useState(true);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        width: size,
-        height: size,
-        position: "relative",
-        display: "inline-block",
-        border: "none"
-      },
-      children: [
-        isLoading && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              width: size,
-              height: size,
-              borderRadius: "50%",
-              backgroundColor: "#9ca3af",
-              position: "absolute",
-              top: 0,
-              left: 0,
-              animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              width: size,
-              height: size,
-              position: "relative",
-              opacity: isLoading ? 0 : 1,
-              transition: "opacity 0.3s ease-in-out"
-            },
-            children: /* @__PURE__ */ jsx(
-              ImageComponent,
-              {
-                src,
-                alt: "",
-                width: size,
-                height: size,
-                className,
-                onError: () => setSrc(defaultSrc),
-                onLoad: () => setIsLoading(false)
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx("style", { children: `
-          @keyframes pulse {
-            0%, 100% {
-              opacity: 1;
-            }
-            50% {
-              opacity: 0.5;
-            }
-          }
-        ` })
-      ]
-    }
-  );
-}
-export {
-  TokenIcon
-};