@gearbox-protocol/permissionless-ui 1.7.3 → 1.7.5

package/dist/esm/components/table/table-loader.js

@@ -1,6 +1,7 @@
-import { jsx } from "react/jsx-runtime";
-import { GridLoadingLine } from "./grid-loading-line.js";
-import { GridTableBody } from "./grid-table.js";
+import { jsx } from 'react/jsx-runtime';
+import { GridLoadingLine } from './grid-loading-line.js';
+import { GridTableBody } from './grid-table.js';
+
 function TableLoader({
   height = "70px",
   columns = 6,
@@ -17,6 +18,5 @@ function TableLoader({
     `${index}-${rows}`
   )) });
 }
-export {
-  TableLoader
-};
+
+export { TableLoader };

package/dist/esm/components/table/table-sm.js

@@ -1,5 +1,9 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import cn from "../../utils/index.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
 function TableCellSm({
   title,
   className,
@@ -52,7 +56,5 @@ function TableLineSm({
     }
   );
 }
-export {
-  TableCellSm,
-  TableLineSm
-};
+
+export { TableCellSm, TableLineSm };

package/dist/esm/components/table/table.js

@@ -1,15 +1,13 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import { ArrowDown } from "lucide-react";
-import * as React from "react";
-import cn from "../../utils/index.js";
-import { Button } from "../buttons/button.js";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger
-} from "../tooltip.js";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { ArrowDown } from 'lucide-react';
+import * as React from 'react';
+import { Button } from '../buttons/button/button.js';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../tooltip/tooltip.js';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
 const tableVariants = cva("w-full caption-bottom", {
   variants: {
     size: {
@@ -151,7 +149,7 @@ const SortingTableHead = React.forwardRef(
       "div",
       {
         className: cn(
-          "group flex items-center gap-1 w-fit cursor-pointer hover:text-white",
+          "group flex items-center gap-1 w-fit cursor-pointer hover:text-foreground",
           placement === "left" ? "flex-row-reverse" : "flex-row"
         ),
         onClick: () => setSort(direction === "asc" ? "desc" : "asc"),
@@ -185,17 +183,5 @@ const SortingTableHead = React.forwardRef(
   ] }) }) })
 );
 SortingTableHead.displayName = "SortingTableHead";
-export {
-  SortingTableHead,
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-  tableCellVariants,
-  tableHeadVariants,
-  tableVariants
-};
+
+export { SortingTableHead, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, tableCellVariants, tableHeadVariants, tableVariants };

package/dist/esm/components/table/updated-value.js

@@ -1,5 +1,6 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { EditButton } from "./edit-button.js";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { EditButton } from './edit-button.js';
+
 function UpdatedValue({
   oldValue,
   newValue,
@@ -19,7 +20,7 @@ function UpdatedValue({
           children: oldValue
         }
       ),
-      " \u2192 ",
+      " → ",
       /* @__PURE__ */ jsxs("span", { className: nowrap ? "whitespace-nowrap" : "", children: [
         newValue,
         postfix && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
@@ -44,6 +45,5 @@ function UpdatedValue({
     ) })
   ] });
 }
-export {
-  UpdatedValue
-};
+
+export { UpdatedValue };

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

@@ -0,0 +1 @@
+export { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs.js';

package/dist/esm/components/tabs/tabs.js

@@ -0,0 +1,46 @@
+import { jsx } from 'react/jsx-runtime';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+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-foreground data-[state=active]:border-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground 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/index.js

@@ -0,0 +1 @@
+export { Textarea, textareaVariants } from './textarea.js';

package/dist/esm/components/textarea/textarea.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+const textareaVariants = cva(
+  "flex w-full rounded-md border border-[rgb(100,100,100)] px-3 py-2 shadow-sm transition-colors placeholder:text-muted-foreground/70 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm bg-[rgb(40,40,40)] text-foreground focus:bg-[rgb(40,40,40)] active:bg-[rgb(40,40,40)] [&:not(:placeholder-shown)]:bg-[rgb(40,40,40)] autofill:bg-[rgb(40,40,40)] [-webkit-autofill]:bg-[rgb(40,40,40)] [&:-webkit-autofill]:shadow-[0_0_0_1000px_rgb(40,40,40)_inset] [&:-webkit-autofill]:[text-fill-color:currentColor] outline-none",
+  {
+    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-destructive"
+      }
+    },
+    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-provider.js

@@ -1,12 +1,6 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState
-} from "react";
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useCallback, useEffect } from 'react';
+
 const ThemeContext = createContext(void 0);
 function useTheme() {
   const context = useContext(ThemeContext);
@@ -102,7 +96,5 @@ function ThemeProvider({
   };
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, setTheme, actualTheme }, children });
 }
