@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

package/dist/types/utils/a11y.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Generates a unique ID with a given prefix
+ */
+export declare function generateId(prefix: string): string;
+/**
+ * ARIA props interface for accessibility
+ */
+export interface AriaProps {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean;
+    "aria-required"?: boolean;
+    "aria-disabled"?: boolean;
+}
+/**
+ * Hook for generating related IDs for form fields
+ * Useful for connecting labels, inputs, errors, and helper text
+ */
+export declare function useFormFieldIds(_name: string): {
+    inputId: string;
+    errorId: string;
+    helperId: string;
+};

package/dist/types/utils/bn-to-input-view.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Convert bigint to input view string
+ *
+ * @param number - The bigint number to convert
+ * @param decimals - Number of decimal places
+ * @param allowNegative - Whether to allow negative numbers (default: false)
+ * @param precision - Optional precision to apply
+ * @returns String representation suitable for input fields
+ *
+ * @example
+ * ```ts
+ * bnToInputView(1234567890n, 6) // "1234.56789"
+ * bnToInputView(1000000n, 6) // "1"
+ * bnToInputView(-1234567890n, 6, true) // "-1234.56789"
+ * ```
+ */
+export declare function bnToInputView(number: bigint, decimals: number, allowNegative?: boolean, precision?: number): string;

package/dist/types/utils/colors.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Resolves a CSS color value, including CSS variables, to an actual computed color
+ * @param color - The color string (e.g., "hsl(var(--foreground))" or "#ffffff")
+ * @param fallback - Fallback color if resolution fails
+ * @returns The resolved color value
+ */
+export declare function resolveCSSColor(color: string, fallback?: string): string;
+/**
+ * Gets the current value of a CSS variable from the document root
+ * @param variableName - The CSS variable name (with or without --)
+ * @returns The resolved color value or fallback
+ */
+export declare function getCSSVariable(variableName: string, fallback?: string): string;
+/**
+ * Converts hex color to rgba
+ * @param hex - Hex color string (e.g., "#02c39a" or "#02C39A")
+ * @param alpha - Alpha value (0-1)
+ * @returns rgba color string
+ */
+export declare function hexToRgba(hex: string, alpha: number): string;
+/**
+ * Generates topColor and bottomColor from a base color if not provided
+ * @param color - Base color (hex or rgba)
+ * @returns Object with topColor and bottomColor
+ */
+export declare function generateColorsFromBase(color: string): {
+    topColor: string;
+    bottomColor: string;
+};

package/dist/types/utils/format-asset-amount.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Format asset amount with precision handling
+ *
+ * @param amount - The bigint amount to format
+ * @param decimals - Number of decimal places for the token
+ * @param precision - Precision to use (default: 3)
+ * @returns Formatted string with proper handling of very small amounts
+ *
+ * @example
+ * ```ts
+ * formatAssetAmount(1000000n, 6) // "1.000"
+ * formatAssetAmount(5n, 6) // "0.000"
+ * formatAssetAmount(1n, 18) // "< 0.000"
+ * ```
+ */
+export declare function formatAssetAmount(amount: bigint, decimals: number, precision?: number): string;

package/dist/types/utils/format-money.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Formats a number or bigint as a money value with dollar sign prefix
+ *
+ * @param money - The number or bigint to format (bigint is expected in WAD format - 18 decimals)
+ * @param precision - Number of decimal places to show (optional)
+ * @returns Formatted string like "$1.23"
+ *
+ * @example
+ * ```ts
+ * formatMoney(1000) // "$1000.00"
+ * formatMoney(1500000n * 10n**18n) // "$1500000.00"
+ * formatMoney(10000000000000000n) // "< $0.01" (less than 1 cent)
+ * ```
+ */
+export declare function formatMoney(money: number | bigint, precision?: number): string;
+/**
+ * Formats a percentage amount with exponential notation for very large values
+ *
+ * @param value - The percentage value (already in percent form, e.g., 2.81 for 2.81%)
+ * @param decimals - Number of decimal places (default: 2)
+ * @returns Formatted number (without % sign)
+ *
+ * @example
+ * ```ts
+ * formatPercentAmount(2.81, 2) // "2.81"
+ * formatPercentAmount(15000, 2) // "1.50e+4"
+ * ```
+ */
+export declare function formatPercentAmount(value: number, decimals: number): string | number;
+/**
+ * Formats a percentage value that is already in percent form
+ * Use this when your value is already 2.81 (meaning 2.81%), not 0.0281
+ *
+ * @param value - The percentage value (e.g., 2.81 for 2.81%)
+ * @param decimals - Number of decimal places (default: 2)
+ * @returns Formatted percentage string like "2.81%"
+ *
+ * @example
+ * ```ts
+ * percentTemplate(2.81) // "2.81%"
+ * percentTemplate(50.0, 1) // "50.0%"
+ * ```
+ */
+export declare function percentTemplate(value: number, decimals?: number): string;
+/**
+ * The factor used for percentage values in basis points (10000 = 100%)
+ */
+export declare const PERCENTAGE_FACTOR = 10000;
+/**
+ * Formats a percentage value from basis points
+ * Use this when your value is in basis points (10000 = 100%)
+ *
+ * @param value - The percentage value in basis points (e.g., 281 for 2.81%)
+ * @param decimals - Number of decimal places (default: 2)
+ * @returns Formatted percentage string like "2.81%"
+ *
+ * @example
+ * ```ts
+ * percentageTemplate(281) // "2.81%"
+ * percentageTemplate(5000, 1) // "50.0%"
+ * percentageTemplate(10000) // "100.00%"
+ * ```
+ */
+export declare function percentageTemplate(value: number | bigint, decimals?: number): string;

