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

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

@@ -1,35 +1,83 @@
-import { jsx as s, jsxs as f } from "react/jsx-runtime";
-import * as c from "react";
-import { cn as a } from "../../../utils/cn.js";
-const d = c.forwardRef(
+import { jsx as i, jsxs as c } from "react/jsx-runtime";
+import * as g from "react";
+import { cn as x } from "../../../utils/cn.js";
+const u = g.forwardRef(
   ({
-    children: i,
-    aside: e,
-    asidePosition: l = "right",
-    asideClassName: t,
-    className: m,
-    ...o
-  }, n) => {
-    const r = e == null ? null : /* @__PURE__ */ s("aside", { className: a("min-w-0 shrink-0", t), children: e });
-    return /* @__PURE__ */ f(
+    children: r,
+    aside: m,
+    asidePosition: e = "right",
+    asideClassName: n,
+    mainClassName: p,
+    mainRef: t,
+    variant: o = "default",
+    className: s,
+    ...w
+  }, f) => {
+    const l = o === "detail", a = m == null ? null : /* @__PURE__ */ i(
+      "aside",
+      {
+        className: x(
+          "min-w-0 shrink-0",
+          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 min-[2450px]:right-32"
+          ],
+          n
+        ),
+        children: m
+      }
+    );
+    return /* @__PURE__ */ c(
       "div",
       {
-        ref: n,
-        className: a(
+        ref: f,
+        className: x(
+          // base: mobile stack (column-reverse), desktop row
           "flex w-full flex-col-reverse gap-6 lg:flex-row lg:items-start",
-          m
+          l && [
+            "relative mx-auto min-w-0",
+            // cap width so aside doesn't overflow on medium-wide screens
+            "max-w-[calc(80rem+420px+1.5rem)]",
+            "xl:max-w-[calc(80rem+460px+1.5rem)]",
+            // at ≥2450px aside is fixed → switch wrapper to block so main can
+            // centre independently
+            "min-[2450px]:block min-[2450px]:max-w-none min-[2450px]:gap-0"
+          ],
+          s
         ),
-        ...o,
+        ...w,
         children: [
-          l === "left" && r,
-          /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: i }),
-          l === "right" && r
+          e === "left" && a,
+          /* @__PURE__ */ i(
+            "div",
+            {
+              ref: t,
+              className: x(
+                "min-w-0 flex-1",
+                l && [
+                  "relative z-0 w-full",
+                  // at ≥2450px: stop growing and centre with explicit max-width
+                  // (leaves room for the fixed 460px aside + 8rem right offset)
+                  "min-[2450px]:mx-auto min-[2450px]:flex-none",
+                  "min-[2450px]:max-w-[min(80rem,calc(100vw-460px-8rem))]"
+                ],
+                p
+              ),
+              children: r
+            }
+          ),
+          e === "right" && a
         ]
       }
     );
   }
 );
-d.displayName = "MainAsideLayout";
+u.displayName = "MainAsideLayout";
 export {
-  d as MainAsideLayout
+  u as MainAsideLayout
 };