@gearbox-protocol/ui-kit 3.14.0-next.1 → 3.14.0-next.10

package/dist/types/components/buttons/button/button.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const buttonVariants: (props?: ({
     variant?: "link" | "text" | "default" | "success" | "destructive" | "ghost" | "outline" | "secondary" | "white" | "neutral" | "pink" | "pink-outline" | "blue" | "blue-outline" | null | undefined;
-    size?: "default" | "icon" | "auto" | "xs" | "sm" | "lg" | null | undefined;
+    size?: "default" | "icon" | "auto" | "xs" | "sm" | "lg" | "md" | null | undefined;
     width?: "compact" | "wide" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
@@ -43,8 +43,9 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
  * Sizes (size):
  * - `auto` — automatic height without padding.
  * - `xs` — extra small (rounded-full, px-3, text-xs).
- * - `sm` — small (h-8, px-3, text-xs).
- * - `default` — standard (h-9, px-4, py-2).
+ * - `sm` — small (h-7, px-3, text-xs).
+ * - `md` — medium (h-8, px-3.5, text-sm).
+ * - `default` — standard (h-10, px-4).
  * - `lg` — large (h-10, px-8).
  * - `icon` — square button for icons (h-9 w-9).
  *

package/dist/types/components/help-tip/help-tip.d.ts

@@ -1,8 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const iconColorVariants: (props?: ({
-    iconColor?: "muted" | "foreground" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
-    iconHoverColor?: "muted" | "foreground" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
+    iconColor?: "muted" | "foreground" | "gray-50" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
+    iconHoverColor?: "muted" | "foreground" | "gray-50" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface HelpTipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "title"> {
     /** Tooltip popup content (what appears when hovering the icon). */

package/dist/types/components/layout/main-aside-layout/main-aside-layout.d.ts

@@ -28,6 +28,29 @@ export interface MainAsideLayoutProps extends React.HTMLAttributes<HTMLDivElemen
      *   - pass `asideClassName` to override or augment aside classes (e.g. z-index)
      */
     variant?: "default" | "detail";
+    /**
+     * Hybrid centring for the main column. Only meaningful with
+     * `variant="detail"`.
+     *
+     * - **`lg` … `1799px`** — behaves like the standard detail row: the aside is
+     *   in flow and the main column fills the remaining space (LP-style fill).
+     * - **`≥1800px`** — the wrapper becomes a viewport-centred, width-capped box
+     *   (`mx-auto`), the aside is parked out of flow in the gutter next to the
+     *   main column (`absolute right-full` / `left-full`), and the main column is
+     *   optically centred on the viewport. It still scales up to `80rem`.
+     *
+     * This avoids the very narrow centred column on mid-size desktops while still
+     * centring the content on wide screens.
+     *
+     * Assumes the layout is rendered inside the app shell padding
+     * (`px-4 sm:px-6 lg:px-8`) — the `≥1800px` gutter reserves `460px` aside +
+     * `1.5rem` gap + the `lg:px-8` (`2rem`) shell padding on each side.
+     *
+     * On screens below `lg` the layout falls back to the normal stacked column,
+     * so wrap usage in `hidden lg:block` if the mobile layout is handled
+     * separately.
+     */
+    centeredMain?: boolean;
 }
 /**
  * MainAsideLayout — main column + optional sidebar in one row.
@@ -54,5 +77,16 @@ export interface MainAsideLayoutProps extends React.HTMLAttributes<HTMLDivElemen
  * ```
  * This reproduces the `PoolDetailsScreen` two-column layout:
  * sticky aside below 2450 px viewport, fixed aside above it, correct max-widths.
+ *
+ * ### Detail variant — viewport-centred main (`centeredMain`)
+ * ```tsx
+ * <div className="hidden lg:block">
+ *   <MainAsideLayout variant="detail" asidePosition="left" centeredMain aside={<Panel />}>
+ *     <Content />
+ *   </MainAsideLayout>
+ * </div>
+ * ```
+ * Centres the main column on the viewport at all desktop widths while the aside
+ * sits in the gutter; the main column still scales up to `80rem`.
  */
 export declare const MainAsideLayout: React.ForwardRefExoticComponent<MainAsideLayoutProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/smart-number-input/smart-number-input.d.ts

@@ -1,6 +1,22 @@
 import { NetworkType } from '@gearbox-protocol/sdk';
 import { TokenFullData } from '../../types/common';
 import * as React from "react";
+export interface TokenOption {
+    /** Display label for this option. */
+    label: string;
+    /** Optional icon to display before the label. */
+    icon?: React.ReactNode;
+    /**
+     * Called when this option is selected (single-select) or toggled (multi-select).
+     * In multi-select mode the dropdown stays open; the parent manages checked state.
+     */
+    onSelect: () => void;
+    /**
+     * When true, the option is shown with a checkmark.
+     * Used only in multi-select mode (`multiSelectMode` prop on SmartNumberInput).
+     */
+    checked?: boolean;
+}
 /** A-matching SmartNumberInput size for layout (styles.tsx). */
 export type SmartNumberInputSize = "sm" | "md";
 export interface SmartNumberInputProps {
@@ -28,6 +44,18 @@ export interface SmartNumberInputProps {
     size?: SmartNumberInputSize;
     /** When true, currency dropdown is open (expand icon rotated). */
     active?: boolean;
+    /** Override max character length for token symbol display. When omitted, computed from viewport width. */
+    symbolMaxLength?: number;
+    /** Inline token options for dropdown selection (alternative to onShowSelectDialog). */
+    tokenOptions?: TokenOption[];
+    /**
+     * When true, the tokenOptions dropdown works as a multi-select:
+     * - The dropdown stays open after each click (doesn't auto-close).
+     * - Options marked `checked: true` show a checkmark.
+     * - The dropdown stays open until the user closes it (e.g. click outside).
+     * The parent is responsible for maintaining `checked` state on each option.
+     */
+    multiSelectMode?: boolean;
     /** Callback when amount changes. Called with (value: bigint, valueView: string). */
     onSetAmount?: (value: bigint, valueView: string) => void;
     /** Callback to show token select dialog. */
@@ -38,6 +66,30 @@ export interface SmartNumberInputProps {
     onFocus?: () => void;
     /** Blur callback. */
     onBlur?: () => void;
+    /**
+     * USD price per one whole token unit (e.g. 1800.5 for ETH at $1 800.50).
+     * When provided, the USD equivalent of the current amount is displayed below the input.
+     */
+    usdPrice?: number;
+    /**
+     * When provided, renders a Health Factor slider in the balance row
+     * (replacing the max amount / "Can borrow" indicator).
+     * Intended for debt inputs where the user wants to target a specific HF.
+     */
+    hfSlider?: HFSliderConfig;
+}
+/** Configuration for the inline Health Factor slider. */
+export interface HFSliderConfig {
+    /** Current target HF as a float (e.g. 1.5 for 150%). */
+    value: number;
+    /** Minimum HF value. @default 1.0 */
+    min?: number;
+    /** Maximum HF value. @default 3.0 */
+    max?: number;
+    /** Slider step. @default 0.01 */
+    step?: number;
+    /** Called when the slider value changes. */
+    onChange: (value: number) => void;
 }
 /**
  * SmartNumberInput — token amount input with balance display (matches interface).

package/dist/types/components/tip-card/tip-card.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const tipCardVariants: (props?: ({
-    backgroundColor?: "dark" | "transparent" | "light" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
+    backgroundColor?: "dark" | "transparent" | "light" | "gray-50" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray-100" | "gray-110" | null | undefined;
     textColor?: "unset" | "dark" | "light" | null | undefined;
     borderColor?: "none" | "dark" | "light" | "gradient" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/locale/en.json.d.ts

@@ -25,8 +25,10 @@ declare const _default: {
   "components.loading.wait": "Please wait...",
 
   "components.smartNumberInput.balance": "Balance",
+  "components.smartNumberInput.amountLabel": "Amount",
   "components.smartNumberInput.inputTitle": "Token Amount",
   "components.smartNumberInput.confirm.input": "Input",
+  "components.smartNumberInput.selectToken": "Select token",
 
   "components.tipWindow.title": "Tip",
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "3.14.0-next.1",
+  "version": "3.14.0-next.10",
   "description": "Internal UI components",
   "repository": "https://github.com/gearbox-protocol/ui-kit",
   "license": "MIT",