framepexls-ui-lib 2.2.7 → 2.2.8

package/dist/AccessibilityFab.js

@@ -78,6 +78,8 @@ function AccessibilityFab({
       const path = typeof event.composedPath === "function" ? event.composedPath() : [];
       if (popRef.current && path.includes(popRef.current)) return;
       if (btnRef.current && path.includes(btnRef.current)) return;
+      const target = event.target;
+      if (target == null ? void 0 : target.closest("[data-fx-keep-open], [data-fx-overlay]")) return;
       setOpen(false);
     };
     window.addEventListener("keydown", onKeyDown);

package/dist/AccessibilityFab.mjs

@@ -51,6 +51,8 @@ function AccessibilityFab({
       const path = typeof event.composedPath === "function" ? event.composedPath() : [];
       if (popRef.current && path.includes(popRef.current)) return;
       if (btnRef.current && path.includes(btnRef.current)) return;
+      const target = event.target;
+      if (target == null ? void 0 : target.closest("[data-fx-keep-open], [data-fx-overlay]")) return;
       setOpen(false);
     };
     window.addEventListener("keydown", onKeyDown);

package/dist/Checkbox.d.mts

@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     inputClassName?: string;
 };
-declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     label?: React__default.ReactNode;
     description?: React__default.ReactNode;
     error?: boolean;

package/dist/Checkbox.d.ts

@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     inputClassName?: string;
 };
-declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     label?: React__default.ReactNode;
     description?: React__default.ReactNode;
     error?: boolean;

package/dist/ComboSelect.js