package/dist/types/utils/index.d.ts

@@ -1,4 +1,14 @@
+export * from "./a11y";
+export * from "./bn-to-input-view";
 export * from "./cn";
 export { cn as default } from "./cn";
+export * from "./colors";
 export * from "./copy";
 export * from "./format";
+export * from "./format-asset-amount";
+export { formatMoney, formatPercentAmount, PERCENTAGE_FACTOR, percentageTemplate, percentTemplate, } from "./format-money";
+export * from "./interface";
+export * from "./react";
+export * from "./short-sha";
+export type { SortField as UtilsSortField, SortType } from "./sort";
+export * from "./templates";

package/dist/types/utils/interface.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Interface for token data
+ */
+export interface TokenData {
+    symbol: string;
+    decimals: number;
+    title?: string;
+    address?: string;
+}

package/dist/types/utils/react.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+/**
+ * Helper function to extract text content from React.ReactNode
+ * Recursively extracts text from React elements, strings, numbers, etc.
+ *
+ * @param label - The React node to extract text from
+ * @returns The extracted text content as a string
+ *
+ * @example
+ * ```tsx
+ * extractTextFromLabel("Simple text"); // "Simple text"
+ * extractTextFromLabel(<span>Text with <strong>bold</strong></span>); // "Text with bold"
+ * extractTextFromLabel([<span>Part 1</span>, <span>Part 2</span>]); // "Part 1 Part 2"
+ * ```
+ */
+export declare function extractTextFromLabel(label: React.ReactNode): string;
+/**
+ * Helper function to safely serialize a value to a string key
+ * Handles BigInt and other non-serializable values
+ *
+ * @param value - The value to serialize
+ * @returns A string representation of the value suitable for use as a key
+ *
+ * @example
+ * ```tsx
+ * serializeValue("test"); // "test"
+ * serializeValue(123n); // "bigint:123"
+ * serializeValue({ a: 1, b: 2 }); // '{"a":1,"b":2}'
+ * ```
+ */
+export declare function serializeValue(value: unknown): string;

package/dist/types/utils/short-sha.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Shortens a SHA string to its first 7 characters
+ *
+ * @example
+ * ```ts
+ * shortSHA("abc123def456") // "abc123d"
+ * ```
+ */
+export declare const shortSHA: (sha: string) => string;

package/dist/types/utils/sort.d.ts

@@ -0,0 +1,5 @@
+export type SortType = "asc" | "desc" | null;
+export interface SortField<T extends string = string> {
+    field: T;
+    direction?: "asc" | "desc";
+}

package/dist/types/utils/templates.d.ts

