@gearbox-protocol/permissionless-ui 1.22.0-next.1 → 1.22.0-next.10

package/dist/types/components/rounded-image/rounded-image.d.ts

@@ -1,11 +1,26 @@
-import type * as React from "react";
-export interface RoundedImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+import { default as React } from '../../../node_modules/.pnpm/react@19.2.0/node_modules/react';
+export interface RoundedImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "onError"> {
     /**
      * Size of the image in pixels
      */
-    size?: number;
+    size: number;
+    /**
+     * Whether to apply rounded corners (circle)
+     */
+    rounded?: boolean;
+    /**
+     * Default icon to display if the image fails to load
+     */
+    defaultIcon?: string;
+    /**
+     * Image fit behavior
+     * - "contain" — show full image without cropping (best for icons)
+     * - "cover" — fill bounds, may crop (best for photos/avatars)
+     */
+    fit?: "contain" | "cover";
 }
 /**
  * RoundedImage — a circular image component
  */
-export declare function RoundedImage({ className, size, style, ...props }: RoundedImageProps): import("react/jsx-runtime").JSX.Element;
+declare const RoundedImage: React.ForwardRefExoticComponent<RoundedImageProps & React.RefAttributes<HTMLImageElement>>;
+export { RoundedImage };

package/dist/types/components/table/edit-button.d.ts

@@ -1,6 +1,6 @@
 import { ButtonProps } from '../buttons';
 import type * as React from "react";
