@gearbox-protocol/permissionless-ui 1.22.0-next.46 → 1.22.0-next.48

package/dist/esm/utils/format-money.js

@@ -5,11 +5,12 @@ import "clsx";
 import "tailwind-merge";
 import "sonner";
 import "react/jsx-runtime";
+import "luxon";
 const _ = 10000000000000000n;
 function F(t) {
   return BigInt(t.toFixed(18).replace(".", ""));
 }
-function R(t, r) {
+function y(t, r) {
   const n = typeof t == "number" && t < 0 || typeof t == "bigint" && t < 0n ? "-" : "", s = typeof t == "number" ? F(Math.abs(t)) : M.abs(t), u = s < _ && s > 0n, f = u ? "0.01" : $(s, A, r), o = `${n}$${f}`;
   return u ? `< ${o}` : o;
 }
@@ -18,10 +19,10 @@ function p(t, r, i = !0) {
   const n = typeof t == "number" ? t : Number(t);
   return Number.isNaN(n) || n === void 0 || n === null ? "0" : n === 0 ? 0 : i && n > O ? n.toExponential(r) : n.toFixed(r);
 }
-function y(t, r = 2) {
+function H(t, r = 2) {
   return `${p(t, r)}%`;
 }
-function H(t, r = 2) {
+function U(t, r = 2) {
   const i = Number(t) / Number(g);
   return `${p(i, r)}%`;
 }
@@ -33,7 +34,7 @@ const c = {
   minExponentialThreshold: 1e-4,
   maxExponentialThreshold: 1e6,
   locale: "en-US"
-}, U = ({
+}, V = ({
   amount: t,
   format: r = "full",
   maximumFractionDigits: i = c.maximumFractionDigits,
@@ -66,9 +67,9 @@ const c = {
 };
 export {
   c as DEFAULT_FORMAT_MONEY_CONSTANTS,
-  R as formatMoney,
-  U as formatMoneyAmount,
+  y as formatMoney,
+  V as formatMoneyAmount,
   p as formatPercentAmount,
-  y as percentTemplate,
-  H as percentageTemplate
+  H as percentTemplate,
+  U as percentageTemplate
 };

package/dist/esm/utils/index.js

@@ -4,11 +4,11 @@ import { bnToPrettyView as i } from "./bn-to-pretty-view.js";
 import { cn as f, cn as l } from "./cn.js";
 import { generateColorsFromBase as T, getCSSVariable as x, hexToRgba as c, resolveCSSColor as g } from "./colors.js";
 import { copyToClipboard as u } from "./copy.js";
-import { convertPercent as b, formatBytecodeSize as h, formatBytecodeVersion as N, formatTimestamp as A, shortenHash as I, significantTrunc as P } from "./format.js";
-import { formatAssetAmount as F } from "./format-asset-amount.js";
+import { convertPercent as b, formatBytecodeSize as h, formatBytecodeVersion as N, formatTimestamp as A, shortenHash as I, significantTrunc as y } from "./format.js";
+import { formatAssetAmount as L } from "./format-asset-amount.js";
 import { formatMoney as k, formatMoneyAmount as v, formatPercentAmount as w, percentTemplate as C, percentageTemplate as V } from "./format-money.js";
-import { FORMAT_CONSTANTS as D, formatNumberWithSuffix as z, formatPrice as M, getAdaptiveDecimals as O, isBelowDisplayThreshold as R, isEffectivelyZero as Z, toSignificantDigits as _ } from "./format-number.js";
-import { slippageTemplate as H } from "./format-slippage.js";
+import { FORMAT_CONSTANTS as D, formatNumberWithSuffix as z, formatPrice as H, getAdaptiveDecimals as M, isBelowDisplayThreshold as O, isEffectivelyZero as R, toSignificantDigits as Z } from "./format-number.js";
+import { slippageTemplate as E } from "./format-slippage.js";
 import { allLoaded as q, loadingProgress as X, round5 as j } from "./loading.js";
 import { getNetworkIcon as J } from "./network-icons.js";
 import { bnToLiquidationPriceView as Q, isPositiveFloat as U, parseInputToBN as Y, parseSmallNumber as $ } from "./parse-input-to-bn.js";
@@ -20,12 +20,12 @@ import { createTokenSearchFilter as se, searchInToken as Te } from "./search-in-
 import { shortSHA as ce } from "./short-sha.js";
 import { isLongString as Se, shortenString as ue } from "./shorten-string.js";
 import { negativeTokenTemplate as be, tokenTemplate as he, tokenTemplateNumber as Ne, tokenTemplateString as Ae } from "./templates.js";
-import { TTL_CONSTANTS as Pe, getTTLZone as ye, ttlFromTimestamp as Fe, ttlLeft as Le, ttlLeftParsed as ke } from "./ttl.js";
+import { TTL_CONSTANTS as ye, getTTLZones as Fe, ttlFromTimestamp as Le, ttlLeft as Pe, ttlLeftHuman as ke } from "./ttl.js";
 import { openInNewWindow as we } from "./window.js";
 import { Z_INDEX as Ve } from "./z-index.js";
 export {
   D as FORMAT_CONSTANTS,
-  Pe as TTL_CONSTANTS,
+  ye as TTL_CONSTANTS,
   Ve as Z_INDEX,
   q as allLoaded,
   m as bnToInputView,
@@ -37,25 +37,25 @@ export {
   se as createTokenSearchFilter,
   l as default,
   ne as extractTextFromLabel,
-  F as formatAssetAmount,
+  L as formatAssetAmount,
   h as formatBytecodeSize,
   N as formatBytecodeVersion,
   k as formatMoney,
   v as formatMoneyAmount,
   z as formatNumberWithSuffix,
   w as formatPercentAmount,
-  M as formatPrice,
+  H as formatPrice,
   A as formatTimestamp,
   T as generateColorsFromBase,
   r as generateId,
-  O as getAdaptiveDecimals,
+  M as getAdaptiveDecimals,
   ae as getAvailableRanges,
   x as getCSSVariable,
   J as getNetworkIcon,
-  ye as getTTLZone,
+  Fe as getTTLZones,
   c as hexToRgba,
-  R as isBelowDisplayThreshold,
-  Z as isEffectivelyZero,
+  O as isBelowDisplayThreshold,
+  R as isEffectivelyZero,
   Se as isLongString,
   U as isPositiveFloat,
   X as loadingProgress,
@@ -75,14 +75,14 @@ export {
   ce as shortSHA,
   I as shortenHash,
   ue as shortenString,
-  P as significantTrunc,
-  H as slippageTemplate,
-  _ as toSignificantDigits,
+  y as significantTrunc,
+  E as slippageTemplate,
+  Z as toSignificantDigits,
   he as tokenTemplate,
   Ne as tokenTemplateNumber,
   Ae as tokenTemplateString,
-  Fe as ttlFromTimestamp,
-  Le as ttlLeft,
-  ke as ttlLeftParsed,
+  Le as ttlFromTimestamp,
+  Pe as ttlLeft,
+  ke as ttlLeftHuman,
   t as useFormFieldIds
 };

package/dist/esm/utils/ttl.js

@@ -1,43 +1,42 @@
-function u(n) {
+import { Duration as a } from "luxon";
+const s = 1e3, f = 60 * s, u = 60 * f, i = 24 * u, c = 7 * i, m = 30 * i;
+function N(n) {
   if (!n) return;
-  const r = typeof n == "bigint" ? Number(n) : n;
-  return r >= 2592e6 ? "good" : r > 6048e5 ? "medium" : "bad";
+  const t = typeof n == "bigint" ? Number(n) : n;
+  return t >= m ? "good" : t > c ? "medium" : "bad";
 }
-function i(n) {
+function d(n) {
   if (!n) return "Expired";
-  const r = typeof n == "bigint" ? Number(n) : n;
-  if (r <= 0) return "Expired";
-  const t = Math.floor(r / 864e5), o = Math.floor(r % 864e5 / 36e5), e = Math.floor(r % 36e5 / 6e4);
-  return t > 0 ? o > 0 ? `${t}d ${o}h` : `${t}d` : o > 0 ? e > 0 ? `${o}h ${e}m` : `${o}h` : e > 0 ? `${e}m` : "< 1m";
+  const t = typeof n == "bigint" ? Number(n) : n;
+  if (t <= 0) return "Expired";
+  const o = Math.floor(t / i), r = Math.floor(t % i / u), e = Math.floor(t % u / f);
+  return o > 0 ? r > 0 ? `${o}d ${r}h` : `${o}d` : r > 0 ? e > 0 ? `${r}h ${e}m` : `${r}h` : e > 0 ? `${e}m` : "< 1m";
 }
-function f(n, r = Date.now()) {
+function b(n, t = Date.now()) {
   if (!n) return "Expired";
-  let t = typeof n == "bigint" ? Number(n) : n;
-  t < 1e12 && (t *= 1e3);
-  const o = t - r;
-  return i(o);
+  let o = typeof n == "bigint" ? Number(n) : n;
+  o < 1e12 && (o *= 1e3);
+  const r = o - t;
+  return d(r);
 }
-function s(n) {
-  if (!n) return;
-  const r = typeof n == "bigint" ? Number(n) : n;
-  if (r <= 0) return;
-  const t = r / 2592e6;
-  if (t > 3) return { months: Math.floor(t) };
-  const o = r / 864e5;
-  if (o >= 1) return { day: Math.floor(o) };
+function M(n) {
+  const t = typeof n == "bigint" ? Number(n) : n, o = a.fromMillis(t), r = o.as("months");
+  if (r > 3) return { months: Math.floor(r) };
+  const e = o.as("days");
+  if (e >= 1) return { day: Math.floor(e) };
 }
-const c = {
-  SECOND: 1e3,
-  MINUTE: 6e4,
-  HOUR: 36e5,
-  DAY: 864e5,
-  WEEK: 6048e5,
-  MONTH: 2592e6
+const T = {
+  SECOND: s,
+  MINUTE: f,
+  HOUR: u,
+  DAY: i,
+  WEEK: c,
+  MONTH: m
 };
 export {
-  c as TTL_CONSTANTS,
-  u as getTTLZone,
-  f as ttlFromTimestamp,
-  i as ttlLeft,
-  s as ttlLeftParsed
+  T as TTL_CONSTANTS,
+  N as getTTLZones,
+  b as ttlFromTimestamp,
+  M as ttlLeft,
+  d as ttlLeftHuman
 };

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

@@ -88,6 +88,7 @@ export * from './search-bar';
 export * from './search-line';
 export * from './segmented-control';
 export * from './select';
+export * from './separate-line';
 export * from './separator';
 export * from './short-string';
 export * from './signatures';
@@ -111,6 +112,7 @@ export * from './text-button';
 export * from './textarea';
 export * from './theme-provider';
 export * from './theme-toggle';
+export * from './time-to-liquidation';
 export * from './tip-card';
 export * from './token-icon';
 export * from './token-symbol';

package/dist/types/components/separate-line/index.d.ts

@@ -0,0 +1 @@
+export { SeparateLine, type SeparateLineProps, } from './separate-line';

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+export interface SeparateLineProps {
+    /** Horizontal overflow (width = 100% + outOfBound px). @default 0 */
+    outOfBound?: number;
+    /** Vertical margin in px. @default 10 */
+    margin?: number;
+    /** Left offset in px (applied as left: -left). @default 0 */
+    left?: number;
+    /** Border thickness in px. @default 1 */
+    thickness?: number;
+    /** Extra class name. */
+    className?: string;
+}
+/**
+ * SeparateLine — horizontal divider line (matches interface OptionsMenu SeparateLine).
+ *
+ * @usage
+ * Use as a visual separator between sections; supports extending width and offset.
+ *
+ * @example
+ * ```tsx
+ * <SeparateLine />
+ * <SeparateLine margin={20} />
+ * <SeparateLine left={16} outOfBound={32} thickness={2} />
+ * ```
+ */
+declare const SeparateLine: React.ForwardRefExoticComponent<SeparateLineProps & React.RefAttributes<HTMLDivElement>>;
+export { SeparateLine };

package/dist/types/components/time-to-liquidation/time-to-liquidation.d.ts

@@ -1,20 +1,24 @@
-type HFZone = "good" | "medium" | "bad" | "critical" | "liquidation";
+import { TTLZones } from '../../utils';
+import * as React from "react";
 export interface TimeToLiquidationProps {
-    /**
-     * Time to liquidation in milliseconds
-     */
+    /** Time to liquidation in milliseconds (bigint or number). */
     timeToLiquidation: bigint | number | null;
-    /**
-     * Health factor zone for status indicator
-     */
-    ttlZone?: HFZone;
-    /**
-     * Additional CSS class
-     */
+    /** TTL zone for status dot (matches A TTLZones). */
+    ttlZone?: TTLZones;
+    /** Extra class name. */
     className?: string;
 }
 /**
- * TimeToLiquidation - displays time remaining until liquidation
+ * TimeToLiquidation — displays time remaining until liquidation (matches interface).
+ *
+ * @usage
+ * Use next to health/liquidation info to show remaining time and optional zone dot.
+ *
+ * @example
+ * ```tsx
+ * <TimeToLiquidation timeToLiquidation={86400000} ttlZone="good" />
+ * <TimeToLiquidation timeToLiquidation={null} />
+ * ```
  */
-export declare function TimeToLiquidation({ timeToLiquidation, ttlZone, className, }: TimeToLiquidationProps): import("react/jsx-runtime").JSX.Element;
-export default TimeToLiquidation;
+declare const TimeToLiquidation: React.ForwardRefExoticComponent<TimeToLiquidationProps & React.RefAttributes<HTMLDivElement>>;
+export { TimeToLiquidation };

package/dist/types/index.d.ts

@@ -86,6 +86,7 @@ export * from './components/search-bar';
 export * from './components/search-line';
 export * from './components/segmented-control';
 export * from './components/select';
+export * from './components/separate-line';
 export * from './components/separator';
 export * from './components/short-string';
 export * from './components/signatures';
@@ -109,6 +110,7 @@ export * from './components/text-button';
 export * from './components/textarea';
 export * from './components/theme-provider';
 export * from './components/theme-toggle';
+export * from './components/time-to-liquidation';
 export * from './components/tip-card';
 export * from './components/token-icon';
 export * from './components/token-symbol';

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

@@ -7,12 +7,12 @@ export type TTLZones = "good" | "medium" | "bad";
  *
  * @example
  * ```ts
- * getTTLZone(40 * DAY) // "good"
- * getTTLZone(14 * DAY) // "medium"
- * getTTLZone(3 * DAY)  // "bad"
+ * getTTLZones(40 * DAY) // "good"
+ * getTTLZones(14 * DAY) // "medium"
+ * getTTLZones(3 * DAY)  // "bad"
  * ```
  */
-export declare function getTTLZone(ttl: number | bigint | undefined): TTLZones | undefined;
+export declare function getTTLZones(ttl: number | bigint | undefined): TTLZones | undefined;
 /**
  * Format remaining time as a human-readable string
  *
@@ -21,13 +21,13 @@ export declare function getTTLZone(ttl: number | bigint | undefined): TTLZones |
  *
  * @example
  * ```ts
- * ttlLeft(5 * DAY + 12 * HOUR) // "5d 12h"
- * ttlLeft(3 * HOUR + 45 * MINUTE) // "3h 45m"
- * ttlLeft(30 * SECOND) // "< 1m"
- * ttlLeft(0) // "Expired"
+ * ttlLeftHuman(5 * DAY + 12 * HOUR) // "5d 12h"
+ * ttlLeftHuman(3 * HOUR + 45 * MINUTE) // "3h 45m"
+ * ttlLeftHuman(30 * SECOND) // "< 1m"
+ * ttlLeftHuman(0) // "Expired"
  * ```
  */
-export declare function ttlLeft(ttl: number | bigint | undefined): string;
+export declare function ttlLeftHuman(ttl: number | bigint | undefined): string;
 /**
  * Format timestamp to remaining time string
  *
@@ -60,12 +60,12 @@ export type TTLLeftResult = {
  *
  * @example
  * ```ts
- * ttlLeftParsed(100 * DAY) // { months: 3 }
- * ttlLeftParsed(15 * DAY)  // { day: 15 }
- * ttlLeftParsed(12 * HOUR) // undefined
+ * ttlLeft(100 * DAY) // { months: 3 }
+ * ttlLeft(15 * DAY)  // { day: 15 }
+ * ttlLeft(12 * HOUR) // undefined
  * ```
  */
-export declare function ttlLeftParsed(ttl: number | bigint | undefined): TTLLeftResult;
+export declare function ttlLeft(ttl: number | bigint): TTLLeftResult;
 export declare const TTL_CONSTANTS: {
     readonly SECOND: 1000;
     readonly MINUTE: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.22.0-next.46",
+  "version": "1.22.0-next.48",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",