@@ -0,0 +1,61 @@
+import type { TokenData } from "@gearbox-protocol/sdk";
+import type * as React from "react";
+/**
+ * Formats a percentage value and returns it as a React element
+ * Use this when your value is already in percent form (e.g., 2.81 for 2.81%)
+ *
+ * @param value - The percentage value (e.g., 2.81 for 2.81%)
+ * @param decimals - Number of decimal places (default: 2)
+ * @returns React element with formatted percentage
+ *
+ * @example
+ * ```tsx
+ * {percentageTemplate(2.81)} // "2.81%"
+ * {percentageTemplate(50.0, 1)} // "50.0%"
+ * ```
+ */
+export declare function percentageTemplate(value: number, decimals?: number): React.ReactElement;
+type PartialTokenData = Pick<TokenData, "title" | "decimals"> & {
+    symbol?: string;
+};
+/**
+ * Formats a token amount with symbol
+ *
+ * @param value - The token amount in base units (bigint, string, number, or undefined)
+ * @param token - The token data object with title/symbol and decimals
+ * @param precision - Number of decimal places (optional)
+ * @param spaceSymbol - Symbol to use between amount and token name (default: " ")
+ * @returns React element with formatted token amount and symbol
+ *
+ * @example
+ * ```tsx
+ * {tokenTemplate(1500000000000000000n, { title: "ETH", decimals: 18 })}
+ * // "1.5 ETH"
+ * {tokenTemplate(1000000n, { title: "USDC", decimals: 6 }, 2)}
+ * // "1.00 USDC"
+ * ```
+ */
+export declare function tokenTemplate(value: bigint | string | number | undefined, token: PartialTokenData | undefined, precision?: number, spaceSymbol?: string): React.ReactElement;
+/**
+ * Formats a token amount and returns it as a string with token title
+ * Use this when you need a formatted number string with token name (not a React element)
+ *
+ * @param value - The token amount as a number (or undefined)
+ * @param token - The token data object with title/symbol and decimals
+ * @param precision - Number of decimal places (default: 2)
+ * @returns Formatted token amount as string with token title (e.g., "1.50 ETH" or "< 0.01 ETH")
+ *
+ * @example
+ * ```tsx
+ * tokenTemplateNumber(1.5, { title: "ETH", decimals: 18 })
+ * // "1.50 ETH"
+ * tokenTemplateNumber(1.0, { title: "USDC", decimals: 6 }, 2)
+ * // "1.00 USDC"
+ * tokenTemplateNumber(-1.4001, { title: "ETH", decimals: 18 }, 2)
+ * // "-1.40 ETH"
+ * tokenTemplateNumber(0.001, { title: "ETH", decimals: 18 }, 2)
+ * // "< 0.01 ETH"
+ * ```
+ */
+export declare function tokenTemplateNumber(value: number | undefined, token: PartialTokenData | undefined, precision?: number): string;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.2.33",
+  "version": "1.4.0",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",
@@ -15,16 +15,28 @@
       "import": "./dist/esm/index.js",
       "default": "./dist/cjs/index.js"
     },
+    "./next": {
+      "types": "./dist/types/components/next/index.d.ts",
+      "import": "./dist/esm/components/next/index.js",
+      "default": "./dist/cjs/components/next/index.js"
+    },
     "./tailwind": {
       "types": "./dist/types/configs/tailwind.config.d.ts",
       "import": "./dist/esm/configs/tailwind.config.js",
       "default": "./dist/cjs/configs/tailwind.config.js"
     },
-    "./globals.css": "./dist/globals.css"
+    "./preset": {
+      "types": "./dist/types/configs/tailwind-preset.d.ts",
+      "import": "./dist/esm/configs/tailwind-preset.js",
+      "default": "./dist/cjs/configs/tailwind-preset.js"
+    },
+    "./globals.css": "./dist/globals.css",
+    "./grid-safelist.css": "./dist/grid-safelist.css"
   },
   "files": [
     "dist",
-    "dist/globals.css"
+    "dist/globals.css",
+    "dist/grid-safelist.css"
   ],
   "scripts": {
     "clean": "rm -rf dist",
@@ -47,36 +59,74 @@
     "@radix-ui/react-tooltip": "^1.1.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "connectkit": "^1.8.2",
+    "lightweight-charts": "^4.1.3",
     "lucide-react": "^0.471.1",
-    "next": "15.5.3",
-    "react": "^18",
-    "react-dom": "^18",
+    "luxon": "^3.5.0",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^9.0.3",
     "react-markdown-math": "^1.0.2",
+    "reactochart": "^6.1.1",
     "remark-gfm": "^4.0.0",
     "sonner": "^1.7.2",
-    "styled-jsx": "^5.1.6",
     "tailwind-merge": "^2.6.0",
-    "tailwindcss-animate": "^1.0.7",
-    "viem": "^2.36",
-    "wagmi": "^2.14.8"
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "peerDependencies": {
+    "@gearbox-protocol/sdk": "*",
+    "@tanstack/react-query": "^5.0.0",
+    "@types/react": "^18 || ^19",
+    "@types/react-dom": "^18 || ^19",
+    "connectkit": "^1.8.0",
+    "next": ">=13",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "react-intl": "^6.0.0 || ^7.0.0",
+    "react-router-dom": "^6.0.0 || ^7.0.0",
+    "viem": "^2.0.0",
+    "wagmi": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    },
+    "react-intl": {
+      "optional": true
+    },
+    "react-router-dom": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@biomejs/biome": "^2.2.4",
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@gearbox-protocol/biome-config": "^1.0.2",
+    "@gearbox-protocol/sdk": "*",
+    "@tailwindcss/postcss": "^4.1.14",
+    "@tanstack/react-query": "^5.64.1",
     "@types/cross-spawn": "^6.0.6",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/luxon": "^3.4.2",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "autoprefixer": "^10.4.21",
+    "connectkit": "^1.9.1",
     "cross-spawn": "^7.0.6",
     "esbuild-fix-imports-plugin": "^1.0.22",
     "husky": "^9.1.7",
+    "intl-messageformat": "^10.5.9",
     "lint-staged": "^16.2.3",
-    "tailwindcss": "^3.4.1",
+    "next": "15.5.3",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-intl": "^6.7.4",
+    "react-router-dom": "^7.9.6",
+    "tailwindcss": "^4.1.14",
     "tsup": "^8.5.0",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "viem": "^2.39.0",
+    "wagmi": "^2.19.4"
   },
   "commitlint": {
     "extends": [
@@ -88,17 +138,5 @@
       "biome check --no-errors-on-unmatched --write"
     ]
   },
