@handamade/psi-react 0.8.0 → 0.9.0

package/dist/index.js

@@ -33,42 +33,42 @@ const O = "_button_c94w9_3", X = "_disabled_c94w9_30", J = "_size24_c94w9_44", Q
 function un({
   variant: e = "neutral",
   size: t = 32,
-  href: i,
+  href: s,
   target: a,
   rel: c,
-  disabled: o,
-  className: r,
+  disabled: r,
+  className: o,
   onClick: l,
   ref: d,
-  ...s
+  ...i
 }) {
   const u = [
     f.button,
     ue[e],
     de[t],
-    i !== void 0 && o ? f.disabled : void 0,
-    r
+    s !== void 0 && r ? f.disabled : void 0,
+    o
   ].filter(Boolean).join(" ");
-  return i !== void 0 ? /* @__PURE__ */ n(
+  return s !== void 0 ? /* @__PURE__ */ n(
     "a",
     {
       ref: d,
       className: u,
-      href: o ? void 0 : i,
+      href: r ? void 0 : s,
       target: a,
       rel: c,
-      "aria-disabled": o || void 0,
-      onClick: o ? void 0 : l,
-      ...s
+      "aria-disabled": r || void 0,
+      onClick: r ? void 0 : l,
+      ...i
     }
   ) : /* @__PURE__ */ n(
     "button",
     {
       ref: d,
       className: u,
-      disabled: o,
+      disabled: r,
       onClick: l,
-      ...s
+      ...i
     }
   );
 }
@@ -97,42 +97,42 @@ const _e = "_iconButton_129ca_3", he = "_disabled_129ca_29", pe = "_size24_129ca
 function Ce({
   variant: e = "neutral",
   size: t = 32,
-  href: i,
+  href: s,
   target: a,
   rel: c,
-  disabled: o,
-  className: r,
+  disabled: r,
+  className: o,
   onClick: l,
   ref: d,
-  ...s
+  ...i
 }) {
   const u = [
     w.iconButton,
     ke[e],
     xe[t],
-    i !== void 0 && o ? w.disabled : void 0,
-    r
+    s !== void 0 && r ? w.disabled : void 0,
+    o
   ].filter(Boolean).join(" ");
-  return i !== void 0 ? /* @__PURE__ */ n(
+  return s !== void 0 ? /* @__PURE__ */ n(
     "a",
     {
       ref: d,
       className: u,
-      href: o ? void 0 : i,
+      href: r ? void 0 : s,
       target: a,
       rel: c,
-      "aria-disabled": o || void 0,
-      onClick: o ? void 0 : l,
-      ...s
+      "aria-disabled": r || void 0,
+      onClick: r ? void 0 : l,
+      ...i
     }
   ) : /* @__PURE__ */ n(
     "button",
     {
       ref: d,
       className: u,
-      disabled: o,
+      disabled: r,
       onClick: l,
-      ...s
+      ...i
     }
   );
 }
@@ -147,19 +147,19 @@ const ze = "_card_1btb3_1", Le = "_stacked_1btb3_8", $e = "_featured_1btb3_10",
 function dn({
   variant: e = "stacked",
   media: t,
-  hoverLift: i = !1,
+  hoverLift: s = !1,
   className: a,
   children: c,
-  ref: o,
-  ...r
+  ref: r,
+  ...o
 }) {
   const l = [
     $.card,
     e === "featured" ? $.featured : $.stacked,
-    i ? $.hoverLift : void 0,
+    s ? $.hoverLift : void 0,
     a
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ h("div", { ref: o, className: l, ...r, children: [
+  return /* @__PURE__ */ h("div", { ref: r, className: l, ...o, children: [
     t != null && /* @__PURE__ */ n("div", { className: $.media, children: t }),
     /* @__PURE__ */ n("div", { className: $.body, children: c })
   ] });
@@ -168,9 +168,9 @@ const Ne = "_panel_jn8w4_1", Ie = "_padding16_jn8w4_8", q = {
   panel: Ne,
   padding16: Ie
 };
-function _n({ padding: e = 24, className: t, children: i, ref: a, ...c }) {
-  const o = [q.panel, e === 16 ? q.padding16 : void 0, t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n("div", { ref: a, className: o, ...c, children: i });
+function _n({ padding: e = 24, className: t, children: s, ref: a, ...c }) {
+  const r = [q.panel, e === 16 ? q.padding16 : void 0, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n("div", { ref: a, className: r, ...c, children: s });
 }
 const Me = "_navbar_1gyow_1", Ee = "_inner_1gyow_12", We = "_brand_1gyow_19", Ae = "_links_1gyow_20", De = "_actions_1gyow_50", M = {
   navbar: Me,
@@ -179,20 +179,20 @@ const Me = "_navbar_1gyow_1", Ee = "_inner_1gyow_12", We = "_brand_1gyow_19", Ae
   links: Ae,
   actions: De
 };
-function hn({ brand: e, actions: t, children: i, className: a, ref: c, ...o }) {
-  const r = [M.navbar, a].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n("header", { ref: c, className: r, ...o, children: /* @__PURE__ */ h("div", { className: `psi-container ${M.inner}`, children: [
+function hn({ brand: e, actions: t, children: s, className: a, ref: c, ...r }) {
+  const o = [M.navbar, a].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n("header", { ref: c, className: o, ...r, children: /* @__PURE__ */ h("div", { className: `psi-container ${M.inner}`, children: [
     e != null && /* @__PURE__ */ n("div", { className: M.brand, children: e }),
-    /* @__PURE__ */ n("nav", { className: M.links, children: i }),
+    /* @__PURE__ */ n("nav", { className: M.links, children: s }),
     t != null && /* @__PURE__ */ n("div", { className: M.actions, children: t })
   ] }) });
 }
 const He = "_frame_et4fc_1", Ve = {
   frame: He
 };
-function pn({ ratio: e, className: t, style: i, children: a, ref: c, ...o }) {
-  const r = [Ve.frame, t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n("div", { ref: c, className: r, style: { aspectRatio: String(e), ...i }, ...o, children: a });
+function pn({ ratio: e, className: t, style: s, children: a, ref: c, ...r }) {
+  const o = [Ve.frame, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n("div", { ref: c, className: o, style: { aspectRatio: String(e), ...s }, ...r, children: a });
 }
 const Pe = "_field_lplye_1", Te = "_label_lplye_10", Re = "_marker_lplye_16", qe = "_message_lplye_20", Ke = "_invalid_lplye_26", j = {
   field: Pe,
@@ -204,16 +204,16 @@ const Pe = "_field_lplye_1", Te = "_label_lplye_10", Re = "_marker_lplye_16", qe
 function gn({
   label: e,
   description: t,
-  error: i,
+  error: s,
   required: a = !1,
   group: c = !1,
-  htmlFor: o,
-  className: r,
+  htmlFor: r,
+  className: o,
   children: l,
   ref: d,
-  ...s
+  ...i
 }) {
-  const u = H(), p = o ?? u, _ = !!i, b = _ ? i : t, m = b != null && b !== !1 ? `${p}-message` : void 0, L = [j.field, _ && j.invalid, r].filter(Boolean).join(" "), g = e != null ? /* @__PURE__ */ h(V, { children: [
+  const u = H(), p = r ?? u, _ = !!s, b = _ ? s : t, m = b != null && b !== !1 ? `${p}-message` : void 0, L = [j.field, _ && j.invalid, o].filter(Boolean).join(" "), g = e != null ? /* @__PURE__ */ h(V, { children: [
     e,
     a && /* @__PURE__ */ n("span", { "aria-hidden": "true", className: j.marker, children: " *" })
   ] }) : null, W = /* @__PURE__ */ h(V, { children: [
@@ -227,10 +227,10 @@ function gn({
       ref: d,
       className: L,
       "aria-describedby": m,
-      ...s,
+      ...i,
       children: W
     }
-  ) : /* @__PURE__ */ n("div", { ref: d, className: L, ...s, children: W });
+  ) : /* @__PURE__ */ n("div", { ref: d, className: L, ...i, children: W });
 }
 function fn({ size: e = 20, ...t }) {
   return /* @__PURE__ */ h("svg", { width: e, height: e, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...t, children: [
@@ -370,14 +370,14 @@ const Ue = "_dialog_l23jf_2", Ye = "_w400_l23jf_31", Ze = "_w560_l23jf_32", Ge =
 function Dn({
   open: e,
   onClose: t,
-  title: i,
+  title: s,
   footer: a,
   width: c = 560,
-  dismissible: o = !0,
-  className: r,
+  dismissible: r = !0,
+  className: o,
   children: l,
   ref: d,
-  ...s
+  ...i
 }) {
   const u = z(null), p = H(), _ = (g) => {
     u.current = g, typeof d == "function" ? d(g) : d && (d.current = g);
@@ -393,23 +393,23 @@ function Dn({
     };
   }, [e]);
   const b = (g) => {
-    g.preventDefault(), o && t("esc");
+    g.preventDefault(), r && t("esc");
   }, m = (g) => {
-    o && g.target === u.current && t("backdrop");
-  }, L = [C.dialog, et[c], r].filter(Boolean).join(" ");
+    r && g.target === u.current && t("backdrop");
+  }, L = [C.dialog, et[c], o].filter(Boolean).join(" ");
   return /* @__PURE__ */ n(
     "dialog",
     {
       ref: _,
       className: L,
-      "aria-labelledby": i != null ? p : void 0,
+      "aria-labelledby": s != null ? p : void 0,
       onCancel: b,
       onClick: m,
-      ...s,
+      ...i,
       children: /* @__PURE__ */ h("div", { className: C.panel, children: [
-        (i != null || o) && /* @__PURE__ */ h("div", { className: C.header, children: [
-          i != null && /* @__PURE__ */ n("h2", { id: p, className: C.title, children: i }),
-          o && /* @__PURE__ */ n(
+        (s != null || r) && /* @__PURE__ */ h("div", { className: C.header, children: [
+          s != null && /* @__PURE__ */ n("h2", { id: p, className: C.title, children: s }),
+          r && /* @__PURE__ */ n(
             Ce,
             {
               variant: "ghost",
@@ -439,18 +439,19 @@ const tt = "_input_hpei8_3", nt = "_size24_hpei8_37", ot = "_size32_hpei8_43", r
   40: S.size40,
   48: S.size48
 };
-function Hn({ size: e = 32, error: t = !1, className: i, ref: a, ...c }) {
-  const o = P(T), r = t || ((o == null ? void 0 : o.invalid) ?? !1), l = [o == null ? void 0 : o.describedBy, c["aria-describedby"]].filter(Boolean).join(" ") || void 0, d = [S.input, at[e], r && S.error, i].filter(Boolean).join(" ");
+function Hn({ size: e = 32, error: t = !1, type: s = "text", className: a, ref: c, ...r }) {
+  const o = P(T), l = t || ((o == null ? void 0 : o.invalid) ?? !1), d = [o == null ? void 0 : o.describedBy, r["aria-describedby"]].filter(Boolean).join(" ") || void 0, i = [S.input, at[e], l && S.error, a].filter(Boolean).join(" ");
   return /* @__PURE__ */ n(
     "input",
     {
-      ref: a,
-      className: d,
-      id: c.id ?? (o == null ? void 0 : o.id),
-      required: c.required ?? ((o == null ? void 0 : o.required) || void 0),
+      ref: c,
+      className: i,
+      id: r.id ?? (o == null ? void 0 : o.id),
+      required: r.required ?? ((o == null ? void 0 : o.required) || void 0),
       "aria-invalid": (o == null ? void 0 : o.invalid) || void 0,
-      ...c,
-      "aria-describedby": l
+      type: s,
+      ...r,
+      "aria-describedby": d
     }
   );
 }
@@ -470,26 +471,26 @@ const ct = "_select_4x9ck_3", lt = "_size24_4x9ck_37", ut = "_size32_4x9ck_45",
 function Vn({
   size: e = 32,
   error: t = !1,
-  className: i,
+  className: s,
   ref: a,
   children: c,
-  ...o
+  ...r
 }) {
-  const r = P(T), l = t || ((r == null ? void 0 : r.invalid) ?? !1), d = [r == null ? void 0 : r.describedBy, o["aria-describedby"]].filter(Boolean).join(" ") || void 0, s = [
+  const o = P(T), l = t || ((o == null ? void 0 : o.invalid) ?? !1), d = [o == null ? void 0 : o.describedBy, r["aria-describedby"]].filter(Boolean).join(" ") || void 0, i = [
     N.select,
     pt[e],
     l && N.error,
-    i
+    s
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ n(
     "select",
     {
       ref: a,
-      className: s,
-      id: o.id ?? (r == null ? void 0 : r.id),
-      required: o.required ?? ((r == null ? void 0 : r.required) || void 0),
-      "aria-invalid": (r == null ? void 0 : r.invalid) || void 0,
-      ...o,
+      className: i,
+      id: r.id ?? (o == null ? void 0 : o.id),
+      required: r.required ?? ((o == null ? void 0 : o.required) || void 0),
+      "aria-invalid": (o == null ? void 0 : o.invalid) || void 0,
+      ...r,
       "aria-describedby": d,
       children: c
     }
@@ -505,19 +506,19 @@ const gt = "_label_1v4vv_3", ft = "_disabled_1v4vv_13", vt = "_input_1v4vv_20",
 function Pn({
   children: e,
   className: t,
-  disabled: i,
+  disabled: s,
   ref: a,
   ...c
 }) {
-  const o = [E.label, i && E.disabled, t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ h("label", { className: o, children: [
+  const r = [E.label, s && E.disabled, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ h("label", { className: r, children: [
     /* @__PURE__ */ n(
       "input",
       {
         ref: a,
         type: "checkbox",
         className: E.input,
-        disabled: i,
+        disabled: s,
         ...c
       }
     ),
@@ -536,12 +537,12 @@ const mt = "_label_jru2c_3", wt = "_disabled_jru2c_13", kt = "_input_jru2c_20",
 function Tn({
   children: e,
   className: t,
-  disabled: i,
+  disabled: s,
   ref: a,
   ...c
 }) {
-  const o = [B.label, i && B.disabled, t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ h("label", { className: o, children: [
+  const r = [B.label, s && B.disabled, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ h("label", { className: r, children: [
     /* @__PURE__ */ n(
       "input",
       {
@@ -549,7 +550,7 @@ function Tn({
         type: "checkbox",
         role: "switch",
         className: B.input,
-        disabled: i,
+        disabled: s,
         ...c
       }
     ),
@@ -586,21 +587,21 @@ const Lt = "_tag_3oysa_3", $t = "_dismiss_3oysa_17", jt = "_neutral_3oysa_43", B
 function Rn({
   variant: e = "neutral",
   subtle: t = !1,
-  onDismiss: i,
+  onDismiss: s,
   className: a,
   children: c,
-  ref: o,
-  ...r
+  ref: r,
+  ...o
 }) {
   const l = t ? Vt : Ht, d = [y.tag, l[e], a].filter(Boolean).join(" ");
-  return /* @__PURE__ */ h("span", { ref: o, className: d, ...r, children: [
+  return /* @__PURE__ */ h("span", { ref: r, className: d, ...o, children: [
     c,
-    i && /* @__PURE__ */ n(
+    s && /* @__PURE__ */ n(
       "button",
       {
         type: "button",
         className: y.dismiss,
-        onClick: i,
+        onClick: s,
         "aria-label": "Dismiss",
         children: /* @__PURE__ */ h(
           "svg",
@@ -640,27 +641,27 @@ const Pt = "_wrapper_1eu6z_3", Tt = "_tooltip_1eu6z_10", Rt = "_top_1eu6z_24", q
 function qn({
   content: e,
   children: t,
-  placement: i = "top"
+  placement: s = "top"
 }) {
-  const [a, c] = Z(!1), o = H(), r = z(void 0), l = k(() => {
-    r.current !== void 0 && (window.clearTimeout(r.current), r.current = void 0);
-  }, []), d = k(() => c(!0), []), s = k(() => c(!1), []);
+  const [a, c] = Z(!1), r = H(), o = z(void 0), l = k(() => {
+    o.current !== void 0 && (window.clearTimeout(o.current), o.current = void 0);
+  }, []), d = k(() => c(!0), []), i = k(() => c(!1), []);
   x(() => l, [l]), x(() => {
     if (!a) return;
     const p = (_) => {
-      _.key === "Escape" && s();
+      _.key === "Escape" && i();
     };
     return document.addEventListener("keydown", p), () => document.removeEventListener("keydown", p);
-  }, [a, s]);
+  }, [a, i]);
   const u = U(t, {
-    "aria-describedby": a ? o : void 0,
+    "aria-describedby": a ? r : void 0,
     onMouseEnter: (p) => {
-      l(), r.current = window.setTimeout(d, Yt);
+      l(), o.current = window.setTimeout(d, Yt);
       const _ = t.props.onMouseEnter;
       _ == null || _(p);
     },
     onMouseLeave: (p) => {
-      l(), s();
+      l(), i();
       const _ = t.props.onMouseLeave;
       _ == null || _(p);
     },
@@ -670,7 +671,7 @@ function qn({
       _ == null || _(p);
     },
     onBlur: (p) => {
-      l(), s();
+      l(), i();
       const _ = t.props.onBlur;
       _ == null || _(p);
     }
@@ -680,9 +681,9 @@ function qn({
     a && /* @__PURE__ */ n(
       "span",
       {
-        id: o,
+        id: r,
         role: "tooltip",
-        className: [I.tooltip, Ut[i]].filter(Boolean).join(" "),
+        className: [I.tooltip, Ut[s]].filter(Boolean).join(" "),
         children: e
       }
     )
@@ -694,95 +695,95 @@ const Zt = "_toolbar_1i848_1", Gt = "_gap8_1i848_7", Ot = "_gap12_1i848_8", Xt =
   gap12: Ot,
   gap16: Xt
 }, Jt = { 8: A.gap8, 12: A.gap12, 16: A.gap16 };
-function Kn({ gap: e = 8, className: t, children: i, ref: a, ...c }) {
-  const o = [A.toolbar, Jt[e], t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n("div", { ref: a, role: c["aria-label"] != null ? "group" : void 0, className: o, ...c, children: i });
+function Kn({ gap: e = 8, className: t, children: s, ref: a, ...c }) {
+  const r = [A.toolbar, Jt[e], t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n("div", { ref: a, role: c["aria-label"] != null ? "group" : void 0, className: r, ...c, children: s });
 }
-const Qt = "_trigger_1a54a_4", en = "_menu_1a54a_10", tn = "_item_1a54a_31", nn = "_separator_1a54a_68", D = {
+const Qt = "_trigger_vpa0u_4", en = "_menu_vpa0u_16", tn = "_item_vpa0u_37", nn = "_separator_vpa0u_74", D = {
   trigger: Qt,
   menu: en,
   item: tn,
   separator: nn
 }, on = 500;
-function rn({ popoverRef: e, triggerRef: t, open: i, onEsc: a }) {
-  const c = z(""), o = z(0), r = k(() => {
-    const s = e.current;
-    return s ? Array.from(
-      s.querySelectorAll('[data-psi-menu-item]:not([aria-disabled="true"])')
+function rn({ popoverRef: e, triggerRef: t, open: s, onEsc: a }) {
+  const c = z(""), r = z(0), o = k(() => {
+    const i = e.current;
+    return i ? Array.from(
+      i.querySelectorAll('[data-psi-menu-item]:not([aria-disabled="true"])')
     ) : [];
   }, [e]), l = k(
-    (s) => {
-      if (s) {
-        for (const u of r()) u.tabIndex = u === s ? 0 : -1;
-        s.focus();
+    (i) => {
+      if (i) {
+        for (const u of o()) u.tabIndex = u === i ? 0 : -1;
+        i.focus();
       }
     },
-    [r]
+    [o]
   ), d = k(() => {
     var u;
-    const s = (u = t.current) == null ? void 0 : u.querySelector("button, a, [tabindex]");
-    s == null || s.focus();
+    const i = (u = t.current) == null ? void 0 : u.querySelector("button, a, [tabindex]");
+    i == null || i.focus();
   }, [t]);
   return x(() => {
-    if (!i) return;
-    const s = r();
-    return l(s[0]), () => {
+    if (!s) return;
+    const i = o();
+    return l(i[0]), () => {
       var u;
       (u = e.current) != null && u.contains(document.activeElement) && d();
     };
-  }, [i, e, r, l, d]), k(
-    (s) => {
-      if (s.key === "Escape") {
-        s.preventDefault(), a();
+  }, [s, e, o, l, d]), k(
+    (i) => {
+      if (i.key === "Escape") {
+        i.preventDefault(), a();
         return;
       }
-      const u = r();
+      const u = o();
       if (u.length === 0) return;
       const p = u.indexOf(document.activeElement);
-      switch (s.key) {
+      switch (i.key) {
         case "ArrowDown":
-          s.preventDefault(), l(u[(p + 1 + u.length) % u.length]);
+          i.preventDefault(), l(u[(p + 1 + u.length) % u.length]);
           return;
         case "ArrowUp":
-          s.preventDefault(), l(u[p <= 0 ? u.length - 1 : p - 1]);
+          i.preventDefault(), l(u[p <= 0 ? u.length - 1 : p - 1]);
           return;
         case "Home":
-          s.preventDefault(), l(u[0]);
+          i.preventDefault(), l(u[0]);
           return;
         case "End":
-          s.preventDefault(), l(u[u.length - 1]);
+          i.preventDefault(), l(u[u.length - 1]);
           return;
       }
-      if (s.key.length !== 1 || s.metaKey || s.ctrlKey || s.altKey) return;
+      if (i.key.length !== 1 || i.metaKey || i.ctrlKey || i.altKey) return;
       const _ = Date.now();
-      c.current = _ - o.current > on ? s.key.toLowerCase() : c.current + s.key.toLowerCase(), o.current = _;
+      c.current = _ - r.current > on ? i.key.toLowerCase() : c.current + i.key.toLowerCase(), r.current = _;
       const b = u.find(
         (m) => (m.textContent ?? "").trim().toLowerCase().startsWith(c.current)
       );
-      b && (s.preventDefault(), l(b));
+      b && (i.preventDefault(), l(b));
     },
-    [r, l, a]
+    [o, l, a]
   );
 }
 function sn() {
   return typeof CSS < "u" && CSS.supports("anchor-name", "--x");
 }
-function an({ popoverRef: e, triggerRef: t, open: i, placement: a, anchorName: c }) {
+function an({ popoverRef: e, triggerRef: t, open: s, placement: a, anchorName: c }) {
   x(() => {
-    const o = t.current, r = e.current;
-    !o || !r || (o.style.setProperty("anchor-name", c), r.style.setProperty("position-anchor", c));
+    const r = t.current, o = e.current;
+    !r || !o || (r.style.setProperty("anchor-name", c), o.style.setProperty("position-anchor", c));
   }, [e, t, c]), x(() => {
-    if (!i || sn()) return;
-    const o = t.current, r = e.current;
-    if (!o || !r) return;
+    if (!s || sn()) return;
+    const r = t.current, o = e.current;
+    if (!r || !o) return;
     const l = () => {
-      const d = o.getBoundingClientRect(), s = a.startsWith("bottom"), u = a.endsWith("end"), p = getComputedStyle(o).direction === "rtl", _ = u !== p;
-      r.style.position = "fixed", r.style.top = s ? `${d.bottom}px` : "", r.style.bottom = s ? "" : `${window.innerHeight - d.top}px`, r.style.left = _ ? "" : `${d.left}px`, r.style.right = _ ? `${window.innerWidth - d.right}px` : "";
+      const d = r.getBoundingClientRect(), i = a.startsWith("bottom"), u = a.endsWith("end"), p = getComputedStyle(r).direction === "rtl", _ = u !== p;
+      o.style.position = "fixed", o.style.top = i ? `${d.bottom}px` : "", o.style.bottom = i ? "" : `${window.innerHeight - d.top}px`, o.style.left = _ ? "" : `${d.left}px`, o.style.right = _ ? `${window.innerWidth - d.right}px` : "";
     };
     return l(), window.addEventListener("scroll", l, !0), window.addEventListener("resize", l), () => {
       window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l);
     };
-  }, [i, a, e, t]);
+  }, [s, a, e, t]);
 }
 const Y = F({ close: () => {
 } });
@@ -792,17 +793,17 @@ function K(e) {
 function Fn({
   open: e,
   onClose: t,
-  trigger: i,
+  trigger: s,
   placement: a = "bottom-start",
   children: c,
-  className: o,
-  ref: r,
+  className: r,
+  ref: o,
   ...l
 }) {
-  const d = z(null), s = z(null), u = z(!1), p = `--psi-menu-${H().replace(/:/g, "")}`;
-  an({ popoverRef: d, triggerRef: s, open: e, placement: a, anchorName: p });
+  const d = z(null), i = z(null), u = z(!1), p = `--psi-menu-${H().replace(/:/g, "")}`;
+  an({ popoverRef: d, triggerRef: i, open: e, placement: a, anchorName: p });
   const _ = (v) => {
-    d.current = v, typeof r == "function" ? r(v) : r && (r.current = v);
+    d.current = v, typeof o == "function" ? o(v) : o && (o.current = v);
   };
   x(() => {
     const v = d.current;
@@ -817,11 +818,11 @@ function Fn({
         u.current = !1;
         return;
       }
-      K(v) || t("outside");
+      K(v) || e && t("outside");
     }
-  }, [t]), m = rn({
+  }, [t, e]), m = rn({
     popoverRef: d,
-    triggerRef: s,
+    triggerRef: i,
     open: e,
     onEsc: () => t("esc")
   }), L = k(
@@ -829,15 +830,15 @@ function Fn({
       t(v);
     },
     [t]
-  ), g = G(i);
+  ), g = G(s);
   x(() => {
     g || console.warn(
       "Psi Menu: `trigger` must be a single React element that forwards props to a focusable node. Menu clones it to attach aria-haspopup and aria-expanded; a string, fragment or array cannot carry them, so the menu renders without its trigger ARIA."
     );
   }, [g]);
-  const W = g ? U(i, { "aria-haspopup": "menu", "aria-expanded": e }) : i;
+  const W = g ? U(s, { "aria-haspopup": "menu", "aria-expanded": e }) : s;
   return /* @__PURE__ */ h(V, { children: [
-    /* @__PURE__ */ n("div", { ref: s, className: D.trigger, "data-psi-menu-trigger": !0, children: W }),
+    /* @__PURE__ */ n("div", { ref: i, className: D.trigger, "data-psi-menu-trigger": !0, children: W }),
     /* @__PURE__ */ n(
       "div",
       {
@@ -847,7 +848,7 @@ function Fn({
         role: "menu",
         "data-psi-menu": !0,
         "data-placement": a,
-        className: [D.menu, o].filter(Boolean).join(" "),
+        className: [D.menu, r].filter(Boolean).join(" "),
         onToggle: b,
         onKeyDown: m,
         children: /* @__PURE__ */ n(Y.Provider, { value: { close: L }, children: c })
@@ -855,7 +856,7 @@ function Fn({
     )
   ] });
 }
-function Un({ children: e, onSelect: t, variant: i = "neutral", disabled: a = !1 }) {
+function Un({ children: e, onSelect: t, variant: s = "neutral", disabled: a = !1 }) {
   const { close: c } = P(Y);
   return /* @__PURE__ */ n(
     "button",
@@ -863,7 +864,7 @@ function Un({ children: e, onSelect: t, variant: i = "neutral", disabled: a = !1
       type: "button",
       role: "menuitem",
       "data-psi-menu-item": !0,
-      "data-variant": i,
+      "data-variant": s,
       "aria-disabled": a || void 0,
       tabIndex: -1,
       className: D.item,