@gearbox-protocol/ui-kit 3.14.0-next.31 → 3.14.0-next.33

package/dist/types/components/graph/graph.d.ts

@@ -1,4 +1,4 @@
-import { ChartOptions, DeepPartial, Time } from 'lightweight-charts';
+import { ChartOptions, DeepPartial, LineWidth, Time, LineStyle } from 'lightweight-charts';
 import { Point, YMeasureUnits } from './formatters';
 import { GraphTooltipProps } from './graph-tooltip';
 import * as React from "react";
@@ -24,6 +24,50 @@ export type VerticalLineOptions = Partial<{
     labelTextColor: string;
     showLabel: boolean;
 }>;
+/**
+ * Horizontal reference line drawn at a fixed Y (price) value, e.g. a
+ * liquidation price level. Rendered as a native lightweight-charts price line
+ * attached to a series, so it tracks the series' price scale and does not
+ * affect autoscale or tooltips.
+ */
+export interface PriceLineConfig {
+    /** Y value (price) where the horizontal line is drawn. */
+    price: number;
+    /**
+     * Label of the series to attach the line to. When omitted, the line is
+     * attached to the first series that has data (its price scale is used).
+     */
+    seriesLabel?: string;
+    /** Line color. Defaults to the destructive theme color. */
+    color?: string;
+    /** Text shown next to the line on the price axis. */
+    title?: string;
+    /** Line thickness (1–4). Default 1. */
+    lineWidth?: LineWidth;
+    /** Line dash style. Default dashed. */
+    lineStyle?: LineStyle;
+    /** Whether to render the value label on the price axis. Default true. */
+    axisLabelVisible?: boolean;
+}
+/**
+ * Shaded horizontal band drawn between two Y (price) values across the full
+ * width of the chart — e.g. a liquidation "danger zone" below a health-factor
+ * threshold. Rendered behind the series as a lightweight-charts primitive, so
+ * it tracks the series' price scale and does not affect tooltips.
+ */
+export interface PriceZoneConfig {
+    /** Upper price bound. Omit to extend the band to the top of the pane. */
+    priceTop?: number;
+    /** Lower price bound. Omit to extend the band to the bottom of the pane. */
+    priceBottom?: number;
+    /** Fill color — use a translucent value. Defaults to a translucent destructive tint. */
+    color?: string;
+    /**
+     * Label of the series whose price scale the band is drawn against. When
+     * omitted, the first series with data is used.
+     */
+    seriesLabel?: string;
+}
 /**
  * Returns formatted label and value strings for a vertical line tooltip.
  * Used by Graph and by tests.
@@ -70,6 +114,17 @@ export interface GraphProps {
         xCoordinate: Time;
         options?: VerticalLineOptions;
     }>;
+    /**
+     * Horizontal reference lines drawn at fixed Y (price) values, e.g. a
+     * liquidation price level. Each line is attached to a series' price scale.
+     */
+    priceLineOptions?: Array<PriceLineConfig>;
+    /**
+     * Shaded horizontal bands (e.g. a liquidation danger zone) drawn behind the
+     * series. Each zone is attached to a series' price scale; finite bounds are
+     * included in the Y autoscale so the band stays visible.
+     */
+    zoneOptions?: Array<PriceZoneConfig>;
     /**
      * Number of decimal places for current value display.
      * If 0, rounds to whole numbers. Default is 4.
@@ -121,4 +176,4 @@ export interface GraphProps {
  * with support for area series, custom tooltips, and vertical line annotations
  * Supports single or multiple series with different colors and legends
  */
-export declare function Graph({ series, className, showLegend, onUnselectSeries, xMeasureUnit, yMeasureUnit, optionsOverrides, verticalLineOptions, currentValueDecimals, useSharedPriceScale, showCurrentValue, graphTitle, yScaleMin, yScaleMinMultiple, visibleTimeFrom, disableZoom, }: GraphProps): React.ReactElement;
+export declare function Graph({ series, className, showLegend, onUnselectSeries, xMeasureUnit, yMeasureUnit, optionsOverrides, verticalLineOptions, priceLineOptions, zoneOptions, currentValueDecimals, useSharedPriceScale, showCurrentValue, graphTitle, yScaleMin, yScaleMinMultiple, visibleTimeFrom, disableZoom, }: GraphProps): React.ReactElement;