-  "packageManager": "pnpm@10.4.1+sha512.c753b6c3ad7afa13af388fa6d808035a008e30ea9993f58c6663e2bc5ff21679aa834db094987129aa4d488b86df57f7b634981b2f827cdcacc698cc0cfb88af",
-  "pnpm": {
-    "overrides": {
-      "elliptic@>=4.0.0 <=6.5.6": ">=6.5.7",
-      "elliptic@>=2.0.0 <=6.5.6": ">=6.5.7",
-      "elliptic@>=5.2.1 <=6.5.6": ">=6.5.7",
-      "elliptic@<6.5.6": ">=6.5.6",
-      "elliptic@<=6.6.0": ">=6.6.1",
-      "elliptic@<6.6.0": ">=6.6.0",
-      "form-data@>=4.0.0 <4.0.4": ">=4.0.4",
-      "sha.js@<=2.4.11": ">=2.4.12"
-    }
-  }
+  "packageManager": "pnpm@10.4.1+sha512.c753b6c3ad7afa13af388fa6d808035a008e30ea9993f58c6663e2bc5ff21679aa834db094987129aa4d488b86df57f7b634981b2f827cdcacc698cc0cfb88af"
 }

package/dist/cjs/components/dialog.js

@@ -1,137 +0,0 @@
-"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 dialog_exports = {};
-__export(dialog_exports, {
-  Dialog: () => Dialog,
-  DialogContent: () => DialogContent,
-  DialogDescription: () => DialogDescription,
-  DialogFooter: () => DialogFooter,
-  DialogHeader: () => DialogHeader,
-  DialogTitle: () => DialogTitle,
-  DialogTrigger: () => DialogTrigger
-});
-module.exports = __toCommonJS(dialog_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
-var import_lucide_react = require("lucide-react");
-var React = __toESM(require("react"));
-var import_utils = __toESM(require('../utils/index.js'));
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
-const DialogPortal = DialogPrimitive.Portal;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  DialogPrimitive.Overlay,
-  {
-    ref,
-    className: (0, import_utils.default)(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
-    ...props
-  }
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPortal, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlay, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    DialogPrimitive.Content,
-    {
-      ref,
-      className: (0, import_utils.default)(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
-    }
-  )
-] }));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-const DialogHeader = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  "div",
-  {
-    className: (0, import_utils.default)(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    ),
-    ...props
-  }
-);
-DialogHeader.displayName = "DialogHeader";
-const DialogFooter = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  "div",
-  {
-    className: (0, import_utils.default)(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    ),
-    ...props
-  }
-);
-DialogFooter.displayName = "DialogFooter";
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  DialogPrimitive.Title,
-  {
-    ref,
-    className: (0, import_utils.default)("text-3xl font-bold mb-6 text-white", className),
-    ...props
-  }
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  DialogPrimitive.Description,
-  {
-    ref,
-    className: (0, import_utils.default)("text-sm text-muted-foreground", className),
-    ...props
-  }
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger
-});