@@ -42,6 +42,7 @@ var import_framer_motion = require("framer-motion");
 var import_animations = require("./animations");
 var import_iconos = require("./iconos");
 const cx = (...a) => a.filter(Boolean).join(" ");
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 const controlShell = "relative w-full rounded-2xl border border-slate-200 bg-white text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus-within:ring-1 focus-within:border-[color-mix(in_oklab,var(--ring)_35%,var(--border))] disabled:opacity-60 disabled:cursor-not-allowed dark:border-[var(--border)] dark:bg-[var(--fx-surface)] dark:text-[var(--foreground)] dark:placeholder:text-[var(--muted)] dark:shadow-[0_0_0_1px_rgba(0,0,0,0.55)]";
 const isFocusableOrInteractive = (el) => {
   if (!el) return false;
@@ -248,8 +249,7 @@ function ComboSelect({
       left: r.left,
       width: r.width,
       maxHeight: maxH,
-      // Keep above Dialog (3000) and other overlays.
-      zIndex: 3600
+      zIndex: PORTAL_OVERLAY_Z_INDEX
     });
   }, []);
   import_react.default.useLayoutEffect(() => {
@@ -316,7 +316,7 @@ function ComboSelect({
       "div",
       {
         className: "fixed inset-0",
-        style: { zIndex: 3599 },
+        style: { zIndex: PORTAL_OVERLAY_Z_INDEX - 1 },
         onMouseDown: () => {
           closeDropdown();
         },
@@ -331,6 +331,7 @@ function ComboSelect({
         ref: dropRef,
         role: "listbox",
         id: listId,
+        "data-fx-overlay": "combo-select",
         style: { ...dropStyle, willChange: "transform, opacity" },
         variants: import_animations.popOver,
         initial: "initial",

package/dist/ComboSelect.mjs

@@ -9,6 +9,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import { popOver, menuTransition } from "./animations.mjs";
 import { CheckIcon, ChevronDownIcon, CloseIcon } from "./iconos/index.mjs";
 const cx = (...a) => a.filter(Boolean).join(" ");
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 const controlShell = "relative w-full rounded-2xl border border-slate-200 bg-white text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus-within:ring-1 focus-within:border-[color-mix(in_oklab,var(--ring)_35%,var(--border))] disabled:opacity-60 disabled:cursor-not-allowed dark:border-[var(--border)] dark:bg-[var(--fx-surface)] dark:text-[var(--foreground)] dark:placeholder:text-[var(--muted)] dark:shadow-[0_0_0_1px_rgba(0,0,0,0.55)]";
 const isFocusableOrInteractive = (el) => {
   if (!el) return false;
@@ -215,8 +216,7 @@ function ComboSelect({
       left: r.left,
       width: r.width,
       maxHeight: maxH,
-      // Keep above Dialog (3000) and other overlays.
-      zIndex: 3600
+      zIndex: PORTAL_OVERLAY_Z_INDEX
     });
   }, []);
   React.useLayoutEffect(() => {
@@ -283,7 +283,7 @@ function ComboSelect({
       "div",
       {
         className: "fixed inset-0",
-        style: { zIndex: 3599 },
+        style: { zIndex: PORTAL_OVERLAY_Z_INDEX - 1 },
         onMouseDown: () => {
           closeDropdown();
         },
@@ -298,6 +298,7 @@ function ComboSelect({
         ref: dropRef,
         role: "listbox",
         id: listId,
+        "data-fx-overlay": "combo-select",
         style: { ...dropStyle, willChange: "transform, opacity" },
         variants: popOver,
         initial: "initial",

package/dist/DateTimeField.js

@@ -126,6 +126,7 @@ const formatDisplayValue = (value, mode) => {
     return fmtISODateTimeLocal(parsed);
   }
 };
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 function DateTimeField({
   type = "datetime-local",
   value,
@@ -190,7 +191,7 @@ function DateTimeField({
     left = Math.max(MARGIN, Math.min(left, window.innerWidth - (W + MARGIN)));
     let top = anchorRect.top - GAP - H;
     if (top < MARGIN) top = Math.max(MARGIN, anchorRect.bottom + GAP);
-    return { position: "fixed", top, left, zIndex: 1e5 };
+    return { position: "fixed", top, left, zIndex: PORTAL_OVERLAY_Z_INDEX };
   })();
   const parsed = (0, import_react.useMemo)(() => value ? parseValueByType(value, type) : null, [value, type]);
   const [cursor, setCursor] = (0, import_react.useState)(() => parsed != null ? parsed : /* @__PURE__ */ new Date());

package/dist/DateTimeField.mjs

@@ -93,6 +93,7 @@ const formatDisplayValue = (value, mode) => {
     return fmtISODateTimeLocal(parsed);
   }
 };
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 function DateTimeField({
   type = "datetime-local",
   value,
@@ -157,7 +158,7 @@ function DateTimeField({
     left = Math.max(MARGIN, Math.min(left, window.innerWidth - (W + MARGIN)));
     let top = anchorRect.top - GAP - H;
     if (top < MARGIN) top = Math.max(MARGIN, anchorRect.bottom + GAP);
-    return { position: "fixed", top, left, zIndex: 1e5 };
+    return { position: "fixed", top, left, zIndex: PORTAL_OVERLAY_Z_INDEX };
   })();
   const parsed = useMemo(() => value ? parseValueByType(value, type) : null, [value, type]);
   const [cursor, setCursor] = useState(() => parsed != null ? parsed : /* @__PURE__ */ new Date());

package/dist/Dropdown.js

@@ -46,6 +46,7 @@ var import_framer_motion = require("framer-motion");
 var import_animations = require("./animations");
 var import_iconos = require("./iconos/index");
 var import_Button = __toESM(require("./Button"));
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 const DropdownCtx = (0, import_react.createContext)(null);
 const useDropdown = () => {
   const ctx = (0, import_react.useContext)(DropdownCtx);
@@ -289,6 +290,7 @@ function Content({
         "aria-labelledby": labelId,
         ref: menuRef,
         onKeyDown,
+        "data-fx-overlay": "dropdown",
         variants: import_animations.popOver,
         initial: "initial",
         animate: "animate",
@@ -300,6 +302,7 @@ function Content({
           left: pos.left,
           maxHeight: pos.maxH,
           maxWidth: "calc(100vw - 16px)",
+          zIndex: PORTAL_OVERLAY_Z_INDEX,
           willChange: "transform, opacity"
         },
         className: [

package/dist/Dropdown.mjs

@@ -15,6 +15,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import { popOver, menuTransition } from "./animations.mjs";
 import { MenuPuntosVerticalIcon } from "./iconos/index.mjs";
 import Button from "./Button.mjs";
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 const DropdownCtx = createContext(null);
 const useDropdown = () => {
   const ctx = useContext(DropdownCtx);
@@ -258,6 +259,7 @@ function Content({
         "aria-labelledby": labelId,
         ref: menuRef,
         onKeyDown,
+        "data-fx-overlay": "dropdown",
         variants: popOver,
         initial: "initial",
         animate: "animate",
@@ -269,6 +271,7 @@ function Content({
           left: pos.left,
           maxHeight: pos.maxH,
           maxWidth: "calc(100vw - 16px)",
+          zIndex: PORTAL_OVERLAY_Z_INDEX,
           willChange: "transform, opacity"
         },
         className: [

package/dist/Select.js

@@ -44,6 +44,7 @@ const S = {
   md: { h: "h-10", text: "text-sm", radius: "rounded-2xl", padX: "px-3.5", itemPad: "px-3.5 py-2" },
   lg: { h: "h-11", text: "text-base", radius: "rounded-2xl", padX: "px-4", itemPad: "px-4 py-2.5" }
 };
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 function ModernSelect({
   value,
   onChange,
@@ -266,6 +267,7 @@ function ModernSelect({
             left: menuPos.left,
             width: menuPos.width,
             maxWidth: "calc(100vw - 24px)",
+            zIndex: PORTAL_OVERLAY_Z_INDEX,
             willChange: "transform, opacity"
           },
           children: [

package/dist/Select.mjs

@@ -11,6 +11,7 @@ const S = {
   md: { h: "h-10", text: "text-sm", radius: "rounded-2xl", padX: "px-3.5", itemPad: "px-3.5 py-2" },
   lg: { h: "h-11", text: "text-base", radius: "rounded-2xl", padX: "px-4", itemPad: "px-4 py-2.5" }
 };
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 function ModernSelect({
   value,
   onChange,
@@ -233,6 +234,7 @@ function ModernSelect({
             left: menuPos.left,
             width: menuPos.width,
             maxWidth: "calc(100vw - 24px)",
+            zIndex: PORTAL_OVERLAY_Z_INDEX,
             willChange: "transform, opacity"
           },
           children: [

package/dist/TimePanel.js

@@ -36,6 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_Button = __toESM(require("./Button"));
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 function TimePopover({
   anchorRef,
   hh,
@@ -54,7 +55,7 @@ function TimePopover({
     left = Math.max(M, Math.min(left, window.innerWidth - (W + M)));
     let top = r.bottom + GAP;
     if (top + H > window.innerHeight) top = Math.max(M, r.top - GAP - H);
-    return { position: "fixed", top, left, width: W, zIndex: 100001 };
+    return { position: "fixed", top, left, width: W, zIndex: PORTAL_OVERLAY_Z_INDEX };
   }, [anchorRef]);
   (0, import_react.useEffect)(() => {
     const stopInside = (e) => {

package/dist/TimePanel.mjs

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from "react";
 import Button from "./Button.mjs";
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 function TimePopover({
   anchorRef,
   hh,
@@ -21,7 +22,7 @@ function TimePopover({
     left = Math.max(M, Math.min(left, window.innerWidth - (W + M)));
     let top = r.bottom + GAP;
     if (top + H > window.innerHeight) top = Math.max(M, r.top - GAP - H);
-    return { position: "fixed", top, left, width: W, zIndex: 100001 };
+    return { position: "fixed", top, left, width: W, zIndex: PORTAL_OVERLAY_Z_INDEX };
   }, [anchorRef]);
   useEffect(() => {
     const stopInside = (e) => {

package/dist/TimePopover.js

@@ -42,6 +42,7 @@ var import_animations = require("./animations");
 var import_Button = __toESM(require("./Button"));
 var import_Input = __toESM(require("./Input"));
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 function TimePopover({
   anchorEl,
   hh,
@@ -142,7 +143,7 @@ function TimePopover({
       "data-dtf-pop": true,
       onPointerDownCapture: (e) => e.stopPropagation(),
       onKeyDown,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: PORTAL_OVERLAY_Z_INDEX, willChange: "transform, opacity" },
       className: "w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 text-sm font-medium text-slate-700 dark:text-slate-200", children: "Selecciona hora" }),
@@ -361,7 +362,7 @@ function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
     import_framer_motion.motion.div,
     {
       ref: popRef,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: PORTAL_OVERLAY_Z_INDEX, willChange: "transform, opacity" },
       variants: import_animations.popOver,
       initial: "initial",
       animate: "animate",
@@ -480,7 +481,7 @@ function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
     import_framer_motion.motion.div,
     {
       ref: popRef,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: PORTAL_OVERLAY_Z_INDEX, willChange: "transform, opacity" },
       variants: import_animations.popOver,
       initial: "initial",
       animate: "animate",

package/dist/TimePopover.mjs

@@ -7,6 +7,7 @@ import { popOver, menuTransition } from "./animations.mjs";
 import Button from "./Button.mjs";
 import Input from "./Input.mjs";
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 function TimePopover({
   anchorEl,
   hh,
@@ -107,7 +108,7 @@ function TimePopover({
       "data-dtf-pop": true,
       onPointerDownCapture: (e) => e.stopPropagation(),
       onKeyDown,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: PORTAL_OVERLAY_Z_INDEX, willChange: "transform, opacity" },
       className: "w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
       children: [
         /* @__PURE__ */ jsx("div", { className: "mb-2 text-sm font-medium text-slate-700 dark:text-slate-200", children: "Selecciona hora" }),
@@ -326,7 +327,7 @@ function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
     motion.div,
     {
       ref: popRef,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: PORTAL_OVERLAY_Z_INDEX, willChange: "transform, opacity" },
       variants: popOver,
       initial: "initial",
       animate: "animate",
@@ -445,7 +446,7 @@ function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
     motion.div,
     {
       ref: popRef,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: PORTAL_OVERLAY_Z_INDEX, willChange: "transform, opacity" },
       variants: popOver,
       initial: "initial",
       animate: "animate",

package/dist/TimeRangeField.js

@@ -41,6 +41,7 @@ var import_TimePopover = __toESM(require("./TimePopover"));
 var import_ActionIconButton = __toESM(require("./ActionIconButton"));
 var import_iconos = require("./iconos");
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 function parseHHmm(v) {
   if (!v) return null;
   const [hh, mm] = String(v).split(":").map((x) => parseInt(x, 10));
@@ -142,10 +143,10 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
     const placeAbove = spaceAbove >= spaceBelow;
     if (placeAbove) {
       const top2 = Math.max(MARGIN, anchorRect.top - GAP);
-      return { position: "fixed", width: W, top: top2, left, zIndex: 1e5, transform: "translateY(-100%)" };
+      return { position: "fixed", width: W, top: top2, left, zIndex: PORTAL_OVERLAY_Z_INDEX, transform: "translateY(-100%)" };
     }
     const top = Math.max(MARGIN, anchorRect.bottom + GAP);
-    return { position: "fixed", width: W, top, left, zIndex: 1e5 };
+    return { position: "fixed", width: W, top, left, zIndex: PORTAL_OVERLAY_Z_INDEX };
   })();
   const commit = (f, t) => {
     let f2 = f, t2 = t;

package/dist/TimeRangeField.mjs

@@ -8,6 +8,7 @@ import TimePopover from "./TimePopover.mjs";
 import ActionIconButton from "./ActionIconButton.mjs";
 import { ClockIcon } from "./iconos/index.mjs";
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 function parseHHmm(v) {
   if (!v) return null;
   const [hh, mm] = String(v).split(":").map((x) => parseInt(x, 10));
@@ -109,10 +110,10 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
     const placeAbove = spaceAbove >= spaceBelow;
     if (placeAbove) {
       const top2 = Math.max(MARGIN, anchorRect.top - GAP);
-      return { position: "fixed", width: W, top: top2, left, zIndex: 1e5, transform: "translateY(-100%)" };
+      return { position: "fixed", width: W, top: top2, left, zIndex: PORTAL_OVERLAY_Z_INDEX, transform: "translateY(-100%)" };
     }
     const top = Math.max(MARGIN, anchorRect.bottom + GAP);
-    return { position: "fixed", width: W, top, left, zIndex: 1e5 };
+    return { position: "fixed", width: W, top, left, zIndex: PORTAL_OVERLAY_Z_INDEX };
   })();
   const commit = (f, t) => {
     let f2 = f, t2 = t;

package/dist/theme/FontSizeController.js

@@ -54,7 +54,7 @@ function FontSizeController({
   labels
 }) {
   var _a, _b, _c, _d, _e;
-  const POPOVER_Z_INDEX = 10050;
+  const POPOVER_Z_INDEX = 2147483647;
   const [mounted, setMounted] = import_react.default.useState(false);
   import_react.default.useEffect(() => setMounted(true), []);
   const { fontScale, setFontScale, increaseFont, decreaseFont, resetFont } = (0, import_ThemeProvider.useTheme)();

package/dist/theme/FontSizeController.mjs

@@ -21,7 +21,7 @@ function FontSizeController({
   labels
 }) {
   var _a, _b, _c, _d, _e;
-  const POPOVER_Z_INDEX = 10050;
+  const POPOVER_Z_INDEX = 2147483647;
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => setMounted(true), []);
   const { fontScale, setFontScale, increaseFont, decreaseFont, resetFont } = useTheme();

package/dist/theme/ThemeController.js

@@ -82,7 +82,7 @@ function ThemeController({
   labels
 }) {
   var _a, _b, _c, _d, _e, _f, _g;
-  const POPOVER_Z_INDEX = 10050;
+  const POPOVER_Z_INDEX = 2147483647;
   const [mounted, setMounted] = import_react.default.useState(false);
   import_react.default.useEffect(() => setMounted(true), []);
   const { theme, setTheme, accent, setAccent } = (0, import_ThemeProvider.useTheme)();
@@ -269,6 +269,7 @@ function ThemeController({
                 style: popStyle,
                 role: "dialog",
                 "aria-label": (_g = labels == null ? void 0 : labels.accentGroup) != null ? _g : "Color",
+                "data-fx-keep-open": true,
                 className: [
                   "rounded-2xl border border-[var(--border)] bg-[var(--card)] shadow-2xl ring-1 ring-black/5",
                   "dark:ring-white/10",

package/dist/theme/ThemeController.mjs

@@ -49,7 +49,7 @@ function ThemeController({
   labels
 }) {
   var _a, _b, _c, _d, _e, _f, _g;
-  const POPOVER_Z_INDEX = 10050;
+  const POPOVER_Z_INDEX = 2147483647;
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => setMounted(true), []);
   const { theme, setTheme, accent, setAccent } = useTheme();
@@ -236,6 +236,7 @@ function ThemeController({
                 style: popStyle,
                 role: "dialog",
                 "aria-label": (_g = labels == null ? void 0 : labels.accentGroup) != null ? _g : "Color",
+                "data-fx-keep-open": true,
                 className: [
                   "rounded-2xl border border-[var(--border)] bg-[var(--card)] shadow-2xl ring-1 ring-black/5",
                   "dark:ring-white/10",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framepexls-ui-lib",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "private": false,
   "license": "MIT",
   "description": "Componentes UI de Framepexls para React/Next.",