-export {
-  ThemeProvider,
-  useTheme
-};
+
+export { ThemeProvider, useTheme };

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

@@ -0,0 +1 @@
+export { ThemeToggle } from './theme-toggle.js';

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

@@ -0,0 +1,60 @@
+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 cursor-pointer",
+      "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/index.js

@@ -0,0 +1 @@
+export { TokenIcon } from './token-icon.js';

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

@@ -0,0 +1,82 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Image } from '../image/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 };

package/dist/esm/components/token-symbol/index.js

@@ -0,0 +1 @@
+export { TokenSymbol } from './token-symbol.js';

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

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { TokenIcon } from '../token-icon/token-icon.js';
+import 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+function getTokenSymbol(token) {
+  if (!token) return void 0;
+  if (typeof token === "string") return token;
+  return token.symbol;
+}
+function getTokenTitle(token) {
+  if (!token) return void 0;
+  if (typeof token === "string") return token;
+  return token.title;
+}
+function TokenSymbol({
+  token,
+  title,
+  className,
+  comment,
+  showIcon = true,
+  showSymbol = false,
+  size = 24,
+  chainId,
+  network,
+  maxLength,
+  ...props
+}) {
+  const symbol = getTokenSymbol(token);
+  const tokenTitle = title || getTokenTitle(token);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", className), ...props, children: [
+    showIcon && symbol && /* @__PURE__ */ jsx(
+      TokenIcon,
+      {
+        symbol,
+        size,
+        className: "rounded-full border-0"
+      }
+    ),
+    showSymbol && tokenTitle && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "font-medium", children: tokenTitle }),
+      comment && /* @__PURE__ */ jsxs("div", { className: "text-md text-muted-foreground", children: [
+        "(",
+        comment,
+        ")"
+      ] })
+    ] })
+  ] });
+}
+
+export { TokenSymbol };

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

@@ -0,0 +1 @@
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip.js';

package/dist/esm/components/tooltip/tooltip.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/esm/components/trading-view/graph-dropdown.js

