@danxbot/ui 4.1.8 → 4.1.10

package/dist/index.js

@@ -13690,43 +13690,45 @@ const uO = [
 ];
 function nr({
   trigger: e,
-  side: t = "bottom",
-  align: n = "center",
-  arrow: r = !1,
-  width: o,
-  className: s,
-  children: i,
-  ref: a,
-  defaultOpen: l,
-  onOpenChange: c,
-  "aria-labelledby": u,
-  "aria-label": m
+  open: t,
+  side: n = "bottom",
+  align: r = "center",
+  arrow: o = !1,
+  width: s,
+  className: i,
+  children: a,
+  ref: l,
+  defaultOpen: c,
+  onOpenChange: u,
+  "aria-labelledby": m,
+  "aria-label": d
 }) {
   return /* @__PURE__ */ T(
     E2,
     {
-      defaultOpen: l,
-      onOpenChange: c && ((p) => c(p)),
+      open: t,
+      defaultOpen: c,
+      onOpenChange: u && ((h) => u(h)),
       children: [
         /* @__PURE__ */ f(l0, { render: e }),
         /* @__PURE__ */ f(c0, { children: /* @__PURE__ */ f(
           m0,
           {
-            side: t,
-            align: n,
+            side: n,
+            align: r,
             sideOffset: 8,
             className: "z-(--z-popover) outline-none",
             children: /* @__PURE__ */ T(
               x0,
               {
-                ref: a,
-                "aria-labelledby": u,
-                "aria-label": m,
-                style: o ? { "--dx-popover-w": o } : void 0,
-                className: W(uO, dO, "p-4", s),
+                ref: l,
+                "aria-labelledby": m,
+                "aria-label": d,
+                style: s ? { "--dx-popover-w": s } : void 0,
+                className: W(uO, dO, "p-4", i),
                 children: [
-                  r && /* @__PURE__ */ f(y0, { className: W(O0), children: /* @__PURE__ */ f("span", { className: W(A0) }) }),
-                  /* @__PURE__ */ f("div", { className: P0, children: i })
+                  o && /* @__PURE__ */ f(y0, { className: W(O0), children: /* @__PURE__ */ f("span", { className: W(A0) }) }),
+                  /* @__PURE__ */ f("div", { className: P0, children: a })
                 ]
               }
             )
@@ -16088,7 +16090,10 @@ const zO = au, Z0 = mt({
       "data-starting-style:scale-95 data-starting-style:opacity-0",
       "data-ending-style:opacity-0 data-ending-style:duration-(--dur-exit-slow) data-ending-style:ease-exit"
     ],
-    header: "flex items-start gap-4 px-6 pt-6",
+    /* `pr-12` reserves the corner close button's own footprint so a long title
+       or description never runs underneath it — see the close button's own
+       comment below for why it sits OUTSIDE this row instead of inside it. */
+    header: "flex items-start gap-4 px-6 pr-12 pt-6",
     title: "font-display text-lg font-semibold text-primary text-balance",
     description: "mt-1.5 text-sm text-secondary text-pretty",
     /* The body scrolls, not the panel, so the header and footer stay put on a
@@ -16128,21 +16133,38 @@ function BO({
     /* @__PURE__ */ T(la, { children: [
       /* @__PURE__ */ f(sa, { className: m.backdrop() }),
       /* @__PURE__ */ T(aa, { ref: u, className: W(m.popup(), l), children: [
-        /* @__PURE__ */ T("div", { className: m.header(), children: [
-          /* @__PURE__ */ T("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ f(ca, { className: m.title(), children: r }),
-            o && /* @__PURE__ */ f(vm, { className: m.description(), children: o })
-          ] }),
-          !i && /* `hideTooltip`: a Base UI `render` slot merges props and a ref
-          into ONE element, which a tooltip wrapper would swallow. The
-          accessible name still comes from `label`. */
-          /* @__PURE__ */ f(
-            ia,
-            {
-              render: /* @__PURE__ */ f(Mn, { label: "Close", hideTooltip: !0, icon: /* @__PURE__ */ f(ge, { name: "x", size: "sm" }) })
-            }
-          )
-        ] }),
+        /* @__PURE__ */ f("div", { className: m.header(), children: /* @__PURE__ */ T("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ f(ca, { className: m.title(), children: r }),
+          o && /* @__PURE__ */ f(vm, { className: m.description(), children: o })
+        ] }) }),
+        !i && /* PINNED TO THE POPUP'S OWN CORNER, NOT THE HEADER ROW.
+        Sitting inside `header`'s flex row (the previous layout) put the
+        close button's vertical position at the mercy of the title's own
+        line height — a short one-line title read fine, but the button
+        shared a baseline with the FIRST line of title/description
+        content rather than sitting at a fixed, predictable corner
+        independent of how much text the header holds. `.popup` is
+        already `fixed`, which is itself a positioning context, so no
+        extra `relative` wrapper is needed here. `header`'s `pr-12`
+        reserves this button's footprint so title/description text
+        never runs underneath it.
+        `hideTooltip`: a Base UI `render` slot merges props and a ref
+        into ONE element, which a tooltip wrapper would swallow. The
+        accessible name still comes from `label`. */
+        /* @__PURE__ */ f(
+          ia,
+          {
+            render: /* @__PURE__ */ f(
+              Mn,
+              {
+                label: "Close",
+                hideTooltip: !0,
+                icon: /* @__PURE__ */ f(ge, { name: "x", size: "sm" }),
+                className: "absolute top-4 right-4"
+              }
+            )
+          }
+        ),
         c && /* @__PURE__ */ f("div", { className: m.body(), children: c }),
         s && /* @__PURE__ */ f("div", { className: m.footer(), children: s })
       ] })