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

package/dist/esm/components/layout/main-aside-layout/main-aside-layout.js

@@ -1,34 +1,47 @@
-import { jsx as m, jsxs as o, Fragment as c } from "react/jsx-runtime";
-import * as E from "react";
-import { cn as n } from "../../../utils/cn.js";
-const _ = "56rem", I = "20rem", M = "1032px", T = E.forwardRef(
+import { jsx as m, jsxs as c, Fragment as w } from "react/jsx-runtime";
+import * as y from "react";
+import { cn as i } from "../../../utils/cn.js";
+const I = "56rem", M = "20rem", T = "1032px", C = y.forwardRef(
   ({
-    children: i,
+    children: p,
     aside: s,
     asidePosition: x = "right",
-    asideClassName: w,
-    mainClassName: f,
-    mainRef: p,
-    variant: g = "default",
-    centeredMain: u = !1,
-    className: v,
+    asideClassName: f,
+    mainClassName: g,
+    mainRef: r,
+    variant: u = "default",
+    centeredMain: v = !1,
+    stickyAside: t = !0,
+    className: N,
     ...d
-  }, N) => {
-    const e = g === "detail", t = x === "left", l = e && u, a = s == null ? null : /* @__PURE__ */ m(
+  }, h) => {
+    const e = u === "detail", n = x === "left", l = e && v, a = s == null ? null : /* @__PURE__ */ m(
       "aside",
       {
-        className: n(
+        className: i(
           "min-w-0 shrink-0",
           e && !l && [
             "w-full",
             "z-30 lg:w-[420px] lg:min-w-[420px] lg:max-w-[420px]",
             "xl:w-[460px] xl:min-w-[460px] xl:max-w-[460px]",
-            "max-h-full lg:max-h-[100vh] overflow-y-visible lg:overflow-y-auto",
-            // sticky below 2450px, fixed at ≥2450px
-            "lg:max-[2449px]:sticky lg:max-[2449px]:top-4",
-            "min-[2450px]:fixed min-[2450px]:top-28",
-            // fixed anchor matches asidePosition
-            t ? "min-[2450px]:left-32" : "min-[2450px]:right-32"
+            // ui-kit-owned sticky/scroll; skipped when the consumer manages
+            // stickiness itself (single page scroll, no nested scroll area).
+            t ? [
+              "max-h-full lg:max-h-[100vh] overflow-y-visible lg:overflow-y-auto",
+              // sticky below 2450px, fixed at ≥2450px
+              "lg:max-[2449px]:sticky lg:max-[2449px]:top-4",
+              "min-[2450px]:fixed min-[2450px]:top-28",
+              // fixed anchor matches asidePosition
+              n ? "min-[2450px]:left-32" : "min-[2450px]:right-32"
+            ] : (
+              // Consumer-managed sticky (single page scroll). The aside
+              // stays in normal flow at all widths so its own controller
+              // can pin it. At ≥2450px the main column is centred on the
+              // viewport and the (still in-flow) aside is pulled into the
+              // gutter via a negative margin (= aside 460px + gap 24px),
+              // keeping the form beside the centred content without `fixed`.
+              n ? "min-[2450px]:-ml-[484px]" : "min-[2450px]:-mr-[484px]"
+            )
           ],
           l && [
             "w-full",
@@ -39,41 +52,47 @@ const _ = "56rem", I = "20rem", M = "1032px", T = E.forwardRef(
             "lg:max-[1519px]:sticky lg:max-[1519px]:top-4",
             // Gutter beside the viewport-centred shell (≥1520)
             "min-[1520px]:absolute min-[1520px]:top-0",
-            t ? "min-[1520px]:right-full min-[1520px]:mr-6" : "min-[1520px]:left-full min-[1520px]:ml-6"
+            n ? "min-[1520px]:right-full min-[1520px]:mr-6" : "min-[1520px]:left-full min-[1520px]:ml-6"
           ],
-          w
+          f
         ),
         children: s
       }
-    ), h = n(
+    ), E = i(
       // lg…1519: children join the outer LP-style flex row
       "lg:contents",
       // ≥1520: viewport-centred shell; aside hangs in the gutter
       "min-[1520px]:block min-[1520px]:relative min-[1520px]:mx-auto min-[1520px]:w-full",
-      `min-[1520px]:max-w-[max(${I},min(${_},calc(100vw-${M})))]`
-    ), r = n(
+      `min-[1520px]:max-w-[max(${M},min(${I},calc(100vw-${T})))]`
+    ), o = i(
       "relative z-0 min-w-0 w-full",
       !l && "flex-1",
-      e && !l && [
+      e && !l && (t ? [
         "relative z-0 w-full",
+        // ≥2450px: centred main beside the `fixed` aside.
         "min-[2450px]:mx-auto min-[2450px]:flex-none",
         "min-[2450px]:max-w-[min(80rem,calc(100vw-460px-8rem))]",
-        t && "min-[2450px]:ml-[calc(460px+8rem)]"
-      ],
+        n && "min-[2450px]:ml-[calc(460px+8rem)]"
+      ] : [
+        "relative z-0 w-full",
+        // ≥2450px: fixed 80rem main, viewport-centred by the row's
+        // `justify-center`; the in-flow aside hangs into the gutter.
+        "min-[2450px]:flex-none min-[2450px]:w-[80rem] min-[2450px]:max-w-[80rem]"
+      ]),
       l && "flex-1 lg:max-w-none",
-      f
-    ), y = x === "left" ? /* @__PURE__ */ o(c, { children: [
+      g
+    ), _ = x === "left" ? /* @__PURE__ */ c(w, { children: [
       a,
-      /* @__PURE__ */ m("div", { ref: p, className: r, children: i })
-    ] }) : /* @__PURE__ */ o(c, { children: [
-      /* @__PURE__ */ m("div", { ref: p, className: r, children: i }),
+      /* @__PURE__ */ m("div", { ref: r, className: o, children: p })
+    ] }) : /* @__PURE__ */ c(w, { children: [
+      /* @__PURE__ */ m("div", { ref: r, className: o, children: p }),
       a
     ] });
     return /* @__PURE__ */ m(
       "div",
       {
-        ref: N,
-        className: n(
+        ref: h,
+        className: i(
           // base: mobile stack (column-reverse), desktop row
           "flex w-full flex-col-reverse gap-6 lg:items-start",
           !l && "lg:flex-row",
@@ -81,26 +100,33 @@ const _ = "56rem", I = "20rem", M = "1032px", T = E.forwardRef(
             "relative mx-auto min-w-0",
             "max-w-[calc(80rem+420px+1.5rem)]",
             "xl:max-w-[calc(80rem+460px+1.5rem)]",
-            "min-[2450px]:block min-[2450px]:max-w-none min-[2450px]:gap-0"
+            t ? (
+              // ui-kit owns sticky: ≥2450px switches to block + fixed aside.
+              "min-[2450px]:block min-[2450px]:max-w-none min-[2450px]:gap-0"
+            ) : (
+              // Consumer owns sticky: stay a flex row and centre the main
+              // column on the viewport at ≥2450px (aside hangs in the gutter).
+              "min-[2450px]:max-w-none min-[2450px]:justify-center"
+            )
           ],
           l && [
             "relative mx-auto min-w-0 lg:flex-row",
             "max-w-[calc(80rem+420px+1.5rem)] xl:max-w-[calc(80rem+460px+1.5rem)]",
             "min-[1520px]:block min-[1520px]:max-w-none"
           ],
-          v
+          N
         ),
         ...d,
-        children: l ? /* @__PURE__ */ m("div", { className: h, children: y }) : /* @__PURE__ */ o(c, { children: [
+        children: l ? /* @__PURE__ */ m("div", { className: E, children: _ }) : /* @__PURE__ */ c(w, { children: [
           x === "left" && a,
-          /* @__PURE__ */ m("div", { ref: p, className: r, children: i }),
+          /* @__PURE__ */ m("div", { ref: r, className: o, children: p }),
           x === "right" && a
         ] })
       }
     );
   }
 );
-T.displayName = "MainAsideLayout";
+C.displayName = "MainAsideLayout";
 export {
-  T as MainAsideLayout
+  C as MainAsideLayout
 };

package/dist/esm/configs/tailwind-preset.js

@@ -73,6 +73,7 @@ const e = {
         "success-hover": "hsl(var(--success-hover))",
         warning: "hsl(var(--warning))",
         liquidation: "hsl(var(--liquidation))",
+        "liquidation-line": "hsl(var(--liquidation-line))",
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",