package/dist/types/components/graph/index.d.ts

@@ -1,6 +1,6 @@
 export * from './default-config';
 export { getXFormatter, getXFormatters, getYFormatter, type Point as GraphPoint, type XFormatters, type XMeasureUnits, type YMeasureUnits, } from './formatters';
-export { DEFAULT_SERIES_COLORS, Graph, type GraphProps, getSeriesColorPalette, getVerticalLineTooltipContent, type SeriesColorPalette, type SeriesConfig, type VerticalLineOptions, } from './graph';
+export { DEFAULT_SERIES_COLORS, Graph, type GraphProps, getSeriesColorPalette, getVerticalLineTooltipContent, type PriceLineConfig, type PriceZoneConfig, type SeriesColorPalette, type SeriesConfig, type VerticalLineOptions, } from './graph';
 export * from './graph-current-value';
 export * from './graph-tooltip';
 export * from './graph-view';

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

@@ -41,6 +41,24 @@ export interface MainAsideLayoutProps extends React.HTMLAttributes<HTMLDivElemen
      * separately.
      */
     centeredMain?: boolean;
+    /**
+     * Whether the detail-variant aside manages its own sticky / scroll behavior.
+     *
+     * - `true` (default) — ui-kit owns the aside positioning: built-in sticky
+     *   (`top-4`) below `2450px`, `fixed` (`top-28`) at `≥2450px`, plus an
+     *   internal `overflow-y-auto` / `max-h-[100vh]` scroll area.
+     * - `false` — the aside stays in normal document flow at all widths (no
+     *   `fixed`, no internal scroll container), so the page keeps a single
+     *   scrollbar and the consumer can run its own sticky controller. The detail
+     *   centring wrapper + `max-width` cap are preserved. At `≥2450px` the row
+     *   stays a flex row but centres the main column on the viewport
+     *   (`justify-center`, main `80rem`) while the in-flow aside is pulled into
+     *   the gutter via a negative margin — so the content reads centred with the
+     *   form beside it, and the consumer's controller keeps managing stickiness.
+     *
+     * Only meaningful with `variant="detail"` and without `centeredMain`.
+     */
+    stickyAside?: boolean;
 }
 /**
  * MainAsideLayout — main column + optional sidebar in one row.

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

@@ -64,6 +64,7 @@ export declare const preset: {
                 "success-hover": string;
                 warning: string;
                 liquidation: string;
+                "liquidation-line": string;
                 border: string;
                 input: string;
                 ring: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "3.14.0-next.31",
+  "version": "3.14.0-next.33",
   "description": "Internal UI components",
   "repository": {
     "type": "git",

package/src/styles/base.css

@@ -72,6 +72,7 @@ html.dark {
     --success-hover: 136.58 100% 85.1%;
     --warning: 38 95% 45%;
     --liquidation: 274 67% 48%;
+    --liquidation-line: 38 92% 50%;
     --input: 225 10% 88%;
     --ring: 330 100% 50%;
     --radius: 0.75rem;
@@ -119,6 +120,7 @@ html.dark {
     --destructive-foreground: 0 0% 100%;
     --warning: 43.12 100% 68.63%;
     --liquidation: 277.22 74.53% 58.43%;
+    --liquidation-line: 38 92% 50%;
     --input: 225 6% 19%;
     --ring: 330 100% 59%;
     --gray-10: 225 5.26% 14.9%;

package/src/styles/theme.css

@@ -49,6 +49,7 @@
   --color-success-hover: hsl(var(--success-hover));
   --color-warning: hsl(var(--warning));
   --color-liquidation: hsl(var(--liquidation));
+  --color-liquidation-line: hsl(var(--liquidation-line));
   --color-border: hsl(var(--border));
   --color-input: hsl(var(--input));
   --color-ring: hsl(var(--ring));