@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

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

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import cn from "../../utils/index.js";
+function TableCellSm({
+  title,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), ...props, children: [
+    title && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground font-medium", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "text-sm", children })
+  ] });
+}
+function TableLineSm({
+  title,
+  columnsXs = 1,
+  columnsSm,
+  columnsMd,
+  columns,
+  className,
+  children,
+  ...props
+}) {
+  const colsXs = columnsXs;
+  const colsSm = columnsSm ?? colsXs;
+  const colsMd = columnsMd ?? colsSm;
+  const colsLg = columns ?? colsMd;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-3 p-4 border-b border-border",
+        className
+      ),
+      ...props,
+      children: [
+        title && /* @__PURE__ */ jsx("div", { className: "font-medium mb-2", children: title }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid gap-4 table-sm-grid",
+            style: {
+              "--grid-cols-xs": colsXs,
+              "--grid-cols-sm": colsSm,
+              "--grid-cols-md": colsMd,
+              "--grid-cols-lg": colsLg
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  TableCellSm,
+  TableLineSm
+};

package/dist/esm/components/{table.js → table/table.js}

@@ -1,22 +1,37 @@
 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 cn from "../../utils/index.js";
+import { Button } from "../buttons/button.js";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger
-} from "./tooltip.js";
-const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "rounded-xl border relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
-  "table",
-  {
-    ref,
-    className: cn("w-full caption-bottom text-sm", className),
-    ...props
+} from "../tooltip.js";
+const tableVariants = cva("w-full caption-bottom", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      default: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: {
+    size: "default"
   }
-) }));
+});
+const Table = React.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+    "table",
+    {
+      ref,
+      className: cn(tableVariants({ size, className })),
+      ...props
+    }
+  ) })
+);
 Table.displayName = "Table";
 const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b ", className), ...props }));
 TableHeader.displayName = "TableHeader";
@@ -53,19 +68,54 @@ const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "th",
+const tableHeadVariants = cva(
+  "border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground",
   {
-    ref,
-    className: cn(
-      "h-10 px-2  border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground",
-      className
-    ),
-    ...props
+    variants: {
+      size: {
+        sm: "h-8 px-1 text-xs",
+        default: "h-10 px-2",
+        lg: "h-12 px-4"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
   }
-));
+);
+const TableHead = React.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+    "th",
+    {
+      ref,
+      className: cn(tableHeadVariants({ size, className })),
+      ...props
+    }
+  )
+);
 TableHead.displayName = "TableHead";
-const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("td", { ref, className: cn("p-2 align-middle", className), ...props }));
+const tableCellVariants = cva("align-middle", {
+  variants: {
+    size: {
+      sm: "p-1",
+      default: "p-2",
+      lg: "p-4"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const TableCell = React.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+    "td",
+    {
+      ref,
+      className: cn(tableCellVariants({ size, className })),
+      ...props
+    }
+  )
+);
 TableCell.displayName = "TableCell";
 const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "caption",
@@ -134,5 +184,8 @@ export {
   TableFooter,
   TableHead,
   TableHeader,
-  TableRow
+  TableRow,
+  tableCellVariants,
+  tableHeadVariants,
+  tableVariants
 };

package/dist/esm/components/textarea.js

@@ -1,15 +1,33 @@
 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, ...props }, ref) => {
+  ({ className, size, variant, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
       {
-        className: cn(
-          "flex min-h-[80px] 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",
-          className
-        ),
+        className: cn(textareaVariants({ size, variant, className })),
         ref,
         ...props
       }
@@ -18,5 +36,6 @@ const Textarea = React.forwardRef(
 );
 Textarea.displayName = "Textarea";
 export {
-  Textarea
+  Textarea,
+  textareaVariants
 };

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

@@ -0,0 +1,108 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState
+} from "react";
+const ThemeContext = createContext(void 0);
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeProvider");
+  }
+  return context;
+}
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "ui-theme",
+  attribute = "class",
+  enableColorScheme = true
+}) {
+  const [theme, setThemeState] = useState(() => {
+    if (typeof window !== "undefined") {
+      const saved = localStorage.getItem(storageKey);
+      const initialTheme = saved || defaultTheme;
+      const resolved = initialTheme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : initialTheme;
+      const root = document.documentElement;
+      root.classList.remove("light", "dark");
+      root.removeAttribute("data-theme");
+      if (attribute === "class") {
+        root.classList.add(resolved);
+      } else {
+        root.setAttribute("data-theme", resolved);
+      }
+      if (enableColorScheme) {
+        root.style.colorScheme = resolved;
+      }
+      return initialTheme;
+    }
+    return defaultTheme;
+  });
+  const [actualTheme, setActualTheme] = useState(() => {
+    if (typeof window !== "undefined") {
+      const saved = localStorage.getItem(storageKey);
+      const themeToResolve = saved || defaultTheme;
+      if (themeToResolve === "system") {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      }
+      return themeToResolve;
+    }
+    return "light";
+  });
+  const getSystemTheme = useCallback(() => {
+    if (typeof window !== "undefined") {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    return "light";
+  }, []);
+  const resolveTheme = useCallback(
+    (theme2) => {
+      return theme2 === "system" ? getSystemTheme() : theme2;
+    },
+    [getSystemTheme]
+  );
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const savedTheme = localStorage.getItem(storageKey);
+    if (savedTheme) {
+      setThemeState(savedTheme);
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      if (theme === "system") {
+        setActualTheme(getSystemTheme());
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [storageKey, theme, getSystemTheme]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const root = document.documentElement;
+    const resolved = resolveTheme(theme);
+    setActualTheme(resolved);
+    root.classList.remove("light", "dark");
+    root.removeAttribute("data-theme");
+    if (attribute === "class") {
+      root.classList.add(resolved);
+    } else {
+      root.setAttribute("data-theme", resolved);
+    }
+    if (enableColorScheme) {
+      root.style.colorScheme = resolved;
+    }
+    localStorage.setItem(storageKey, theme);
+  }, [theme, attribute, enableColorScheme, storageKey, resolveTheme]);
+  const setTheme = (newTheme) => {
+    setThemeState(newTheme);
+  };
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, setTheme, actualTheme }, children });
+}
+export {
+  ThemeProvider,
+  useTheme
+};

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