-interface EditButtonProps extends Omit<ButtonProps, "variant"> {
+interface EditButtonProps extends Omit<ButtonProps, "variant" | "width"> {
     /**
      * @deprecated Use children instead
      */

package/dist/types/components/vertical-list/vertical-list.d.ts

@@ -1,14 +1,11 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const verticalListVariants: (props?: ({
-    gap?: "default" | "sm" | "lg" | "xs" | "md" | null | undefined;
+    rowGap?: "default" | "xs" | "md" | null | undefined;
     divided?: boolean | null | undefined;
+    nested?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface VerticalListProps extends React.HTMLAttributes<HTMLUListElement>, VariantProps<typeof verticalListVariants> {
-    /**
-     * Gap between items
-     */
-    gap?: "xs" | "sm" | "default" | "md" | "lg";
     /**
      * Show dividers between items
      */

package/dist/types/configs/tailwind-preset.d.ts

@@ -57,6 +57,8 @@ export declare const preset: {
                     foreground: string;
                 };
                 success: string;
+                "success-foreground": string;
+                "success-hover": string;
                 warning: string;
                 liquidation: string;
                 border: string;

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

@@ -84,18 +84,3 @@ export declare const SLIPPAGE_DECIMALS = 1000n;
  * ```
  */
 export declare function formatMoneyAmount(value: number | bigint | string, options?: number | Intl.NumberFormatOptions): string;
-/**
- * Formats a slippage value to percentage string
- *
- * @param slippage - The slippage value (e.g., 10 for 1%)
- * @param precision - Number of decimal places (default: 1)
- * @returns Formatted slippage string like "1.0%"
- *
- * @example
- * ```ts
- * slippageTemplate(10) // "1.0%"
- * slippageTemplate(5, 2) // "0.50%"
- * slippageTemplate(undefined) // "-"
- * ```
- */
-export declare function slippageTemplate(slippage?: number, precision?: number): string;

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

@@ -0,0 +1,15 @@
+/**
+ * Formats a slippage value to percentage string
+ *
+ * @param slippage - The slippage value (e.g., 10 for 1%)
+ * @param precision - Number of decimal places (default: 1)
+ * @returns Formatted slippage string like "1.0%"
+ *
+ * @example
+ * ```ts
+ * slippageTemplate(10) // "1.0%"
+ * slippageTemplate(5, 2) // "0.50%"
+ * slippageTemplate(undefined) // "-"
+ * ```
+ */
+export declare function slippageTemplate(slippage?: number, precision?: number): string;

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

@@ -7,8 +7,9 @@ export * from './colors';
 export * from './copy';
 export * from './format';
 export * from './format-asset-amount';
-export { formatMoney, formatMoney as formatMoneyAmount, formatPercentAmount, PERCENTAGE_FACTOR, percentageTemplate, percentTemplate, SLIPPAGE_DECIMALS, slippageTemplate, } from './format-money';
+export { formatMoney, formatMoney as formatMoneyAmount, formatPercentAmount, PERCENTAGE_FACTOR, percentageTemplate, percentTemplate, SLIPPAGE_DECIMALS, } from './format-money';
 export { FORMAT_CONSTANTS, type FormatNumberOptions, formatNumberWithSuffix, formatPrice, getAdaptiveDecimals, isBelowDisplayThreshold, isEffectivelyZero, toSignificantDigits, } from './format-number';
+export * from './format-slippage';
 export * from './interface';
 export * from './network-icons';
 export * from './parse-input-to-bn';

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

@@ -0,0 +1,3 @@
+export declare const STATIC_SERVER = "https://static.gearbox.finance";
+export declare const buildStaticUrl: (domain?: string) => (url: string) => string;
+export declare const getStatic: (url: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.22.0-next.1",
+  "version": "1.22.0-next.10",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",
@@ -32,13 +32,15 @@
     },
     "./globals.css": "./dist/globals.css",
     "./grid-safelist.css": "./dist/grid-safelist.css",
-    "./theme.css": "./src/styles/theme.css"
+    "./theme.css": "./src/styles/theme.css",
+    "./base.css": "./src/styles/base.css"
   },
   "files": [
     "dist",
     "dist/globals.css",
     "dist/grid-safelist.css",
-    "src/styles/theme.css"
+    "src/styles/theme.css",
+    "src/styles/base.css"
   ],
   "scripts": {
     "clean": "rm -rf dist",

package/src/styles/base.css

@@ -0,0 +1,492 @@
+/**
+ * Base styles for @gearbox-protocol/permissionless-ui
+ *
+ * This file contains:
+ * - Google Fonts import (Rubik)
+ * - CSS variables for light/dark themes (:root, .dark)
+ * - Base body styles with fallbacks
+ * - Scrollbar styles (custom + navbar)
+ * - Table responsive grid (.table-sm-grid)
+ * - React-Slick carousel overrides
+ * - Liquidation graph styles
+ *
+ * Does NOT contain:
+ * - @import "tailwindcss" (import separately)
+ * - @theme block (use theme.css for Tailwind v4 utilities)
+ * - Grid safelist (use grid-safelist.css)
+ *
+ * Usage:
+ * - For full setup: import globals.css (includes everything)
+ * - For modular setup: import base.css + theme.css + tailwindcss separately
+ */
+@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap");
+
+/*
+ * Critical fallback styles for browsers without CSS variable support
+ * or when @layer/@theme directives fail. These use raw color values
+ * to ensure the page is at least readable.
+ */
+html {
+  /* Light theme fallback */
+  background-color: #f8f9fa;
+  color: #1f1f23;
+}
+
+html.dark {
+  /* Dark theme fallback */
+  background-color: #141416;
+  color: #ffffff;
+}
+
+@layer base {
+  :root {
+    color-scheme: light dark;
+
+    --background: 225 15% 98%;
+    --foreground: 240 5% 12%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 5% 12%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 5% 12%;
+    --primary: 323.89 93.39% 47.45%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 225 12% 92%;
+    --secondary-foreground: 240 8.94% 75.88%;
+    --muted: 225 10% 90%;
+    --muted-foreground: 225 6% 40%;
+    --accent: 323.83 100% 58.04%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 85% 50%;
+    --destructive-foreground: 0 0% 100%;
+    --success: 136.51 100% 78.63%;
+    --success-foreground: 0 0% 0%;
+    --success-hover: 136.58 100% 85.1%;
+    --warning: 38 95% 45%;
+    --liquidation: 274 67% 48%;
+    --input: 225 10% 88%;
+    --ring: 330 100% 50%;
+    --radius: 0.75rem;
+    --gray-10: 228 6.76% 70.98%;
+    --gray-20: 220 6.12% 51.96%;
+    --gray-30: 222.86 5.74% 47.84%;
+    --gray-40: 221.54 5.83% 43.73%;
+    --gray-50: 223.64 5.42% 39.8%;
+    --gray-60: 220 6.59% 35.69%;
+    --gray-70: 223.64 6.83% 31.57%;
+    --gray-80: 220 6.47% 27.25%;
+    --gray-90: 220 7.56% 23.33%;
+    --gray-100: 217.5 8.16% 19.22%;
+    --gray-110: 225 5.26% 14.9%;
+    --text-secondary: 225 6% 45%;
+    --dropdown-dark-button: 225 8% 25%;
+    --white: 0 0% 100%;
+    --white-foreground: 240 2.56% 7.65%;
+    --black: 0 0% 0%;
+    --border: 225 10% 88%;
+  }
+
+  .dark {
+    color-scheme: dark;
+
+    --background: 240 3% 8%;
+    --foreground: 0 0% 100%;
+    --card: 240 4% 10%;
+    --card-foreground: 0 0% 100%;
+    --popover: 240 6% 12%;
+    --popover-foreground: 0 0% 100%;
+    --primary: 323.89 93.39% 47.45%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 240 7% 17%;
+    --secondary-foreground: 240 8.94% 75.88%;
+    --muted: 225 6% 19%;
+    --muted-foreground: 240 2% 75%;
+    --accent: 323.83 100% 58.04%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 3 93% 63%;
+    --success: 136.51 100% 78.63%;
+    --success-foreground: 0 0% 0%;
+    --success-hover: 136.58 100% 85.1%;
+    --destructive-foreground: 0 0% 100%;
+    --warning: 44 100% 69%;
+    --liquidation: 274 67% 58%;
+    --input: 225 6% 19%;
+    --ring: 330 100% 59%;
+    --gray-10: 225 5.26% 14.9%;
+    --gray-20: 217.5 8.16% 19.22%;
+    --gray-30: 220 7.56% 23.33%;
+    --gray-40: 220 6.47% 27.25%;
+    --gray-50: 223.64 6.83% 31.57%;
+    --gray-60: 220 6.59% 35.69%;
+    --gray-70: 223.64 5.42% 39.8%;
+    --gray-80: 221.54 5.83% 43.73%;
+    --gray-90: 222.86 5.74% 47.84%;
+    --gray-100: 220 6.12% 51.96%;
+    --gray-110: 228 6.76% 70.98%;
+    --text-secondary: 240 2% 75%;
+    --dropdown-dark-button: 225 6% 19%;
+    --white: 0 0% 100%;
+    --white-foreground: 240 2.56% 7.65%;
+    --black: 0 0% 0%;
+    --border: 0 0% 100% / 0.05;
+  }
+}
+
+@layer base {
+  body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    font-family:
+      "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+      sans-serif;
+    font-size: 1rem;
+    line-height: 1.1875rem;
+    /* Fallback colors for browsers without CSS variable support */
+    background-color: #f8f9fa;
+    background-color: hsl(var(--background));
+    color: #1f1f23;
+    color: hsl(var(--foreground));
+    border-color: #dfe2e6;
+    border-color: hsl(var(--border));
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: transparent;
+    font-feature-settings:
+      "ss01" on,
+      "ss02" on,
+      "cv01" on,
+      "cv03" on;
+  }
+
+  /* Dark theme body styles with fallback */
+  .dark body,
+  html.dark body {
+    background-color: #141416;
+    background-color: hsl(var(--background));
+    color: #ffffff;
+    color: hsl(var(--foreground));
+  }
+
+  /* Prevent layout shift for fixed elements when modals/dialogs lock scroll */
+  body[data-scroll-locked] [class~="fixed"] {
+    padding-right: var(--removed-body-scroll-bar-size, 0px);
+  }
+
+  /* Prevent Select/Combobox from blocking page scroll */
+  body[data-scroll-locked="1"] {
+    overflow: auto !important;
+    margin-right: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  html.dark {
+    color-scheme: dark;
+  }
+
+  *:not(.navbar-scrollbar)::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    border-radius: 8px;
+  }
+
+  *:not(.navbar-scrollbar)::-webkit-scrollbar-thumb {
+    background: hsl(var(--gray-90));
+    border-radius: 8px;
+  }
+
+  *:not(.navbar-scrollbar)::-webkit-scrollbar-track {
+    background: hsl(var(--gray-20));
+  }
+}
+
+.navbar-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.navbar-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .navbar-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--muted-foreground) / 0.2) transparent;
+  }
+
+  .navbar-scrollbar::-webkit-scrollbar {
+    display: block;
+    width: 2px;
+    height: 2px;
+  }
+
+  .navbar-scrollbar::-webkit-scrollbar-thumb {
+    background: hsl(var(--muted-foreground) / 0.2);
+    border-radius: 1px;
+  }
+
+  .navbar-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--muted-foreground) / 0.35);
+  }
+
+  .navbar-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+    margin: 2px;
+  }
+}
+
+/* Table responsive grid with CSS variables */
+.table-sm-grid {
+  grid-template-columns: repeat(var(--grid-cols-xs, 1), minmax(0, 1fr));
+}
+
+@media (min-width: 640px) {
+  .table-sm-grid {
+    grid-template-columns: repeat(var(--grid-cols-sm, var(--grid-cols-xs, 1)),
+        minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 768px) {
+  .table-sm-grid {
+    grid-template-columns: repeat(var(--grid-cols-md, var(--grid-cols-sm, var(--grid-cols-xs, 1))),
+        minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .table-sm-grid {
+    grid-template-columns: repeat(var(--grid-cols-lg,
+          var(--grid-cols-md, var(--grid-cols-sm, var(--grid-cols-xs, 1)))),
+        minmax(0, 1fr));
+  }
+}
+
+/* React-Slick Carousel Styles - Override Tailwind Preflight */
+.slick-slider {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  user-select: none;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}
+
+.slick-track {
+  position: relative;
+  display: flex !important;
+  align-items: flex-start;
+  margin-left: 0;
+}
+
+.slick-slide {
+  float: none;
+  min-height: 1px;
+}
+
+.slick-slide>div {
+  width: 100%;
+}
+
+/* Slick Dots - Override Tailwind list resets */
+.slick-dots {
+  position: relative;
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  margin: 20px 0 0 0;
+  padding: 0;
+  list-style: none;
+  bottom: 0;
+}
+
+.slick-dots li {
+  position: relative;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  width: 8px;
+  height: 8px;
+  list-style: none;
+}
+
+.slick-dots li button {
+  display: block;
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 50%;
+  background: hsl(var(--muted-foreground));
+  font-size: 0;
+  line-height: 0;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.slick-dots li button:hover {
+  background: hsl(var(--muted-foreground) / 0.8);
+}
+
+.slick-dots li button::before {
+  display: none;
+}
+
+.slick-dots li.slick-active button {
+  background: hsl(var(--white));
+}
+
+/* Slick Arrows */
+.slick-arrow {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: hsl(var(--foreground));
+  font-size: 0;
+  line-height: 0;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.slick-arrow:hover {
+  color: hsl(var(--muted-foreground));
+}
+
+.slick-prev {
+  top: -25px;
+  right: 32px;
+  left: auto;
+}
+
+.slick-next {
+  top: -25px;
+  right: 0;
+}
+
+.slick-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Liquidation Graph Styles */
+.liquidation-graph-container .rct-xy-plot {
+  .rct-chart-background {
+    fill: transparent;
+  }
+
+  .rct-chart-inner {
+    .rct-plot-background {
+      fill: transparent;
+    }
+
+    /* Crosshair lines */
+    .rct-chart-line-x.rct-crosshair-x,
+    .rct-chart-line-y.rct-crosshair-y {
+      stroke: black;
+      stroke-dasharray: 1px, 1px;
+    }
+
+    /* Axis text styling */
+    &>g:not([class])>text {
+      font-family: inherit;
+      font-size: 12px;
+      line-height: 14px;
+      font-weight: 400;
+      font-style: normal;
+      fill: hsl(var(--muted-foreground));
+      user-select: none;
+    }
+
+    .rct-chart-axis.rct-chart-axis-y,
+    .rct-chart-axis.rct-chart-axis-x {
+      cursor: pointer;
+    }
+
+    .rct-chart-axis.rct-chart-axis-y .rct-chart-value-labels-y text,
+    .rct-chart-axis.rct-chart-axis-x .rct-chart-value-labels-x text {
+      font-family: inherit;
+      font-size: 12px;
+      line-height: 14px;
+      font-weight: 400;
+      font-style: normal;
+      fill: hsl(var(--muted-foreground));
+      user-select: none;
+    }
+
+    .rct-chart-axis.rct-chart-axis-y>g:not([class])>text,
+    .rct-chart-axis.rct-chart-axis-x>g:not([class])>text {
+      font-family: inherit;
+      font-size: 12px;
+      line-height: 14px;
+      font-weight: 400;
+      font-style: normal;
+      fill: hsl(var(--muted-foreground));
+      user-select: none;
+    }
+
+    .rct-chart-grid-x .rct-chart-line-x.rct-chart-grid-line:first-of-type,
+    .rct-chart-grid-y .rct-chart-line-y.rct-chart-grid-line:first-of-type {
+      stroke-width: 2px;
+      stroke: hsl(var(--border));
+    }
+
+    .rct-chart-axis.rct-chart-axis-y .rct-chart-ticks-y line,
+    .rct-chart-axis.rct-chart-axis-x .rct-chart-ticks-x line {
+      stroke-width: 2px;
+      stroke: hsl(var(--border));
+    }
+
+    /* Heatmap cell colors */
+    .rct-chart__heatmap-cell--current {
+      fill: white !important;
+      stroke: black;
+      stroke-width: 0.1px;
+    }
+
+    .rct-chart__heatmap-cell--liquidation {
+      fill: rgb(244, 67, 54) !important;
+      stroke: black;
+      stroke-width: 0.1px;
+    }
+
+    .rct-chart__heatmap-cell--bad {
+      fill: rgb(255, 152, 0) !important;
+      stroke: black;
+      stroke-width: 0.1px;
+    }
+
+    .rct-chart__heatmap-cell--ok {
+      fill: rgb(255, 193, 7) !important;
+      stroke: black;
+      stroke-width: 0.1px;
+    }
+
+    .rct-chart__heatmap-cell--good {
+      fill: rgb(67, 160, 71) !important;
+      stroke: black;
+      stroke-width: 0.1px;
+    }
+
+    .rct-chart__heatmap-cell--hovered {
+      opacity: 0.6;
+    }
+  }
+}

package/src/styles/theme.css

@@ -1,7 +1,14 @@
-/*
+/**
  * Tailwind v4 theme configuration
- * Import this file in consuming projects to get @theme definitions
- * for generating utility classes (bg-black, text-primary, etc.)
+ *
+ * This file contains ONLY the @theme block for generating Tailwind utility classes
+ * (bg-background, text-primary, border-gray-50, etc.)
+ *
+ * Requires CSS variables from base.css to be loaded first.
+ *
+ * Usage:
+ * - For full setup: import globals.css (includes everything)
+ * - For modular setup: import base.css before this file
  */
 @theme {
   /* Delayed fade-in animation for loading states */
@@ -34,6 +41,8 @@
   --color-destructive: hsl(var(--destructive));
   --color-destructive-foreground: hsl(var(--destructive-foreground));
   --color-success: hsl(var(--success));
+  --color-success-foreground: hsl(var(--success-foreground));
+  --color-success-hover: hsl(var(--success-hover));
   --color-warning: hsl(var(--warning));
   --color-liquidation: hsl(var(--liquidation));
   --color-border: hsl(var(--border));
@@ -42,6 +51,7 @@
   --color-text-secondary: hsl(var(--text-secondary));
   --color-dropdown-dark-button: hsl(var(--dropdown-dark-button));
   --color-white: hsl(var(--white));
+  --color-white-foreground: hsl(var(--white-foreground));
   --color-black: hsl(var(--black));
   --color-gray-10: hsl(var(--gray-10));
   --color-gray-20: hsl(var(--gray-20));
@@ -55,6 +65,11 @@
   --color-gray-100: hsl(var(--gray-100));
   --color-gray-110: hsl(var(--gray-110));
 
+  /* Additional semantic colors (aliases) */
+  --color-additional-success: hsl(var(--success));
+  --color-additional-warning: hsl(var(--warning));
+  --color-additional-alert: hsl(var(--destructive));
+
   --radius-lg: var(--radius);
   --radius-md: calc(var(--radius) - 2px);
   --radius-sm: calc(var(--radius) - 4px);