@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

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

@@ -0,0 +1,216 @@
+"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/table/editable-grid-table.js

@@ -0,0 +1,105 @@
+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";
+function GridTableCellAsset({
+  assetAddress,
+  symbol,
+  iconSymbol,
+  comment,
+  explorerUrl,
+  span = 1
+}) {
+  return /* @__PURE__ */ jsx(GridTableCell, { span, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx(TokenIcon, { symbol: iconSymbol ?? symbol, size: 24 }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "font-medium", children: symbol }),
+      comment && /* @__PURE__ */ jsxs("div", { className: "text-md text-muted-foreground", children: [
+        "(",
+        comment,
+        ")"
+      ] }),
+      explorerUrl && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "text-muted-foreground hover:text-white p-0 h-auto",
+          onClick: () => window.open(`${explorerUrl}/address/${assetAddress}`, "_blank"),
+          children: /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3" })
+        }
+      )
+    ] })
+  ] }) });
+}
+function GridTableCellUpdatable({
+  oldValue,
+  newValue,
+  onEdit,
+  isEditable = true,
+  className,
+  align = "right",
+  customButton,
+  postfix,
+  disabled,
+  nowrap,
+  span = 1
+}) {
+  const alignmentClass = {
+    left: "justify-start",
+    right: "justify-end",
+    center: "justify-center"
+  }[align];
+  return /* @__PURE__ */ jsx(GridTableCell, { span, className, children: /* @__PURE__ */ jsx("div", { className: `flex ${alignmentClass} w-full text-${align}`, children: /* @__PURE__ */ jsx(
+    UpdatedValue,
+    {
+      oldValue,
+      newValue,
+      onEdit,
+      isEditable,
+      customButton,
+      postfix,
+      disabled,
+      nowrap
+    }
+  ) }) });
+}
+function GridTableEditable({
+  title,
+  onNew,
+  newButtonText = "New",
+  buttonLoadingText = "Adding...",
+  isLoading,
+  actions,
+  children,
+  disabled = false,
+  skipSignIn = true,
+  cols = 12
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold", children: title }),
+      /* @__PURE__ */ jsx(SignInRequired, { skipSignIn, variant: "pink", size: "sm", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        onNew && /* @__PURE__ */ jsx(TabButton, { onClick: onNew, disabled: isLoading || disabled, children: isLoading ? buttonLoadingText : newButtonText }),
+        actions?.map((action, index) => /* @__PURE__ */ jsx(
+          TabButton,
+          {
+            onClick: action.onClick,
+            disabled: action.isLoading || disabled,
+            children: action.isLoading ? action.loadingText || "Loading..." : action.text
+          },
+          index
+        ))
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg border", children: /* @__PURE__ */ jsx(GridTable, { cols, children }) })
+  ] });
+}
+export {
+  GridTableCellAsset,
+  GridTableCellUpdatable,
+  GridTableEditable
+};

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

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { SignInRequired } from "../auth/index.js";
 import { ExternalButton, TabButton } from "../buttons/index.js";
-import { Table, TableCell } from "../table.js";
 import { TokenIcon } from "../token-icon.js";
+import { Table, TableCell } from "./table.js";
 import { UpdatedValue } from "./updated-value.js";
 function TableCellAsset({
   assetAddress,

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

@@ -0,0 +1,36 @@
+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";
+function GridErrorLine({
+  err,
+  btnTitle,
+  onClick,
+  last = true,
+  height = "75px"
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "grid w-full items-center gap-2 px-4",
+      style: { height, gridColumn: "1 / -1" },
+      "data-last": last,
+      children: /* @__PURE__ */ jsx(GridTableCell, { span: 12, className: "text-center", children: /* @__PURE__ */ jsxs(Col, { span: 12, children: [
+        /* @__PURE__ */ jsx(Col, { span: 12, children: /* @__PURE__ */ jsx(
+          FormattedMessage,
+          {
+            id: err?.message,
+            defaultMessage: err?.message || "Unknown Error"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(VSpace, { height: 16 }),
+        /* @__PURE__ */ jsx(Col, { span: 12, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick, children: btnTitle }) })
+      ] }) })
+    }
+  );
+}
+export {
+  GridErrorLine
+};

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

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import cn from "../../utils/index.js";
+import { Skeleton } from "../skeleton.js";
+function GridLoadingLine({
+  height = "70px",
+  columns = 6,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("contents", className),
+      style: { minHeight: height },
+      ...props,
+      children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "border-b border-border p-4 flex items-center",
+          style: { minHeight: height },
+          children: /* @__PURE__ */ jsx(Skeleton, { width: "full", height: "md" })
+        },
+        `${index}-${columns}`
+      ))
+    }
+  );
+}
+export {
+  GridLoadingLine
+};

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

