@skiddph/prui 0.10.2 → 0.12.0

package/dist/core/drawer.js

@@ -1,93 +1,76 @@
-import { jsx as t, jsxs as Y } from "react/jsx-runtime";
-import * as a from "react";
-import { X as k } from "lucide-react";
-import { cn as P } from "./cn.js";
-import { useReducedMotion as j, useOverlay as A, Portal as E } from "./overlay.js";
-import { usePruiI18n as F } from "../i18n.js";
-const L = {
+import { jsx as t, jsxs as C } from "react/jsx-runtime";
+import * as u from "react";
+import { X as M } from "lucide-react";
+import { cn as R } from "./cn.js";
+import { useMountTransition as T, useOverlay as Y, Portal as k } from "./overlay.js";
+import { usePruiI18n as P } from "../i18n.js";
+const j = {
   left: "left-0 top-0 h-full prui-drawer-panel",
   right: "right-0 top-0 h-full prui-drawer-panel",
   top: "left-0 top-0 w-full prui-drawer-panel",
   bottom: "left-0 bottom-0 w-full prui-drawer-panel"
-}, $ = {
+}, L = {
   left: "translateX(0)",
   right: "translateX(0)",
   top: "translateY(0)",
   bottom: "translateY(0)"
-}, q = {
+}, $ = {
   left: "translateX(-100%)",
   right: "translateX(100%)",
   top: "translateY(-100%)",
   bottom: "translateY(100%)"
-}, h = a.forwardRef(function({ open: n, defaultOpen: i = !1, onOpenChange: s, side: r = "right", size: o, children: v, ariaLabel: w, hideClose: y, className: g, style: x }, S) {
-  const [N, D] = a.useState(i), m = n !== void 0, l = m ? n : N, [M, u] = a.useState(l), [p, d] = a.useState(!1), f = j(), { t: R } = F(), c = (e) => {
-    m || D(e), s == null || s(e);
-  };
-  a.useEffect(() => {
-    if (l) {
-      if (u(!0), f) {
-        d(!0);
-        return;
-      }
-      const C = requestAnimationFrame(() => d(!0));
-      return () => cancelAnimationFrame(C);
-    }
-    if (d(!1), f) {
-      u(!1);
-      return;
-    }
-    const e = setTimeout(() => u(!1), 300);
-    return () => clearTimeout(e);
-  }, [l, f]);
-  const { ref: T } = A({
-    open: l,
-    onEscape: () => c(!1)
+}, f = u.forwardRef(function({ open: a, defaultOpen: n = !1, onOpenChange: l, side: e = "right", size: r, children: c, ariaLabel: h, hideClose: b, className: v, style: y }, g) {
+  const [w, x] = u.useState(n), p = a !== void 0, d = p ? a : w, { mounted: S, shown: i } = T(d), { t: N } = P(), s = (o) => {
+    p || x(o), l == null || l(o);
+  }, { ref: D } = Y({
+    open: d,
+    onEscape: () => s(!1)
   });
-  if (!M) return null;
+  if (!S) return null;
   const X = {
-    transform: p ? $[r] : q[r],
+    transform: i ? L[e] : $[e],
     transition: "transform var(--prui-duration-slow) var(--prui-ease-out)",
-    ...r === "left" || r === "right" ? { width: typeof o == "number" ? `${o}px` : o ?? "400px" } : { maxHeight: typeof o == "number" ? `${o}px` : o ?? "80vh" },
-    ...x
+    ...e === "left" || e === "right" ? { width: typeof r == "number" ? `${r}px` : r ?? "400px" } : { maxHeight: typeof r == "number" ? `${r}px` : r ?? "80vh" },
+    ...y
   };
-  return /* @__PURE__ */ t(E, { children: /* @__PURE__ */ t("div", { ref: T, children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t("div", { ref: D, children: /* @__PURE__ */ t(
     "div",
     {
       className: "prui-drawer-overlay fixed inset-0 z-[var(--prui-z-modal)]",
       style: {
         backgroundColor: "var(--prui-scrim)",
-        opacity: p ? 1 : 0,
+        opacity: i ? 1 : 0,
         transition: "opacity var(--prui-duration-slow) var(--prui-ease-out)"
       },
-      onMouseDown: (e) => {
-        e.target === e.currentTarget && c(!1);
+      onMouseDown: (o) => {
+        o.target === o.currentTarget && s(!1);
       },
-      children: /* @__PURE__ */ Y(
+      children: /* @__PURE__ */ C(
         "div",
         {
-          ref: S,
+          ref: g,
           role: "dialog",
           "aria-modal": "true",
-          "aria-label": w,
-          "data-state": p ? "open" : "closed",
-          className: P(
+          "aria-label": h,
+          "data-state": i ? "open" : "closed",
+          className: R(
             "absolute flex flex-col overflow-y-auto border border-[var(--prui-line)] bg-[var(--prui-surface)]",
             "text-[var(--prui-fg)] shadow-[var(--prui-shadow-modal)] outline-none",
-            L[r],
-            g
+            j[e],
+            v
           ),
           style: X,
           children: [
-            r === "bottom" ? /* @__PURE__ */ t("div", { "aria-hidden": !0, className: "mx-auto mt-2 mb-1 h-1 w-10 shrink-0 rounded-[var(--prui-radius-full)] bg-[var(--prui-line)]" }) : null,
-            v,
-            y ? null : /* @__PURE__ */ t(
+            e === "bottom" ? /* @__PURE__ */ t("div", { "aria-hidden": !0, className: "mx-auto mt-2 mb-1 h-1 w-10 shrink-0 rounded-[var(--prui-radius-full)] bg-[var(--prui-line)]" }) : null,
+            c,
+            b ? null : /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
-                "aria-label": R.close,
-                onClick: () => c(!1),
+                "aria-label": N.close,
+                onClick: () => s(!1),
                 className: "absolute right-3 top-3 rounded-[var(--prui-radius-1)] p-1 text-[var(--prui-dim)] transition-colors hover:bg-[var(--prui-raise)] hover:text-[var(--prui-fg)] cursor-pointer",
-                children: /* @__PURE__ */ t(k, { className: "h-4 w-4", "aria-hidden": !0 })
+                children: /* @__PURE__ */ t(M, { className: "h-4 w-4", "aria-hidden": !0 })
               }
             )
           ]
@@ -96,12 +79,12 @@ const L = {
     }
   ) }) });
 });
-h.displayName = "Drawer";
-const H = a.forwardRef(function(n, i) {
-  return /* @__PURE__ */ t(h, { ref: i, side: "bottom", ...n });
+f.displayName = "Drawer";
+const E = u.forwardRef(function(a, n) {
+  return /* @__PURE__ */ t(f, { ref: n, side: "bottom", ...a });
 });
-H.displayName = "Sheet";
-const J = {
+E.displayName = "Sheet";
+const A = {
   name: "Drawer",
   props: [
     { name: "open", type: "boolean", default: "undefined", control: "boolean" },
@@ -112,7 +95,7 @@ const J = {
     { name: "ariaLabel", type: "string", default: null, control: "text" },
     { name: "hideClose", type: "boolean", default: "false", control: "boolean" }
   ]
-}, K = {
+}, B = {
   name: "Sheet",
   props: [
     { name: "open", type: "boolean", default: "undefined", control: "boolean" },
@@ -122,8 +105,8 @@ const J = {
   ]
 };
 export {
-  h as Drawer,
-  H as Sheet,
-  J as drawerPropsMeta,
-  K as sheetPropsMeta
+  f as Drawer,
+  E as Sheet,
+  A as drawerPropsMeta,
+  B as sheetPropsMeta
 };

package/dist/core/input.d.ts

@@ -14,8 +14,12 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     variant?: "default" | "filled";
     /** Icon rendered inside the field's leading edge. */
     icon?: React.ReactNode;
-    /** Icon rendered inside the field's trailing edge. */
+    /** Icon rendered inside the field's trailing edge. A custom trailingIcon
+     * takes over the slot and suppresses the password eye toggle. */
     trailingIcon?: React.ReactNode;
+    /** With type="password", render an eye show/hide toggle in the trailing
+     * slot (the default). Set false to keep a plain masked field. */
+    passwordToggle?: boolean;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export declare const inputPropsMeta: PropsMeta;

package/dist/core/input.js

@@ -1,59 +1,83 @@
-import { jsx as a, jsxs as N } from "react/jsx-runtime";
-import * as d from "react";
-import { resolveSurface as R, withSurface as j } from "./surface.js";
-import { cn as u } from "./cn.js";
-const p = "prui-f-control prui-input w-full bg-[var(--prui-s-bg,var(--prui-background))] text-[var(--prui-s-fg,var(--prui-fg))] placeholder:text-[var(--prui-dim)] border border-[var(--prui-line)] rounded-[var(--prui-s-radius,var(--prui-radius))] text-sm outline-none transition-colors focus:border-[var(--prui-brand)] focus:ring-2 focus:ring-[var(--prui-brand)]/30 disabled:opacity-50 disabled:cursor-not-allowed", z = {
+import { jsx as e, jsxs as S } from "react/jsx-runtime";
+import * as u from "react";
+import { EyeOff as T, Eye as k } from "lucide-react";
+import { resolveSurface as z, withSurface as E } from "./surface.js";
+import { cn as h } from "./cn.js";
+import { usePruiI18n as M } from "../i18n.js";
+const v = "prui-f-control prui-input w-full bg-[var(--prui-s-bg,var(--prui-background))] text-[var(--prui-s-fg,var(--prui-fg))] placeholder:text-[var(--prui-dim)] border border-[var(--prui-line)] rounded-[var(--prui-s-radius,var(--prui-radius))] text-sm outline-none transition-colors focus:border-[var(--prui-brand)] focus:ring-2 focus:ring-[var(--prui-brand)]/30 disabled:opacity-50 disabled:cursor-not-allowed", D = {
   sm: "h-8 px-2.5",
   md: "h-9 px-3",
   lg: "h-11 px-4 text-base"
-}, C = d.forwardRef(
-  ({ className: r, style: n, type: l = "text", size: o = "md", variant: c = "default", icon: e, trailingIcon: t, bg: m, fg: f, radius: g, texture: x, textureColor: v, elevation: y, ...b }, h) => {
-    const w = R({ bg: m, fg: f, radius: g, texture: x, textureColor: v, elevation: y }), s = j(
-      u(
-        p,
-        z[o],
-        c === "filled" && "bg-[var(--prui-s-bg,var(--prui-raise))] border-transparent",
-        e && "pl-9",
-        t && "pr-9",
-        r
+}, B = u.forwardRef(
+  ({ className: s, style: l, type: a = "text", size: i = "md", variant: g = "default", icon: r, trailingIcon: t, passwordToggle: y = !0, bg: b, fg: x, radius: w, texture: N, textureColor: R, elevation: P, ...p }, j) => {
+    const { t: c } = M(), [n, C] = u.useState(!1), o = a === "password" && y !== !1 && !t, I = z({ bg: b, fg: x, radius: w, texture: N, textureColor: R, elevation: P }), f = E(
+      h(
+        v,
+        D[i],
+        g === "filled" && "bg-[var(--prui-s-bg,var(--prui-raise))] border-transparent",
+        r && "pl-9",
+        (t || o) && "pr-9",
+        s
       ),
-      n,
-      w
-    ), i = /* @__PURE__ */ a("input", { ref: h, type: l, className: s.className, style: s.style, ...b });
-    return !e && !t ? i : /* @__PURE__ */ N("span", { className: "relative inline-flex w-full", children: [
-      e ? /* @__PURE__ */ a("span", { "aria-hidden": !0, className: "pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 items-center text-[var(--prui-dim)] [&>svg]:h-4 [&>svg]:w-4", children: e }) : null,
-      i,
-      t ? /* @__PURE__ */ a("span", { "aria-hidden": !0, className: "pointer-events-none absolute right-3 top-1/2 flex -translate-y-1/2 items-center text-[var(--prui-dim)] [&>svg]:h-4 [&>svg]:w-4", children: t }) : null
+      l,
+      I
+    ), m = /* @__PURE__ */ e(
+      "input",
+      {
+        ref: j,
+        type: o && n ? "text" : a,
+        className: f.className,
+        style: f.style,
+        ...p
+      }
+    );
+    return !r && !t && !o ? m : /* @__PURE__ */ S("span", { className: "relative inline-flex w-full", children: [
+      r ? /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 items-center text-[var(--prui-dim)] [&>svg]:h-4 [&>svg]:w-4", children: r }) : null,
+      m,
+      t ? /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "pointer-events-none absolute right-3 top-1/2 flex -translate-y-1/2 items-center text-[var(--prui-dim)] [&>svg]:h-4 [&>svg]:w-4", children: t }) : o ? /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          "aria-label": n ? c.hidePassword : c.showPassword,
+          "aria-pressed": n,
+          disabled: p.disabled,
+          onMouseDown: (d) => d.preventDefault(),
+          onClick: () => C((d) => !d),
+          className: "absolute right-1.5 top-1/2 flex h-6 w-6 -translate-y-1/2 cursor-pointer items-center justify-center rounded-[var(--prui-radius-1)] text-[var(--prui-dim)] hover:bg-[var(--prui-raise)] hover:text-[var(--prui-fg)] disabled:cursor-not-allowed disabled:opacity-50",
+          children: n ? /* @__PURE__ */ e(T, { className: "h-4 w-4", "aria-hidden": !0 }) : /* @__PURE__ */ e(k, { className: "h-4 w-4", "aria-hidden": !0 })
+        }
+      ) : null
     ] });
   }
 );
-C.displayName = "Input";
-const P = {
+B.displayName = "Input";
+const J = {
   name: "Input",
   props: [
     { name: "type", type: "string", default: "'text'", control: "select", options: ["text", "password", "email", "number", "search"] },
     { name: "size", type: "'sm' | 'md' | 'lg'", default: "'md'", control: "select", options: ["sm", "md", "lg"] },
     { name: "variant", type: "'default' | 'filled'", default: "'default'", control: "select", options: ["default", "filled"] },
     { name: "icon", type: "ReactNode", default: "undefined", control: "none", description: "Icon inside the leading edge (padding adjusts)." },
-    { name: "trailingIcon", type: "ReactNode", default: "undefined", control: "none", description: "Icon inside the trailing edge." },
+    { name: "trailingIcon", type: "ReactNode", default: "undefined", control: "none", description: "Icon inside the trailing edge; takes over the slot from the password eye." },
+    { name: "passwordToggle", type: "boolean", default: "true", control: "boolean", description: "type=password renders an eye show/hide toggle unless a trailingIcon owns the slot." },
     { name: "value", type: "string", default: null, control: "text" },
     { name: "placeholder", type: "string", default: "undefined", control: "text" },
     { name: "disabled", type: "boolean", default: "false", control: "boolean" },
     { name: "onChange", type: "(e) => void", default: null, control: "none" }
   ]
-}, I = d.forwardRef(
-  ({ className: r, style: n, ...l }, o) => /* @__PURE__ */ a(
+}, O = u.forwardRef(
+  ({ className: s, style: l, ...a }, i) => /* @__PURE__ */ e(
     "textarea",
     {
-      ref: o,
-      style: n,
-      className: u(p, "h-auto min-h-20 resize-y px-3 py-2", r),
-      ...l
+      ref: i,
+      style: l,
+      className: h(v, "h-auto min-h-20 resize-y px-3 py-2", s),
+      ...a
     }
   )
 );
-I.displayName = "Textarea";
-const k = {
+O.displayName = "Textarea";
+const K = {
   name: "Textarea",
   props: [
     { name: "value", type: "string", default: null, control: "textarea" },
@@ -63,8 +87,8 @@ const k = {
   ]
 };
 export {
-  C as Input,
-  I as Textarea,
-  P as inputPropsMeta,
-  k as textareaPropsMeta
+  B as Input,
+  O as Textarea,
+  J as inputPropsMeta,
+  K as textareaPropsMeta
 };

package/dist/core/overlay.d.ts

@@ -25,6 +25,18 @@ export declare function Portal({ children, container, }: {
 }): React.ReactPortal | null;
 /** True when the user asked the OS for reduced motion. */
 export declare function useReducedMotion(): boolean;
+/**
+ * Mount/unmount lifecycle for enter/exit animations. Mounts immediately when
+ * `open` turns true; flips `shown` a frame later so the enter state (the
+ * "from" transform) paints first — a single rAF can merge into that first
+ * paint under discrete-event flushes and skip the animation entirely, so this
+ * waits two frames. On close, `shown` drops at once and unmounting waits
+ * `exitMs` for the exit animation. Reduced motion skips both directions.
+ */
+export declare function useMountTransition(open: boolean, exitMs?: number): {
+    mounted: boolean;
+    shown: boolean;
+};
 /** All focusable elements inside root, in DOM order. */
 export declare function getFocusable(root: HTMLElement | null): HTMLElement[];
 /** Register an overlay; returns its stack id. */

package/dist/core/overlay.js

@@ -1,23 +1,47 @@
-import * as s from "react";
+import * as c from "react";
 import { createPortal as E } from "react-dom";
-function P({
+function x({
   children: t,
   container: e
 }) {
-  const [r, c] = s.useState(null);
-  return s.useEffect(() => {
-    c(e ?? (typeof document < "u" ? document.body : null));
-  }, [e]), r == null ? null : E(t, r);
-}
-function x() {
-  const [t, e] = s.useState(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches);
-  return s.useEffect(() => {
+  const [n, s] = c.useState(null);
+  return c.useEffect(() => {
+    s(e ?? (typeof document < "u" ? document.body : null));
+  }, [e]), n == null ? null : E(t, n);
+}
+function v() {
+  const [t, e] = c.useState(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+  return c.useEffect(() => {
     if (typeof window > "u" || !window.matchMedia) return;
-    const r = window.matchMedia("(prefers-reduced-motion: reduce)"), c = () => e(r.matches);
-    return r.addEventListener("change", c), () => r.removeEventListener("change", c);
+    const n = window.matchMedia("(prefers-reduced-motion: reduce)"), s = () => e(n.matches);
+    return n.addEventListener("change", s), () => n.removeEventListener("change", s);
   }, []), t;
 }
-const v = [
+function I(t, e = 300) {
+  const n = v(), [s, o] = c.useState(t), [r, u] = c.useState(!1);
+  return c.useEffect(() => {
+    if (t) {
+      if (o(!0), n) {
+        u(!0);
+        return;
+      }
+      let f = 0;
+      const a = requestAnimationFrame(() => {
+        f = requestAnimationFrame(() => u(!0));
+      });
+      return () => {
+        cancelAnimationFrame(a), cancelAnimationFrame(f);
+      };
+    }
+    if (u(!1), n) {
+      o(!1);
+      return;
+    }
+    const i = setTimeout(() => o(!1), e);
+    return () => clearTimeout(i);
+  }, [t, n, e]), { mounted: s, shown: r };
+}
+const g = [
   "a[href]",
   "button:not([disabled])",
   "input:not([disabled])",
@@ -30,138 +54,138 @@ const v = [
   "[contenteditable]:not([contenteditable='false'])"
 ].join(",");
 function y(t) {
-  return t ? Array.from(t.querySelectorAll(v)).filter(
+  return t ? Array.from(t.querySelectorAll(g)).filter(
     (e) => !e.closest("[inert], [aria-hidden='true']") && !e.hasAttribute("hidden")
   ) : [];
 }
-const f = [];
-function g(t) {
+const l = [];
+function T(t) {
   const e = Symbol("prui-overlay");
-  return f.push({ id: e, element: t }), e;
+  return l.push({ id: e, element: t }), e;
 }
-function T(t) {
-  const e = f.findIndex((r) => r.id === t);
-  e >= 0 && f.splice(e, 1);
+function w(t) {
+  const e = l.findIndex((n) => n.id === t);
+  e >= 0 && l.splice(e, 1);
 }
 function k(t) {
-  const e = f[f.length - 1];
+  const e = l[l.length - 1];
   return e != null && e.id === t;
 }
-function I() {
-  return f.length;
+function B() {
+  return l.length;
 }
-function w(t) {
-  const e = s.useRef(null), r = s.useRef(null), [c, o] = s.useReducer((i) => i + 1, 0);
-  s.useEffect(() => {
+function A(t) {
+  const e = c.useRef(null), n = c.useRef(null), [s, o] = c.useReducer((i) => i + 1, 0);
+  c.useEffect(() => {
     if (!t) return;
-    const i = g(null);
-    return e.current = i, r.current = f[f.length - 1] ?? null, o(), () => {
-      T(i), e.current === i && (e.current = null, r.current = null);
+    const i = T(null);
+    return e.current = i, n.current = l[l.length - 1] ?? null, o(), () => {
+      w(i), e.current === i && (e.current = null, n.current = null);
     };
   }, [t]);
-  const n = s.useCallback((i) => {
-    r.current && (r.current.element = i);
-  }, []), u = s.useCallback(() => e.current != null ? k(e.current) : !1, []);
-  return { setElement: n, isTop: u };
-}
-function R(t, e, r) {
-  const c = s.useRef(r);
-  c.current = r, s.useEffect(() => {
+  const r = c.useCallback((i) => {
+    n.current && (n.current.element = i);
+  }, []), u = c.useCallback(() => e.current != null ? k(e.current) : !1, []);
+  return { setElement: r, isTop: u };
+}
+function R(t, e, n) {
+  const s = c.useRef(n);
+  s.current = n, c.useEffect(() => {
     if (!t) return;
-    const o = (n) => {
-      if (n.key !== "Escape" || !e()) return;
-      c.current() === !1 && n.stopPropagation();
+    const o = (r) => {
+      if (r.key !== "Escape" || !e()) return;
+      s.current() === !1 && r.stopPropagation();
     };
     return document.addEventListener("keydown", o, !0), () => document.removeEventListener("keydown", o, !0);
   }, [t, e]);
 }
-let a = 0, h = "", p = "";
-function L() {
-  typeof document > "u" || (a++, !(a > 1) && (h = document.body.style.overflow, p = document.body.style.paddingRight, document.body.style.overflow = "hidden", document.body.classList.add("modal-open")));
+let m = 0, h = "", p = "";
+function S() {
+  typeof document > "u" || (m++, !(m > 1) && (h = document.body.style.overflow, p = document.body.style.paddingRight, document.body.style.overflow = "hidden", document.body.classList.add("modal-open")));
 }
-function A() {
-  typeof document > "u" || (a = Math.max(0, a - 1), !(a > 0) && (document.body.style.overflow = h, document.body.style.paddingRight = p, document.body.classList.remove("modal-open")));
+function L() {
+  typeof document > "u" || (m = Math.max(0, m - 1), !(m > 0) && (document.body.style.overflow = h, document.body.style.paddingRight = p, document.body.classList.remove("modal-open")));
 }
-function S(t) {
-  s.useEffect(() => {
+function C(t) {
+  c.useEffect(() => {
     if (t)
-      return L(), A;
+      return S(), L;
   }, [t]);
 }
 const b = typeof HTMLElement < "u" && "inert" in HTMLElement.prototype;
-function C(t, e) {
-  const r = t.ownerDocument, c = [];
-  for (const o of Array.from(r.body.childNodes)) {
+function M(t, e) {
+  const n = t.ownerDocument, s = [];
+  for (const o of Array.from(n.body.childNodes)) {
     if (!(o instanceof HTMLElement)) continue;
-    const n = o.tagName;
-    n === "SCRIPT" || n === "STYLE" || n === "LINK" || n === "NOSCRIPT" || n === "META" || n === "TITLE" || n === "TEMPLATE" || o === t || o.contains(t) || t.contains(o) || e.has(o) || o.getAttribute("aria-hidden") !== "true" && (c.push({ el: o, ariaHidden: o.getAttribute("aria-hidden") }), o.setAttribute("aria-hidden", "true"), b && o.setAttribute("inert", ""));
+    const r = o.tagName;
+    r === "SCRIPT" || r === "STYLE" || r === "LINK" || r === "NOSCRIPT" || r === "META" || r === "TITLE" || r === "TEMPLATE" || o === t || o.contains(t) || t.contains(o) || e.has(o) || o.getAttribute("aria-hidden") !== "true" && (s.push({ el: o, ariaHidden: o.getAttribute("aria-hidden") }), o.setAttribute("aria-hidden", "true"), b && o.setAttribute("inert", ""));
   }
   return () => {
-    for (const { el: o, ariaHidden: n } of c)
-      n === null ? o.removeAttribute("aria-hidden") : o.setAttribute("aria-hidden", n), b && o.removeAttribute("inert");
+    for (const { el: o, ariaHidden: r } of s)
+      r === null ? o.removeAttribute("aria-hidden") : o.setAttribute("aria-hidden", r), b && o.removeAttribute("inert");
   };
 }
-function M(t, e) {
-  s.useEffect(() => {
+function O(t, e) {
+  c.useEffect(() => {
     if (!t || !e || typeof document > "u") return;
-    const r = /* @__PURE__ */ new Set();
-    for (const c of f)
-      c.element && r.add(c.element);
-    return C(e, r);
+    const n = /* @__PURE__ */ new Set();
+    for (const s of l)
+      s.element && n.add(s.element);
+    return M(e, n);
   }, [t, e]);
 }
-function O({ active: t, container: e, initialFocus: r = "first", restoreFocus: c = !0 }) {
-  const o = s.useRef(null);
-  s.useEffect(() => {
+function N({ active: t, container: e, initialFocus: n = "first", restoreFocus: s = !0 }) {
+  const o = c.useRef(null);
+  c.useEffect(() => {
     if (!t) return;
     o.current = document.activeElement ?? null;
-    const u = (r === !1 ? null : r === "container" ? e : r === "first" ? y(e)[0] ?? e : r.current ?? null) ?? e;
+    const u = (n === !1 ? null : n === "container" ? e : n === "first" ? y(e)[0] ?? e : n.current ?? null) ?? e;
     u && u.isConnected && !u.contains(document.activeElement) && (!u.hasAttribute("tabindex") && u.tagName !== "INPUT" && u.tagName !== "BUTTON" && u.tagName !== "TEXTAREA" && u.tagName !== "SELECT" && u.tagName !== "A" && !u.isContentEditable && u.setAttribute("tabindex", "-1"), u.focus());
-  }, [t, e, r]), s.useEffect(() => {
+  }, [t, e, n]), c.useEffect(() => {
     if (t) return;
-    const n = o.current;
-    !n || !c || (o.current = null, n.isConnected && n.focus());
-  }, [t, c]), s.useEffect(
+    const r = o.current;
+    !r || !s || (o.current = null, r.isConnected && r.focus());
+  }, [t, s]), c.useEffect(
     () => () => {
-      const n = o.current;
-      n && c && n.isConnected && n.focus();
+      const r = o.current;
+      r && s && r.isConnected && r.focus();
     },
-    [c]
-  ), s.useEffect(() => {
+    [s]
+  ), c.useEffect(() => {
     if (!t) return;
-    const n = (u) => {
+    const r = (u) => {
       if (u.key !== "Tab") return;
       const i = y(e);
       if (i.length === 0) {
         e && !e.contains(document.activeElement) && (u.preventDefault(), e.focus());
         return;
       }
-      const l = i[0], m = i[i.length - 1], d = document.activeElement;
+      const f = i[0], a = i[i.length - 1], d = document.activeElement;
       if (!d || !(e != null && e.contains(d))) {
-        u.preventDefault(), l.focus();
+        u.preventDefault(), f.focus();
         return;
       }
-      u.shiftKey && d === l ? (u.preventDefault(), m.focus()) : !u.shiftKey && d === m && (u.preventDefault(), l.focus());
+      u.shiftKey && d === f ? (u.preventDefault(), a.focus()) : !u.shiftKey && d === a && (u.preventDefault(), f.focus());
     };
-    return document.addEventListener("keydown", n, !0), () => document.removeEventListener("keydown", n, !0);
+    return document.addEventListener("keydown", r, !0), () => document.removeEventListener("keydown", r, !0);
   }, [t, e]);
 }
-function B({
+function D({
   open: t,
   onEscape: e,
-  modal: r = !0,
-  initialFocus: c = "first",
+  modal: n = !0,
+  initialFocus: s = "first",
   restoreFocus: o = !0
 }) {
-  const [n, u] = s.useState(null), { setElement: i, isTop: l } = w(t);
-  return R(t, l, () => e == null ? void 0 : e()), S(t && r), M(t && r && n != null, n), O({ active: t && r, container: n, initialFocus: c, restoreFocus: o }), { ref: s.useCallback(
+  const [r, u] = c.useState(null), { setElement: i, isTop: f } = A(t);
+  return R(t, f, () => e == null ? void 0 : e()), C(t && n), O(t && n && r != null, r), N({ active: t && n, container: r, initialFocus: s, restoreFocus: o }), { ref: c.useCallback(
     (d) => {
       u(d), i(d);
     },
     [i]
-  ), element: n, top: l };
+  ), element: r, top: f };
 }
-const D = {
+const K = {
   name: "useOverlay",
   props: [
     { name: "open", type: "boolean", default: null, control: "boolean" },
@@ -172,18 +196,19 @@ const D = {
   ]
 };
 export {
-  P as Portal,
+  x as Portal,
   y as getFocusable,
   k as isTopOverlay,
-  I as overlayCount,
-  D as overlayPropsMeta,
-  g as pushOverlay,
-  T as removeOverlay,
+  B as overlayCount,
+  K as overlayPropsMeta,
+  T as pushOverlay,
+  w as removeOverlay,
   R as useEscapeKey,
-  O as useFocusTrap,
-  M as useInertBackground,
-  B as useOverlay,
-  w as useOverlayStack,
-  x as useReducedMotion,
-  S as useScrollLock
+  N as useFocusTrap,
+  O as useInertBackground,
+  I as useMountTransition,
+  D as useOverlay,
+  A as useOverlayStack,
+  v as useReducedMotion,
+  C as useScrollLock
 };