@gearbox-protocol/permissionless-ui 1.2.32 → 1.3.0

package/dist/cjs/components/skeleton.js

@@ -28,24 +28,77 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var skeleton_exports = {};
 __export(skeleton_exports, {
-  Skeleton: () => Skeleton
+  Skeleton: () => Skeleton,
+  skeletonVariants: () => skeletonVariants
 });
 module.exports = __toCommonJS(skeleton_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_class_variance_authority = require("class-variance-authority");
 var import_utils = __toESM(require('../utils/index.js'));
+const skeletonVariants = (0, import_class_variance_authority.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__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: (0, import_utils.default)("animate-pulse rounded-md bg-muted", className),
+      className: (0, import_utils.default)(
+        skeletonVariants({ variant, speed, width, height, className })
+      ),
       ...props
     }
   );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Skeleton
+  Skeleton,
+  skeletonVariants
 });

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

@@ -0,0 +1,189 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stat_badge_exports = {};
+__export(stat_badge_exports, {
+  StatBadge: () => StatBadge,
+  StatBadgeGrid: () => StatBadgeGrid,
+  statBadgeContentVariants: () => statBadgeContentVariants,
+  statBadgeGridVariants: () => statBadgeGridVariants,
+  statBadgeTitleVariants: () => statBadgeTitleVariants,
+  statBadgeVariants: () => statBadgeVariants
+});
+module.exports = __toCommonJS(stat_badge_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_class_variance_authority = require("class-variance-authority");
+var import_lucide_react = require("lucide-react");
+var React = __toESM(require("react"));
+var import_utils = __toESM(require('../utils/index.js'));
+var import_tooltip = require('./tooltip.js');
+const statBadgeVariants = (0, import_class_variance_authority.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 = (0, import_class_variance_authority.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 = (0, import_class_variance_authority.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__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_utils.default)(
+          "inline-flex items-center gap-1 text-xs font-medium",
+          isNegative && "text-destructive",
+          isPositive && "text-green-600 dark:text-green-400"
+        ),
+        children: [
+          isPositive && (delta.positiveIcon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.TrendingUp, { className: "h-3 w-3" })),
+          isNegative && (delta.negativeIcon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.TrendingDown, { className: "h-3 w-3" })),
+          delta.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: delta.label })
+        ]
+      }
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_utils.default)(statBadgeVariants({ variant, size }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              className: (0, import_utils.default)("flex items-center", size === "sm" ? "mb-2.5" : "mb-3"),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_utils.default)(statBadgeTitleVariants({ size }), "flex-1"), children: title }),
+                showDelta && (delta.tooltip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tooltip.Tooltip, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cursor-help", children: deltaContent }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.TooltipContent, { children: delta.tooltip })
+                ] }) }) : deltaContent)
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_utils.default)(statBadgeContentVariants({ size })), children: [
+            value,
+            valueDescription && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-sm ml-1", children: valueDescription })
+          ] })
+        ]
+      }
+    );
+  }
+);
+StatBadge.displayName = "StatBadge";
+const statBadgeGridVariants = (0, import_class_variance_authority.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__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      className: (0, import_utils.default)(statBadgeGridVariants({ cols, gap }), className),
+      ...props,
+      children
+    }
+  );
+});
+StatBadgeGrid.displayName = "StatBadgeGrid";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StatBadge,
+  StatBadgeGrid,
+  statBadgeContentVariants,
+  statBadgeGridVariants,
+  statBadgeTitleVariants,
+  statBadgeVariants
+});

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

