@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

package/dist/globals.css

@@ -1,88 +1,266 @@
-/** biome-ignore-all lint/suspicious/noUnknownAtRules: <> */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  @apply dark;
-}
+@import "tailwindcss";
+@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap");
+@import "./grid-safelist.css";
 
 @layer base {
   :root {
+    color-scheme: light dark;
+
     --background: 0 0% 100%;
     --foreground: 0 0% 3.9%;
-
     --card: 0 0% 100%;
     --card-foreground: 0 0% 3.9%;
-
     --popover: 0 0% 100%;
     --popover-foreground: 0 0% 3.9%;
-
-    --primary: 0 0% 9%;
+    --primary: 330 98% 48%;
     --primary-foreground: 0 0% 98%;
-
     --secondary: 0 0% 96.1%;
     --secondary-foreground: 0 0% 9%;
-
-    --muted: 0 0% 96.1%;
+    --muted: 0 0% 89.8%;
     --muted-foreground: 0 0% 45.1%;
-
-    --accent: 0 0% 96.1%;
+    --accent: 330 100% 59%;
     --accent-foreground: 0 0% 9%;
-
-    --destructive: 0 84.2% 60.2%;
+    --destructive: 0 100% 65%;
     --destructive-foreground: 0 0% 98%;
-
-    --border: 0 0% 89.8%;
+    --success: 143 100% 78%;
+    --warning: 44 100% 69%;
     --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-
-    --radius: 0.5rem;
+    --ring: 330 98% 48%;
+    --radius: 0.75rem;
+    --text-secondary: 0 0% 60%;
+    --dropdown-dark-button: 0 0% 20%;
+    --white: 0 0% 100%;
+    --black: 0 0% 0%;
+    --border: 0 0% 89.8%;
   }
 
   .dark {
-    --background: 0 0% 0%;
-    --foreground: 0 0% 98%;
+    color-scheme: dark;
 
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
+    --background: 240 7% 7.5%;
+    --foreground: 0 0% 100%;
+    --card: 240 7% 10%;
+    --card-foreground: 0 0% 100%;
+    --popover: 240 6% 12%;
+    --popover-foreground: 0 0% 100%;
+    --primary: 330 98% 48%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 240 7% 17%;
+    --secondary-foreground: 0 0% 100%;
+    --muted: 225 6% 19%;
+    --muted-foreground: 240 2% 75%;
+    --accent: 330 100% 59%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 100% 65%;
+    --destructive-foreground: 0 0% 100%;
+    --success: 143 100% 78%;
+    --warning: 44 100% 69%;
+    --liquidation: 274 67% 58%;
+    --input: 225 6% 19%;
+    --ring: 330 100% 59%;
+    --gray-10: 240 7% 17%;
+    --gray-20: 225 6% 19%;
+    --gray-30: 225 7% 22%;
+    --gray-40: 225 8% 26%;
+    --gray-50: 225 8% 30%;
+    --gray-60: 225 8% 34%;
+    --gray-70: 225 7% 38%;
+    --gray-80: 225 6% 42%;
+    --gray-90: 225 6% 47%;
+    --gray-100: 225 7% 51%;
+    --gray-110: 225 8% 70%;
+    --text-secondary: 240 2% 75%;
+    --dropdown-dark-button: 225 6% 19%;
+    --white: 0 0% 100%;
+    --black: 0 0% 0%;
+    --border: 225 7% 22%;
+  }
+}
 
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
 
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
+  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;
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    -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;
+  }
 
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
+  html.dark {
+    color-scheme: dark;
+  }
 
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
+  /* Custom scrollbar styles */
+  *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    border-radius: 8px;
+  }
 
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
+  *::-webkit-scrollbar-thumb {
+    background: hsl(var(--gray-90));
+    border-radius: 8px;
+  }
 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
+  *::-webkit-scrollbar-track {
+    background: hsl(var(--gray-20));
+  }
+}
+
+/* Table responsive grid with CSS variables */
+.table-sm-grid {
+  grid-template-columns: repeat(var(--grid-cols-xs, 1), minmax(0, 1fr));
+}
 
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
+@media (min-width: 640px) {
+  .table-sm-grid {
+    grid-template-columns: repeat(
+        var(--grid-cols-sm, var(--grid-cols-xs, 1)),
+        minmax(0, 1fr)
+      );
   }
 }
 
