@gearbox-protocol/permissionless-ui 1.7.2 → 1.7.4

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

@@ -0,0 +1,147 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { TrendingUp, TrendingDown } from 'lucide-react';
+import * as React from 'react';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../tooltip/tooltip.js';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
+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/index.js

@@ -0,0 +1 @@
+export { TabControl, TabItem, useHashTabs, useSectionTab, useTabControl } from './tab-control.js';

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

@@ -0,0 +1,213 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@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 = 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/table/edit-button.js

@@ -1,6 +1,18 @@
-import { jsx } from "react/jsx-runtime";
-import { Edit } from "lucide-react";
-import { Button } from "../buttons/index.js";
+import { jsx } from 'react/jsx-runtime';
+import { Edit } from 'lucide-react';
+import '../buttons/back-button/back-button.js';
+import { Button } from '../buttons/button/button.js';
+import '../buttons/copy-button/copy-button.js';
+import '../buttons/external-button/external-button.js';
+import '../buttons/filter-button/filter-button.js';
+import '../buttons/navigation-button/navigation-button.js';
+import 'react';
+import 'clsx';
+import 'tailwind-merge';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+import '../buttons/tab-button/tab-button.js';
+
 function EditButton({
   onClick,
   customButton,
@@ -17,6 +29,5 @@ function EditButton({
     }
   ) });
 }
-export {
-  EditButton
-};
+
+export { EditButton };

package/dist/esm/components/table/editable-grid-table.js