@@ -0,0 +1,61 @@
+"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,21 +1,80 @@
-import { jsx } from "react/jsx-runtime";
-import Image from "next/image";
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-function TokenIcon({ symbol, size = 48 }) {
+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`
   );
-  return /* @__PURE__ */ jsx(
-    Image,
+  const [isLoading, setIsLoading] = useState(true);
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      src,
-      alt: `${symbol} icon`,
-      width: size,
-      height: size,
-      className: "rounded-full",
-      onError: () => setSrc(defaultSrc)
+      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;
+            }
+          }
+        ` })
+      ]
     }
   );
 }

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

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import cn from "../utils/index.js";
+import { TokenIcon } from "./token-icon.js";
+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.js

@@ -11,7 +11,7 @@ const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }
     ref,
     sideOffset,
     className: cn(
-      "z-50 overflow-hidden rounded-md bg-[rgb(40,40,40)] border-[rgb(100,100,100)] border px-3 py-1.5 text-xs text-white 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",
+      "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

package/dist/esm/components/typed-intl/index.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+const renderStrong = (chunks) => /* @__PURE__ */ jsx("strong", { children: chunks });
+function FormattedMessageTyped({
+  messageId,
+  values
+}) {
+  return /* @__PURE__ */ jsx(
+    FormattedMessage,
+    {
+      id: messageId,
+      values: { strong: renderStrong, ...values }
+    }
+  );
+}
+function useIntlTyped() {
+  const intl = useIntl();
+  const formatMessage = useCallback(
+    ({ messageId }, values) => intl.formatMessage({ id: messageId }, values),
+    [intl]
+  );
+  const intlTyped = useMemo(
+    () => ({ formatMessage, intl }),
+    [intl, formatMessage]
+  );
+  return intlTyped;
+}
+export {
+  FormattedMessageTyped,
+  useIntlTyped
+};

package/dist/esm/components/vspace.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+function VSpace({ height }) {
+  return /* @__PURE__ */ jsx("div", { style: { height: `${height}px` } });
+}
+export {
+  VSpace
+};

package/dist/esm/components/with-filter-button.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import cn from "../utils/index.js";
+import { Button } from "./buttons/button.js";
+import { FilterButton } from "./buttons/filter-button.js";
+const WithFilterButton = React.forwardRef(
+  ({
+    children,
+    onClick,
+    buttonVariant = "outline",
+    buttonSize = "default",
+    buttonLabel = "Filter",
+    showIcon = true,
+    className,
+    buttonClassName,
+    onClearAll
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full flex items-center justify-between gap-4",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children }),
+          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            onClearAll && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "default", onClick: onClearAll, children: "Clear all" }),
+            /* @__PURE__ */ jsx(
+              FilterButton,
+              {
+                variant: buttonVariant,
+                size: buttonSize,
+                onClick,
+                className: buttonClassName,
+                label: buttonLabel,
+                showIcon
+              }
+            )
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+WithFilterButton.displayName = "WithFilterButton";
+export {
+  WithFilterButton
+};