@@ -0,0 +1,165 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Check } from 'lucide-react';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../select/select.js';
+
+function GraphDropdown({
+  items,
+  defaultItem,
+  onSelected,
+  multiple = false
+}) {
+  const getInitialValue = () => {
+    if (multiple) {
+      const defaults = Array.isArray(defaultItem) ? defaultItem : [defaultItem];
+      if (defaults.length === 0) return "";
+      return String(defaults[0].value);
+    }
+    const single = Array.isArray(defaultItem) ? defaultItem[0] : defaultItem;
+    return String(single?.value || "");
+  };
+  const getInitialSelected = () => {
+    if (multiple) {
+      const defaults = Array.isArray(defaultItem) ? defaultItem : [defaultItem];
+      return new Set(defaults.map((item) => item.value));
+    }
+    const single = Array.isArray(defaultItem) ? defaultItem[0] : defaultItem;
+    return new Set([single?.value].filter(Boolean));
+  };
+  const [selectedItems, setSelectedItems] = useState(getInitialSelected);
+  const [value, setValue] = useState(getInitialValue());
+  const [open, setOpen] = useState(false);
+  const isSelectingRef = useRef(false);
+  useEffect(() => {
+    if (multiple) {
+      const defaults = Array.isArray(defaultItem) ? defaultItem : [defaultItem];
+      const newSelected = new Set(defaults.map((item) => item.value));
+      setSelectedItems(newSelected);
+      if (defaults.length > 0) {
+        setValue(String(defaults[0].value));
+      }
+    } else {
+      const single = Array.isArray(defaultItem) ? defaultItem[0] : defaultItem;
+      if (single?.value) {
+        setValue(String(single.value));
+      }
+    }
+  }, [defaultItem, multiple]);
+  const handleOpenChange = useCallback(
+    (newOpen) => {
+      if (!newOpen && multiple && isSelectingRef.current) {
+        isSelectingRef.current = false;
+        return;
+      }
+      setOpen(newOpen);
+    },
+    [multiple]
+  );
+  const handleValueChange = useCallback(
+    (newValue) => {
+      const item = items.find((i) => String(i.value) === newValue);
+      if (!item) return;
+      if (multiple) {
+        isSelectingRef.current = true;
+        setSelectedItems((prev) => {
+          const newSelected = new Set(prev);
+          if (newSelected.has(item.value)) {
+            if (newSelected.size <= 1) {
+              return prev;
+            }
+            newSelected.delete(item.value);
+          } else {
+            newSelected.add(item.value);
+          }
+          onSelected(Array.from(newSelected));
+          return newSelected;
+        });
+      } else {
+        setValue(newValue);
+        onSelected(item.value);
+      }
+    },
+    [multiple, onSelected, items]
+  );
+  const title = useMemo(() => {
+    if (!multiple) {
+      const selectedItem = items.find((item) => String(item.value) === value);
+      const single = Array.isArray(defaultItem) ? defaultItem[0] : defaultItem;
+      return selectedItem || single;
+    }
+    const selected = Array.from(selectedItems).map((val) => items.find((item) => item.value === val)).filter((item) => !!item);
+    if (selected.length === 0) {
+      const defaults = Array.isArray(defaultItem) ? defaultItem : [defaultItem];
+      return defaults[0];
+    }
+    if (selected.length === 1) {
+      return selected[0];
+    }
+    const firstSelected = selected[0];
+    return {
+      value: firstSelected.value,
+      label: `${selected.length} selected`
+    };
+  }, [multiple, defaultItem, items, selectedItems, value]);
+  const selectedValue = useMemo(() => {
+    if (multiple) {
+      return "__multiple_placeholder__";
+    }
+    return value;
+  }, [multiple, value]);
+  const isOpenForbidden = !items.length || items.length === 1 && !multiple;
+  if (isOpenForbidden) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center", style: { width: "max-content" }, children: /* @__PURE__ */ jsx("div", { className: "text-xl leading-6", children: title.label }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      value: selectedValue,
+      onValueChange: handleValueChange,
+      open,
+      onOpenChange: handleOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "w-auto min-w-[16rem]", children: /* @__PURE__ */ jsx(SelectValue, { children: title.label }) }),
+        /* @__PURE__ */ jsxs(SelectContent, { className: "min-w-[16rem]", children: [
+          multiple && /* @__PURE__ */ jsx(
+            SelectItem,
+            {
+              value: "__multiple_placeholder__",
+              className: "hidden",
+              disabled: true,
+              children: title.label
+            }
+          ),
+          items.map((item, index) => {
+            const isChecked = multiple && selectedItems.has(item.value);
+            return /* @__PURE__ */ jsx(
+              SelectItem,
+              {
+                value: String(item.value),
+                onSelect: (e) => {
+                  if (multiple) {
+                    e.preventDefault();
+                  }
+                  handleValueChange(String(item.value));
+                },
+                children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  multiple && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `flex h-4 w-4 items-center justify-center rounded-[4px] border border-primary shadow transition-colors ${isChecked ? "bg-primary text-primary-foreground" : ""}`,
+                      children: isChecked && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+                    }
+                  ),
+                  item.label
+                ] })
+              },
+              `graph-item-${index}-${String(item.value)}`
+            );
+          })
+        ] })
+      ]
+    }
+  );
+}
+
+export { GraphDropdown };

package/dist/esm/components/trading-view/index.js

@@ -0,0 +1,2 @@
+export { GraphDropdown } from './graph-dropdown.js';
+export { TradingView } from './trading-view.js';