@@ -0,0 +1,22 @@
+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",
+    {
+      ref,
+      className: cn(
+        "flex items-center justify-center py-8",
+        colSpan ? `col-span-${colSpan}` : "col-span-full",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 text-muted-foreground", children: /* @__PURE__ */ jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-current border-t-transparent" }) })
+    }
+  )
+);
+GridTableLoader.displayName = "GridTableLoader";
+export {
+  GridTableLoader
+};

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

@@ -0,0 +1,159 @@
+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";
+const gridTableVariants = cva("w-full", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      default: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const GridTable = React.forwardRef(
+  ({ className, size, cols = 12, gap = 0, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+    Grid,
+    {
+      ref,
+      cols,
+      gap,
+      className: cn(gridTableVariants({ size, className })),
+      ...props
+    }
+  ) })
+);
+GridTable.displayName = "GridTable";
+const GridTableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("contents [&>*]:border-b [&>*]:border-border", className),
+    ...props
+  }
+));
+GridTableHeader.displayName = "GridTableHeader";
+const GridTableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("contents [&>*:last-child>*]:border-0", className),
+    ...props
+  }
+));
+GridTableBody.displayName = "GridTableBody";
+const GridTableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "contents [&>*]:border-t [&>*]:bg-muted/50 [&>*]:font-medium",
+      className
+    ),
+    ...props
+  }
+));
+GridTableFooter.displayName = "GridTableFooter";
+const GridTableRow = React.forwardRef(
+  ({ className, cols, gap = 0, ...props }, ref) => /* @__PURE__ */ jsx(
+    Grid,
+    {
+      ref,
+      cols,
+      gap,
+      className: cn(
+        "contents md:[&>*]:border-b [&>*]:border-border [&>*]:transition-colors hover:[&>*]:bg-muted/50 data-[state=selected]:[&>*]:bg-muted",
+        className
+      ),
+      ...props
+    }
+  )
+);
+GridTableRow.displayName = "GridTableRow";
+const gridTableHeadVariants = cva(
+  "flex items-center justify-startborder-b text-left align-middle font-medium text-muted-foreground !bg-transparent",
+  {
+    variants: {
+      size: {
+        sm: "min-h-8 px-1 py-2 text-xs",
+        default: "min-h-10 px-2 py-2.5",
+        lg: "min-h-12 px-4 py-3"
+      },
+      justify: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      justify: "start"
+    }
+  }
+);
+const GridTableHead = React.forwardRef(
+  ({ className, size, span = 1, justify = "start", ...props }, ref) => /* @__PURE__ */ jsx(
+    Col,
+    {
+      ref,
+      span,
+      className: cn(gridTableHeadVariants({ size, justify, className })),
+      ...props
+    }
+  )
+);
+GridTableHead.displayName = "GridTableHead";
+const gridTableCellVariants = cva("align-middle", {
+  variants: {
+    size: {
+      sm: "p-2",
+      default: "p-4",
+      lg: "p-6"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const GridTableCell = React.forwardRef(
+  ({ className, size, span = 1, ...props }, ref) => /* @__PURE__ */ jsx(
+    Col,
+    {
+      ref,
+      span,
+      className: cn(gridTableCellVariants({ size, className })),
+      ...props
+    }
+  )
+);
+GridTableCell.displayName = "GridTableCell";
+const GridTableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "col-span-full mt-4 text-sm text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+GridTableCaption.displayName = "GridTableCaption";
+export {
+  GridTable,
+  GridTableBody,
+  GridTableCaption,
+  GridTableCell,
+  GridTableFooter,
+  GridTableHead,
+  GridTableHeader,
+  GridTableRow,
+  gridTableCellVariants,
+  gridTableHeadVariants,
+  gridTableVariants
+};

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

@@ -0,0 +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";

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

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
+function SortableHeadCell({
+  title,
+  sortType,
+  onSort,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onSort,
+      className: `flex items-center justify-end gap-1 hover:text-foreground transition-colors cursor-pointer ${className || ""}`,
+      children: [
+        title,
+        sortType === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3.5 w-3.5" }) : sortType === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3.5 w-3.5 opacity-50" })
+      ]
+    }
+  );
+}
+export {
+  SortableHeadCell
+};

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

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { Guard } from "../guard.js";
+import { TableLoader } from "./table-loader.js";
+function TableLoaderGuard({
+  showGuard,
+  children,
+  height = "70px",
+  columns = 6,
+  rows = 5,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Guard,
+    {
+      showGuard,
+      guard: showGuard && /* @__PURE__ */ jsx(
+        TableLoader,
+        {
+          height,
+          columns,
+          rows,
+          ...props
+        }
+      ),
+      children
+    }
+  );
+}
+export {
+  TableLoaderGuard
+};

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

@@ -0,0 +1,22 @@
+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,
+  rows = 5,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(GridTableBody, { className, ...props, children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsx(
+    GridLoadingLine,
+    {
+      height,
+      columns
+    },
+    `${index}-${rows}`
+  )) });
+}
+export {
+  TableLoader
+};