-@layer base {
-  * {
-    @apply border-border;
+@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)
+      );
   }
-  body {
-    @apply bg-background text-foreground;
+}
+
+@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)
+      );
   }
 }
 
-/* Add these styles to fix white background under scroll */
-@layer base {
-  html.dark {
-    color-scheme: dark;
+/* 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/dist/grid-safelist.css

@@ -0,0 +1,264 @@
+/**
+ * Grid and Col Component Safelist for Tailwind CSS 4
+ *
+ * In Tailwind 4, dynamically generated classes need to be explicitly listed
+ * for JIT compilation. This file ensures all Grid/Col utility classes are available.
+ *
+ * These classes are used by the Grid and Col layout components.
+ */
+
+/* Grid column spans - used by Col component */
+.col-span-1,
+.col-span-2,
+.col-span-3,
+.col-span-4,
+.col-span-5,
+.col-span-6,
+.col-span-7,
+.col-span-8,
+.col-span-9,
+.col-span-10,
+.col-span-11,
+.col-span-12,
+.col-span-full,
+.col-auto {
+  /* Tailwind will generate these */
+}
+
+/* Responsive column spans */
+.sm\:col-span-1,
+.sm\:col-span-2,
+.sm\:col-span-3,
+.sm\:col-span-4,
+.sm\:col-span-5,
+.sm\:col-span-6,
+.sm\:col-span-7,
+.sm\:col-span-8,
+.sm\:col-span-9,
+.sm\:col-span-10,
+.sm\:col-span-11,
+.sm\:col-span-12,
+.sm\:col-span-full,
+.sm\:col-auto {
+  /* Tailwind will generate these */
+}
+
+.md\:col-span-1,
+.md\:col-span-2,
+.md\:col-span-3,
+.md\:col-span-4,
+.md\:col-span-5,
+.md\:col-span-6,
+.md\:col-span-7,
+.md\:col-span-8,
+.md\:col-span-9,
+.md\:col-span-10,
+.md\:col-span-11,
+.md\:col-span-12,
+.md\:col-span-full,
+.md\:col-auto {
+  /* Tailwind will generate these */
+}
+
+.lg\:col-span-1,
+.lg\:col-span-2,
+.lg\:col-span-3,
+.lg\:col-span-4,
+.lg\:col-span-5,
+.lg\:col-span-6,
+.lg\:col-span-7,
+.lg\:col-span-8,
+.lg\:col-span-9,
+.lg\:col-span-10,
+.lg\:col-span-11,
+.lg\:col-span-12,
+.lg\:col-span-full,
+.lg\:col-auto {
+  /* Tailwind will generate these */
+}
+
+.xl\:col-span-1,
+.xl\:col-span-2,
+.xl\:col-span-3,
+.xl\:col-span-4,
+.xl\:col-span-5,
+.xl\:col-span-6,
+.xl\:col-span-7,
+.xl\:col-span-8,
+.xl\:col-span-9,
+.xl\:col-span-10,
+.xl\:col-span-11,
+.xl\:col-span-12,
+.xl\:col-span-full,
+.xl\:col-auto {
+  /* Tailwind will generate these */
+}
+
+/* Grid columns - used by Grid component */
+.grid-cols-1,
+.grid-cols-2,
+.grid-cols-3,
+.grid-cols-4,
+.grid-cols-5,
+.grid-cols-6,
+.grid-cols-7,
+.grid-cols-8,
+.grid-cols-9,
+.grid-cols-10,
+.grid-cols-11,
+.grid-cols-12 {
+  /* Tailwind will generate these */
+}
+
+/* Responsive grid columns */
+.sm\:grid-cols-1,
+.sm\:grid-cols-2,
+.sm\:grid-cols-3,
+.sm\:grid-cols-4,
+.sm\:grid-cols-5,
+.sm\:grid-cols-6,
+.sm\:grid-cols-7,
+.sm\:grid-cols-8,
+.sm\:grid-cols-9,
+.sm\:grid-cols-10,
+.sm\:grid-cols-11,
+.sm\:grid-cols-12 {
+  /* Tailwind will generate these */
+}
+
+.md\:grid-cols-1,
+.md\:grid-cols-2,
+.md\:grid-cols-3,
+.md\:grid-cols-4,
+.md\:grid-cols-5,
+.md\:grid-cols-6,
+.md\:grid-cols-7,
+.md\:grid-cols-8,
+.md\:grid-cols-9,
+.md\:grid-cols-10,
+.md\:grid-cols-11,
+.md\:grid-cols-12 {
+  /* Tailwind will generate these */
+}
+
+.lg\:grid-cols-1,
+.lg\:grid-cols-2,
+.lg\:grid-cols-3,
+.lg\:grid-cols-4,
+.lg\:grid-cols-5,
+.lg\:grid-cols-6,
+.lg\:grid-cols-7,
+.lg\:grid-cols-8,
+.lg\:grid-cols-9,
+.lg\:grid-cols-10,
+.lg\:grid-cols-11,
+.lg\:grid-cols-12 {
+  /* Tailwind will generate these */
+}
+
+.xl\:grid-cols-1,
+.xl\:grid-cols-2,
+.xl\:grid-cols-3,
+.xl\:grid-cols-4,
+.xl\:grid-cols-5,
+.xl\:grid-cols-6,
+.xl\:grid-cols-7,
+.xl\:grid-cols-8,
+.xl\:grid-cols-9,
+.xl\:grid-cols-10,
+.xl\:grid-cols-11,
+.xl\:grid-cols-12 {
+  /* Tailwind will generate these */
+}
+
+/* Gap utilities - used by Grid component */
+.gap-0,
+.gap-1,
+.gap-2,
+.gap-3,
+.gap-4,
+.gap-5,
+.gap-6,
+.gap-7,
+.gap-8,
+.gap-9,
+.gap-10,
+.gap-12,
+.gap-16,
+.gap-20,
+.gap-24 {
+  /* Tailwind will generate these */
+}
+
+.gap-x-0,
+.gap-x-1,
+.gap-x-2,
+.gap-x-3,
+.gap-x-4,
+.gap-x-5,
+.gap-x-6,
+.gap-x-7,
+.gap-x-8,
+.gap-x-9,
+.gap-x-10,
+.gap-x-12,
+.gap-x-16,
+.gap-x-20,
+.gap-x-24 {
+  /* Tailwind will generate these */
+}
+
+.gap-y-0,
+.gap-y-1,
+.gap-y-2,
+.gap-y-3,
+.gap-y-4,
+.gap-y-5,
+.gap-y-6,
+.gap-y-7,
+.gap-y-8,
+.gap-y-9,
+.gap-y-10,
+.gap-y-12,
+.gap-y-16,
+.gap-y-20,
+.gap-y-24 {
+  /* Tailwind will generate these */
+}
+
+/* Column start positions - used by Col component */
+.col-start-1,
+.col-start-2,
+.col-start-3,
+.col-start-4,
+.col-start-5,
+.col-start-6,
+.col-start-7,
+.col-start-8,
+.col-start-9,
+.col-start-10,
+.col-start-11,
+.col-start-12,
+.col-start-13,
+.col-start-auto {
+  /* Tailwind will generate these */
+}
+
+/* Order utilities - used by Col component */
+.order-1,
+.order-2,
+.order-3,
+.order-4,
+.order-5,
+.order-6,
+.order-7,
+.order-8,
+.order-9,
+.order-10,
+.order-11,
+.order-12,
+.order-first,
+.order-last,
+.order-none {
+  /* Tailwind will generate these */
+}

package/dist/types/components/asset-line.d.ts

@@ -0,0 +1,59 @@
+import type { NetworkType, TokenData } from "@gearbox-protocol/sdk";
+import * as React from "react";
+type Sizes = "default" | "sm" | "md" | "lg";
+/**
+ * AssetLineBaseProps — base props for AssetLine component.
+ */
+export interface AssetLineBaseProps {
+    symbolMaxLength?: number;
+    descriptionMaxLength?: number;
+    size?: Sizes;
+    iconSize?: Sizes;
+    gapSize?: Sizes;
+    hideValue?: boolean;
+}
+/**
+ * AssetLineProps — props for AssetLine component.
+ */
+export interface AssetLineProps extends AssetLineBaseProps {
+    token: TokenData | undefined;
+    tokenLabel?: string;
+    tokenDescription?: React.ReactNode;
+    chainId?: number;
+    network?: NetworkType;
+    value: React.ReactNode;
+    valueDescription?: React.ReactNode;
+    last: boolean;
+    onSelect?: () => void;
+    className?: string;
+}
+/**
+ * AssetLine — component for displaying asset information in a table row format.
+ *
+ * @usage
+ * Use AssetLine to display asset data in tables:
+ * token lists, asset rows, portfolio tables, asset selection lists.
+ *
+ * Props:
+ * - `token` — token data object (TokenData).
+ * - `tokenLabel` — custom label for token (overrides token.title).
+ * - `tokenDescription` — additional description displayed below token symbol.
+ * - `chainId` — chain ID for token network.
+ * - `network` — network type for token.
+ * - `value` — value to display in right column (required).
+ * - `valueDescription` — additional description displayed below value.
+ * - `last` — if true, removes bottom border (required).
+ * - `onSelect` — callback function for row selection (makes row clickable).
+ * - `size` — row size: "default", "sm", "md", "lg" (defaults to "default").
+ * - `iconSize` — icon size override (defaults to size).
+ * - `gapSize` — gap size between elements (defaults to size).
+ * - `symbolMaxLength` — max length for symbol truncation.
+ * - `descriptionMaxLength` — max length for description truncation.
+ * - `hideValue` — if true, hides the value column (defaults to false).
+ * - `className` — additional CSS classes for styling.
+ *
+ * Note: Uses GridTableRow and GridTableCell internally. Displays token icon, symbol, and value in a two-column layout.
+ * When onSelect is provided, row becomes clickable with cursor pointer.
+ */
+export declare const AssetLine: React.ForwardRefExoticComponent<AssetLineProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/components/assets-list-cell.d.ts

@@ -0,0 +1,48 @@
+import type { Address } from "viem";
+export interface AssetsListCellProps {
+    /**
+     * The asset address
+     */
+    assetAddress: Address;
+    /**
+     * The asset symbol
+     */
+    symbol: string;
+    /**
+     * Optional comment/description to display next to the symbol
+     */
+    comment?: string;
+    /**
+     * Optional explorer URL for the asset
+     */
+    explorerUrl?: string;
+    /**
+     * Icon symbol to use if it doesn't match the asset symbol
+     * e.g., pool tokens don't have their own symbol and use underlying symbol
+     */
+    iconSymbol?: string;
+    /**
+     * Size of the token icon
+     * @default 24
+     */
+    iconSize?: number;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * AssetsListCell component for displaying asset information in list views
+ * Similar to TableCellAsset but without table cell wrapper, suitable for list/grid layouts
+ *
+ * @example
+ * ```tsx
+ * <AssetsListCell
+ *   assetAddress="0x1234..."
+ *   symbol="ETH"
+ *   comment="Ethereum"
+ *   explorerUrl="https://etherscan.io"
+ * />
+ * ```
+ */
+export declare function AssetsListCell({ assetAddress, symbol, iconSymbol, comment, explorerUrl, iconSize, className, }: AssetsListCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/assets-ratio.d.ts

@@ -0,0 +1,9 @@
+import type { Asset } from "@gearbox-protocol/sdk";
+import * as React from "react";
+export interface AssetsRatioProps {
+    assets: Array<Asset & {
+        balanceInUSD: bigint;
+    }>;
+    className?: string;
+}
+export declare function AssetsRatio({ assets, className, }: AssetsRatioProps): React.ReactElement;

package/dist/types/components/auth/signin-required.d.ts

@@ -31,4 +31,4 @@ export interface SignInRequiredProps extends TabButtonProps {
     children: ReactNode;
     skipSignIn?: boolean;
 }
-export declare function SignInRequired({ children, owner, skipSignIn, ...customProps }: SignInRequiredProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<import("react").AwaitedReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function SignInRequired({ children, owner, skipSignIn, ...customProps }: SignInRequiredProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;