@@ -0,0 +1,253 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tab_control_exports = {};
+__export(tab_control_exports, {
+  TabControl: () => TabControl,
+  TabItem: () => TabItem,
+  useHashTabs: () => useHashTabs,
+  useSectionTab: () => useSectionTab,
+  useTabControl: () => useTabControl
+});
+module.exports = __toCommonJS(tab_control_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_router_dom = require("react-router-dom");
+var import_utils = __toESM(require('../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 = (0, import_react.useRef)(null);
+  const [state, setState] = (0, import_react.useState)(null);
+  const positionRef = (0, import_react.useRef)(null);
+  const handleSetState = (0, import_react.useCallback)((p) => {
+    setState(p);
+    positionRef.current = p;
+  }, []);
+  (0, import_react.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]);
+  (0, import_react.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 = (0, import_react.useRef)(null);
+  const itemsRef = (0, import_react.useRef)({});
+  const state = useSliderElementPosition(
+    controlState.id,
+    wrapRef.current,
+    itemsRef
+  );
+  const handleTabSelect = (tab, index) => () => controlState.handleTabChange(tab, index);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative w-full flex flex-col border-b border-border", children: [
+    state && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: wrapRef,
+        className: (0, import_utils.default)(
+          "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__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              ref: (r) => {
+                itemsRef.current[t.id] = r;
+              },
+              type: "button",
+              onClick: t.disabled ? void 0 : handleTabSelect(t.id, index),
+              disabled: t.disabled,
+              className: (0, import_utils.default)(
+                "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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: (0, import_utils.default)(
+          "mr-3",
+          selected ? "text-foreground" : "text-muted-foreground"
+        ),
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: (0, import_utils.default)(
+          "m-0 p-0 whitespace-nowrap",
+          textSize === "default" && "text-sm leading-[17px] font-normal",
+          selected ? "text-foreground" : "text-muted-foreground"
+        ),
+        children: label
+      }
+    ),
+    !!amount && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ml-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime.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] = (0, import_react.useState)(initialId);
+  const [index, setIndex] = (0, import_react.useState)(initialIndex);
+  const handleTabChange = (0, import_react.useCallback)((id2, i) => {
+    setId(id2);
+    setIndex(i);
+  }, []);
+  return { id, index, handleTabChange };
+}
+function useHashTabs(tabs) {
+  const { hash: locationHash } = (0, import_react_router_dom.useLocation)();
+  const navigate = (0, import_react_router_dom.useNavigate)();
+  const record = (0, import_react.useMemo)(
+    () => tabs.reduce(
+      (acc, item, i) => {
+        acc[item.id] = { id: item.id, index: i };
+        return acc;
+      },
+      {}
+    ),
+    [tabs]
+  );
+  const hash = (0, import_react.useMemo)(() => {
+    return locationHash.slice(1).toLowerCase();
+  }, [locationHash]);
+  const { id, index } = record[hash] || {};
+  const handleSelectTab = (0, import_react.useCallback)(
+    (tab) => {
+      navigate(`#${tab}`);
+    },
+    [navigate]
+  );
+  return {
+    id,
+    index,
+    handleTabChange: handleSelectTab
+  };
+}
+function useSectionTab({
+  defaultTabs,
+  pathRoot,
+  selectedSection
+}) {
+  const navigate = (0, import_react_router_dom.useNavigate)();
+  const record = (0, import_react.useMemo)(
+    () => defaultTabs.reduce(
+      (acc, item, i) => {
+        acc[item.id] = { id: item.id, index: i };
+        return acc;
+      },
+      {}
+    ),
+    [defaultTabs]
+  );
+  const handleTabChange = (0, import_react.useCallback)(
+    (tab) => {
+      navigate(`${pathRoot}/${tab}`);
+    },
+    [navigate, pathRoot]
+  );
+  const { id, index } = record[selectedSection] || {};
+  return { id, index, handleTabChange };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TabControl,
+  TabItem,
+  useHashTabs,
+  useSectionTab,
+  useTabControl
+});

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

@@ -0,0 +1,131 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var editable_grid_table_exports = {};
+__export(editable_grid_table_exports, {
+  GridTableCellAsset: () => GridTableCellAsset,
+  GridTableCellUpdatable: () => GridTableCellUpdatable,
+  GridTableEditable: () => GridTableEditable
+});
+module.exports = __toCommonJS(editable_grid_table_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_auth = require('../auth/index.js');
+var import_buttons = require('../buttons/index.js');
+var import_token_icon = require('../token-icon.js');
+var import_grid_table = require('./grid-table.js');
+var import_updated_value = require('./updated-value.js');
+function GridTableCellAsset({
+  assetAddress,
+  symbol,
+  iconSymbol,
+  comment,
+  explorerUrl,
+  span = 1
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_grid_table.GridTableCell, { span, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_token_icon.TokenIcon, { symbol: iconSymbol ?? symbol, size: 24 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", children: symbol }),
+      comment && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-md text-muted-foreground", children: [
+        "(",
+        comment,
+        ")"
+      ] }),
+      explorerUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_buttons.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__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.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__ */ (0, import_jsx_runtime.jsx)(import_grid_table.GridTableCell, { span, className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `flex ${alignmentClass} w-full text-${align}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_updated_value.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-2xl font-bold", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_auth.SignInRequired, { skipSignIn, variant: "pink", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+        onNew && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_buttons.TabButton, { onClick: onNew, disabled: isLoading || disabled, children: isLoading ? buttonLoadingText : newButtonText }),
+        actions?.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_buttons.TabButton,
+          {
+            onClick: action.onClick,
+            disabled: action.isLoading || disabled,
+            children: action.isLoading ? action.loadingText || "Loading..." : action.text
+          },
+          index
+        ))
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-lg border", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_grid_table.GridTable, { cols, children }) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GridTableCellAsset,
+  GridTableCellUpdatable,
+  GridTableEditable
+});

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

@@ -26,8 +26,8 @@ module.exports = __toCommonJS(editable_table_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_auth = require('../auth/index.js');
 var import_buttons = require('../buttons/index.js');
-var import_table = require('../table.js');
 var import_token_icon = require('../token-icon.js');
+var import_table = require('./table.js');
 var import_updated_value = require('./updated-value.js');
 function TableCellAsset({
   assetAddress,