nuvox 0.1.2 → 0.1.4

package/dist/react/index.js

@@ -34,7 +34,7 @@ import {
   resolveTableState,
   rgbToHex,
   rgbToHsl
-} from "../chunk-3F7OVF4J.js";
+} from "../chunk-KKRVJF3Y.js";
 
 // src/theme-engine/resolveColor.ts
 function rawColorToBrandVars(color) {
@@ -80,6 +80,12 @@ function withAccentOverride(color, children) {
 import { useLayoutEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 var TRACKED_ATTRIBUTES = ["data-theme", "data-accent"];
+var portalAnchors = /* @__PURE__ */ new WeakMap();
+function getPortalAnchor(portalNode) {
+  return portalAnchors.get(portalNode) ?? null;
+}
+var nextNestedStackOffset = 0;
+var NESTED_OVERRIDE_BASE_Z_INDEX = 1150;
 function ThemedPortal({ anchorRef, children, container }) {
   const portalElRef = useRef(null);
   if (!portalElRef.current && typeof document !== "undefined") {
@@ -91,6 +97,14 @@ function ThemedPortal({ anchorRef, children, container }) {
     const portalEl = portalElRef.current;
     if (!portalEl) return;
     target.appendChild(portalEl);
+    if (anchorRef.current) {
+      portalAnchors.set(portalEl, anchorRef.current);
+      const enclosingPortal = anchorRef.current.closest("[data-nuvox-portal]");
+      if (enclosingPortal) {
+        portalEl.style.position = "relative";
+        portalEl.style.zIndex = String(NESTED_OVERRIDE_BASE_Z_INDEX + nextNestedStackOffset++);
+      }
+    }
     function syncAttribute(attr) {
       const anchor2 = anchorRef.current;
       if (!anchor2 || !portalEl) return;
@@ -15173,13 +15187,28 @@ function getOpenIntent(key) {
 
 // src/theme-engine/useClickOutside.ts
 import { useEffect as useEffect5 } from "react";
+function isNestedWithinRefs(target, refs) {
+  if (!(target instanceof Element)) return false;
+  let current = target;
+  for (let depth = 0; depth < 20; depth++) {
+    const portalNode = current.closest("[data-nuvox-portal]");
+    if (!portalNode) return false;
+    const anchor = getPortalAnchor(portalNode);
+    if (!anchor) return false;
+    if (refs.some((ref) => ref.current?.contains(anchor))) return true;
+    current = anchor;
+  }
+  return false;
+}
 function useClickOutside(isOpen, refs, onOutsideClick) {
   useEffect5(() => {
     if (!isOpen) return;
     function onPointerDown(e) {
       const target = e.target;
       const isInside = refs.some((ref) => ref.current?.contains(target));
-      if (!isInside) onOutsideClick();
+      if (isInside) return;
+      if (isNestedWithinRefs(target, refs)) return;
+      onOutsideClick();
     }
     document.addEventListener("pointerdown", onPointerDown, true);
     return () => document.removeEventListener("pointerdown", onPointerDown, true);
@@ -15940,12 +15969,19 @@ function getKeyboardValue(key, current, state) {
   if (key === "End") return state.max;
   return null;
 }
-function getRootClasses3(state, isRange, className) {
+function getRootClasses3(state, isRange, showValueLabel, className) {
   return [
     "nx-slider",
     `nx-slider--${state.size}`,
     isRange && "nx-slider--range",
     state.isDisabled && "nx-slider--disabled",
+    // The value-label bubble floats above the thumb (see
+    // Slider.css) — with no room reserved for it, it overflows
+    // .nx-slider's own box and lands on whatever's above it in
+    // .nx-field, which for a slider with a `label` is the label
+    // text itself. This adds the top margin the bubble actually
+    // needs instead of relying on .nx-field's generic 4px gap.
+    showValueLabel && "nx-slider--with-value-label",
     className
   ].filter(Boolean).join(" ");
 }
@@ -16076,7 +16112,7 @@ var SliderImpl = forwardRef20(function Slider({
   }
   const slider = /* @__PURE__ */ jsxs451("div", { className: "nx-field", style, children: [
     label && /* @__PURE__ */ jsx525("span", { id: labelId, className: "nx-field__label", children: label }),
-    /* @__PURE__ */ jsx525("div", { ref: forwardedRef, id: rootId, className: getRootClasses3(state, isRange, className), children: /* @__PURE__ */ jsxs451(
+    /* @__PURE__ */ jsx525("div", { ref: forwardedRef, id: rootId, className: getRootClasses3(state, isRange, showValueLabel, className), children: /* @__PURE__ */ jsxs451(
       "div",
       {
         ref: trackRef,