@@ -1,10 +1,24 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ExternalLink } from "lucide-react";
-import { SignInRequired } from "../auth/index.js";
-import { Button, TabButton } from "../buttons/index.js";
-import { TokenIcon } from "../token-icon.js";
-import { GridTable, GridTableCell } from "./grid-table.js";
-import { UpdatedValue } from "./updated-value.js";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ExternalLink } from 'lucide-react';
+import { SignInRequired } from '../auth/signin-required.js';
+import 'connectkit';
+import 'viem/siwe';
+import '../buttons/back-button/back-button.js';
+import { Button } from '../buttons/button/button.js';
+import '../buttons/copy-button/copy-button.js';
+import '../buttons/external-button/external-button.js';
+import '../buttons/filter-button/filter-button.js';
+import '../buttons/navigation-button/navigation-button.js';
+import 'react';
+import 'clsx';
+import 'tailwind-merge';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+import { TabButton } from '../buttons/tab-button/tab-button.js';
+import { TokenIcon } from '../token-icon/token-icon.js';
+import { GridTableCell, GridTable } from './grid-table.js';
+import { UpdatedValue } from './updated-value.js';
+
 function GridTableCellAsset({
   assetAddress,
   symbol,
@@ -27,7 +41,7 @@ function GridTableCellAsset({
         {
           variant: "ghost",
           size: "sm",
-          className: "text-muted-foreground hover:text-white p-0 h-auto",
+          className: "text-muted-foreground hover:text-foreground p-0 h-auto",
           onClick: () => window.open(`${explorerUrl}/address/${assetAddress}`, "_blank"),
           children: /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3" })
         }
@@ -98,8 +112,5 @@ function GridTableEditable({
     /* @__PURE__ */ jsx("div", { className: "rounded-lg border", children: /* @__PURE__ */ jsx(GridTable, { cols, children }) })
   ] });
 }
-export {
-  GridTableCellAsset,
-  GridTableCellUpdatable,
-  GridTableEditable
-};
+
+export { GridTableCellAsset, GridTableCellUpdatable, GridTableEditable };

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

@@ -1,9 +1,23 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { SignInRequired } from "../auth/index.js";
-import { ExternalButton, TabButton } from "../buttons/index.js";
-import { TokenIcon } from "../token-icon.js";
-import { Table, TableCell } from "./table.js";
-import { UpdatedValue } from "./updated-value.js";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { SignInRequired } from '../auth/signin-required.js';
+import 'connectkit';
+import 'viem/siwe';
+import '../buttons/back-button/back-button.js';
+import '../buttons/button/button.js';
+import '../buttons/copy-button/copy-button.js';
+import { ExternalButton } from '../buttons/external-button/external-button.js';
+import '../buttons/filter-button/filter-button.js';
+import '../buttons/navigation-button/navigation-button.js';
+import 'react';
+import 'clsx';
+import 'tailwind-merge';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+import { TabButton } from '../buttons/tab-button/tab-button.js';
+import { TokenIcon } from '../token-icon/token-icon.js';
+import { TableCell, Table } from './table.js';
+import { UpdatedValue } from './updated-value.js';
+
 function TableCellAsset({
   assetAddress,
   symbol,
@@ -85,8 +99,5 @@ function TableEditable({
     /* @__PURE__ */ jsx(Table, { children })
   ] });
 }
-export {
-  TableCellAsset,
-  TableCellUpdatable,
-  TableEditable
-};
+
+export { TableCellAsset, TableCellUpdatable, TableEditable };

package/dist/esm/components/table/grid-error-line.js

@@ -1,9 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FormattedMessage } from "react-intl";
-import { Button } from "../buttons/button.js";
-import { Col } from "../layout/col.js";
-import { VSpace } from "../vspace.js";
-import { GridTableCell } from "./grid-table.js";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { FormattedMessage } from 'react-intl';
+import { Button } from '../buttons/button/button.js';
+import { Col } from '../layout/col/col.js';
+import { VSpace } from '../vspace/vspace.js';
+import { GridTableCell } from './grid-table.js';
+
 function GridErrorLine({
   err,
   btnTitle,
@@ -31,6 +32,5 @@ function GridErrorLine({
     }
   );
 }
-export {
-  GridErrorLine
-};
+
+export { GridErrorLine };

package/dist/esm/components/table/grid-loading-line.js

@@ -1,6 +1,10 @@
-import { jsx } from "react/jsx-runtime";
-import cn from "../../utils/index.js";
-import { Skeleton } from "../skeleton.js";
+import { jsx } from 'react/jsx-runtime';
+import { Skeleton } from '../skeleton/skeleton.js';
+import 'react';
+import { cn } from '../../utils/cn.js';
+import 'sonner';
+import '@gearbox-protocol/sdk';
+
 function GridLoadingLine({
   height = "70px",
   columns = 6,
@@ -25,6 +29,5 @@ function GridLoadingLine({
     }
   );
 }
-export {
-  GridLoadingLine
-};
+
+export { GridLoadingLine };

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

@@ -1,6 +1,7 @@
-import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../../utils/cn.js";
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '../../utils/cn.js';
+
 const GridTableLoader = React.forwardRef(
   ({ className, colSpan, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -17,6 +18,5 @@ const GridTableLoader = React.forwardRef(
   )
 );
 GridTableLoader.displayName = "GridTableLoader";
-export {
-  GridTableLoader
-};
+
+export { GridTableLoader };

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

@@ -1,9 +1,10 @@
-import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import * as React from "react";
-import { cn } from "../../utils/cn.js";
-import { Col } from "../layout/col.js";
-import { Grid } from "../layout/grid.js";
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { Col } from '../layout/col/col.js';
+import { Grid } from '../layout/grid/grid.js';
+import { cn } from '../../utils/cn.js';
+
 const gridTableVariants = cva("w-full", {
   variants: {
     size: {
@@ -144,16 +145,5 @@ const GridTableCaption = React.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 GridTableCaption.displayName = "GridTableCaption";
-export {
-  GridTable,
-  GridTableBody,
-  GridTableCaption,
-  GridTableCell,
-  GridTableFooter,
-  GridTableHead,
-  GridTableHeader,
-  GridTableRow,
-  gridTableCellVariants,
-  gridTableHeadVariants,
-  gridTableVariants
-};
+
+export { GridTable, GridTableBody, GridTableCaption, GridTableCell, GridTableFooter, GridTableHead, GridTableHeader, GridTableRow, gridTableCellVariants, gridTableHeadVariants, gridTableVariants };

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

@@ -1,13 +1,13 @@
-export * from "./edit-button.js";
-export * from "./editable-grid-table.js";
-export * from "./editable-table.js";
-export * from "./grid-error-line.js";
-export * from "./grid-loading-line.js";
-export * from "./grid-table.js";
-export * from "./grid-table-loader.js";
-export * from "./sortable-head-cell.js";
-export * from "./table.js";
-export * from "./table-loader.js";
-export * from "./table-loader-guard.js";
-export * from "./table-sm.js";
-export * from "./updated-value.js";
+export { EditButton } from './edit-button.js';
+export { GridTableCellAsset, GridTableCellUpdatable, GridTableEditable } from './editable-grid-table.js';
+export { TableCellAsset, TableCellUpdatable, TableEditable } from './editable-table.js';
+export { GridErrorLine } from './grid-error-line.js';
+export { GridLoadingLine } from './grid-loading-line.js';
+export { GridTable, GridTableBody, GridTableCaption, GridTableCell, GridTableFooter, GridTableHead, GridTableHeader, GridTableRow, gridTableCellVariants, gridTableHeadVariants, gridTableVariants } from './grid-table.js';
+export { GridTableLoader } from './grid-table-loader.js';
+export { SortableHeadCell } from './sortable-head-cell.js';
+export { SortingTableHead, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, tableCellVariants, tableHeadVariants, tableVariants } from './table.js';
+export { TableLoader } from './table-loader.js';
+export { TableLoaderGuard } from './table-loader-guard.js';
+export { TableCellSm, TableLineSm } from './table-sm.js';
+export { UpdatedValue } from './updated-value.js';

package/dist/esm/components/table/sortable-head-cell.js

@@ -1,5 +1,6 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ArrowUp, ArrowDown, ArrowUpDown } from 'lucide-react';
+
 function SortableHeadCell({
   title,
   sortType,
@@ -19,6 +20,5 @@ function SortableHeadCell({
     }
   );
 }
-export {
-  SortableHeadCell
-};
+
+export { SortableHeadCell };

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

@@ -1,6 +1,7 @@
-import { jsx } from "react/jsx-runtime";
-import { Guard } from "../guard.js";
-import { TableLoader } from "./table-loader.js";
+import { jsx } from 'react/jsx-runtime';
+import { Guard } from '../guard/guard.js';
+import { TableLoader } from './table-loader.js';
+
 function TableLoaderGuard({
   showGuard,
   children,
@@ -26,6 +27,5 @@ function TableLoaderGuard({
     }
   );
 }
-export {
-  TableLoaderGuard
-};
+
+export { TableLoaderGuard };