@blakesteve/roster 5.11.0 → 5.13.0

package/dist/components/molecules/Menu/Menu.js

@@ -2,18 +2,19 @@
 import { jsx as c, jsxs as N, Fragment as j } from "react/jsx-runtime";
 import * as i from "react";
 import { Portal as q } from "../../../node_modules/@headlessui/react/dist/components/portal/portal.js";
-import { useFloating as ge, offset as he, flip as be, shift as ye, size as ve } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
+import { useFloating as he, offset as be, flip as ye, shift as ve, size as we } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
 import { cn as S } from "../../../lib/utils.js";
-import { POPUP_PANEL as we } from "../../../internal/popup.js";
-import { Button as xe } from "../../atoms/Button/Button.js";
-import { nextByTypeahead as ke } from "./menu-typeahead.js";
-import { autoUpdate as Ie } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
-function Ee({ href: e, to: r, children: n, ...s }) {
+import { carriesDark as G, POPUP_PANEL as xe } from "../../../internal/popup.js";
+import { Button as ke } from "../../atoms/Button/Button.js";
+import { nextByTypeahead as Ie } from "./menu-typeahead.js";
+import { useKeyFocus as Ee } from "../../../internal/key-focus.js";
+import { autoUpdate as Se } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+function Pe({ href: e, to: r, children: n, ...s }) {
   return /* @__PURE__ */ c("a", { href: e, ...s, children: n });
 }
-const G = i.createContext(null), B = i.createContext(null), Y = i.createContext(null);
+const Y = i.createContext(null), B = i.createContext(null), X = i.createContext(null);
 function C(e) {
-  const r = i.useContext(G);
+  const r = i.useContext(Y);
   if (!r) throw new Error(`<${e}> must be inside a <Menu>.`);
   return r;
 }
@@ -22,9 +23,9 @@ function _(e) {
   if (!r) throw new Error(`<${e}> must be inside <MenuItems> or a <MenuSubmenu>.`);
   return r;
 }
-const Se = "[data-menu-item]", X = 100, Pe = 75, Me = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), summary, [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])';
-function D(e) {
-  return e ? [...e.querySelectorAll(Se)].filter((r) => r.closest("[data-menu-panel]") === e) : [];
+const Me = "[data-menu-item]", J = 100, Ae = 75, Te = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), summary, [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])';
+function R(e) {
+  return e ? [...e.querySelectorAll(Me)].filter((r) => r.closest("[data-menu-panel]") === e) : [];
 }
 function E(e) {
   e && (e.setAttribute("data-key-focus", ""), e.addEventListener("blur", () => e.removeAttribute("data-key-focus"), { once: !0 }), e.focus({ preventScroll: !0 }), e.scrollIntoView?.({ block: "nearest" }));
@@ -32,40 +33,40 @@ function E(e) {
 function z(e) {
   return !!e && getComputedStyle(e).direction === "rtl";
 }
-function Ae(e, r) {
-  const n = [...document.querySelectorAll(Me)].filter(
-    (t) => t === e || t.tabIndex >= 0 && !t.matches(":disabled") && !t.closest("[data-menu-panel], [inert]") && t.getClientRects().length > 0 && getComputedStyle(t).visibility !== "hidden" && !Te(t, r)
+function Ce(e, r) {
+  const n = [...document.querySelectorAll(Te)].filter(
+    (t) => t === e || t.tabIndex >= 0 && !t.matches(":disabled") && !t.closest("[data-menu-panel], [inert]") && t.getClientRects().length > 0 && getComputedStyle(t).visibility !== "hidden" && !De(t, r)
   ), s = n.indexOf(e);
   ((r ? n[s - 1] : n[s + 1]) ?? e).focus();
 }
-function Te(e, r) {
+function De(e, r) {
   if (!(e instanceof HTMLInputElement) || e.type !== "radio" || !e.name) return !1;
   const n = [...e.ownerDocument.querySelectorAll(`input[type="radio"][name="${CSS.escape(e.name)}"]`)].filter(
     (a) => a.form === e.form && !a.disabled
   );
   return (n.find((a) => a.checked) ?? (r ? n[n.length - 1] : n[0])) !== e;
 }
-const R = { x: Number.NaN, y: Number.NaN };
+const L = { x: Number.NaN, y: Number.NaN };
 let U = !1;
-function Ce() {
+function Le() {
   U || typeof window > "u" || (U = !0, window.addEventListener(
     "pointermove",
     (e) => {
-      R.x = e.clientX, R.y = e.clientY;
+      L.x = e.clientX, L.y = e.clientY;
     },
     { passive: !0 }
   ));
 }
-function J(e) {
-  return !Number.isNaN(R.x) && (e.clientX !== R.x || e.clientY !== R.y);
+function Q(e) {
+  return !Number.isNaN(L.x) && (e.clientX !== L.x || e.clientY !== L.y);
 }
-const V = (e) => `radial-gradient(farthest-side at 50% ${e === "top" ? "0" : "100%"}, var(--menu-edge), transparent)`, Q = {
+const V = (e) => `radial-gradient(farthest-side at 50% ${e === "top" ? "0" : "100%"}, var(--menu-edge), transparent)`, Z = {
   backgroundImage: "var(--menu-edge-top, none), var(--menu-edge-bottom, none)",
   backgroundPosition: "top, bottom",
   backgroundSize: "100% 0.5rem",
   backgroundRepeat: "no-repeat"
 };
-function Le(e) {
+function Re(e) {
   i.useLayoutEffect(() => {
     if (!e) return;
     const r = () => {
@@ -79,13 +80,13 @@ function Le(e) {
     };
   }, [e]);
 }
-function Z(e, r) {
+function ee(e, r) {
   const [n, s] = e.split("-"), a = r ? "right" : "left", t = r ? "left" : "right";
   return n === "top" || n === "bottom" ? `${n === "bottom" ? "top" : "bottom"} ${s === "end" ? t : s === "start" ? a : "center"}` : `${s === "end" ? "bottom" : "top"} ${n === "right" ? "left" : "right"}`;
 }
-const ee = /* @__PURE__ */ S(
+const te = /* @__PURE__ */ S(
   "rst:font-ui",
-  we,
+  xe,
   /* Its own width wherever it lands: a fixed panel sized by the room to its
      right resizes as it's placed, and the placement runs again. */
   "rst:w-max rst:min-w-48 rst:max-w-[min(20rem,calc(100vw-1rem))] rst:overflow-y-auto rst:overscroll-contain rst:custom-scrollbar",
@@ -97,7 +98,7 @@ const ee = /* @__PURE__ */ S(
      from the corner of the screen. */
   "rst:transition-[opacity,scale] rst:duration-100 rst:ease-out rst:data-closed:opacity-0 rst:data-closed:scale-95 rst:data-leaving:duration-75 rst:data-leaving:ease-in rst:data-closed:pointer-events-none rst:motion-reduce:transition-none"
 );
-function te(e) {
+function re(e) {
   const [r, n] = i.useState(e), [s, a] = i.useState(!0);
   return i.useLayoutEffect(() => {
     if (e) {
@@ -106,12 +107,12 @@ function te(e) {
       return () => cancelAnimationFrame(o);
     }
     a(!0);
-    const t = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, d = window.setTimeout(() => n(!1), t ? 0 : Pe);
+    const t = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, d = window.setTimeout(() => n(!1), t ? 0 : Ae);
     return () => window.clearTimeout(d);
   }, [e]), { mounted: r, closed: s, leaving: r && !e };
 }
-function re(e, r, n, s, a, t = !1) {
-  const [d, o] = i.useState(null), u = ge({
+function ne(e, r, n, s, a, t = !1) {
+  const [d, o] = i.useState(null), u = he({
     open: r,
     strategy: "fixed",
     /* Placed by top and left, not a transform: the entrance's scale would
@@ -119,12 +120,12 @@ function re(e, r, n, s, a, t = !1) {
     transform: !1,
     placement: n,
     elements: { reference: e },
-    whileElementsMounted: Ie,
+    whileElementsMounted: Se,
     middleware: [
-      he(s),
-      be({ padding: 8 }),
-      ye({ padding: 8, crossAxis: t }),
-      ve({
+      be(s),
+      ye({ padding: 8 }),
+      ve({ padding: 8, crossAxis: t }),
+      we({
         padding: 8,
         apply({ availableHeight: m, elements: l }) {
           l.floating.style.maxHeight = `min(var(--anchor-max-height, 100vh), ${Math.max(m, 96)}px)`;
@@ -137,14 +138,14 @@ function re(e, r, n, s, a, t = !1) {
     },
     [a, p]
   );
-  return Le(d), { ...u, setPanel: f, panelEl: d };
+  return Re(d), { ...u, setPanel: f, panelEl: d };
 }
-const ne = 500;
-function oe() {
-  const e = i.useRef({ text: "", at: 0 }), r = i.useCallback(() => e.current.text !== "" && performance.now() - e.current.at <= ne, []);
+const oe = 500;
+function se() {
+  const e = i.useRef({ text: "", at: 0 }), r = i.useCallback(() => e.current.text !== "" && performance.now() - e.current.at <= oe, []);
   return { typedRef: e, typingAhead: r };
 }
-function se({
+function ae({
   panelRef: e,
   typedRef: r,
   onEscape: n,
@@ -154,7 +155,7 @@ function se({
   return (t) => {
     const d = e.current;
     if (!d || !d.contains(t.target) || (!t.ctrlKey && !t.metaKey && !t.altKey && t.stopPropagation(), t.defaultPrevented)) return;
-    const o = D(d), u = o.indexOf(document.activeElement), p = z(d);
+    const o = R(d), u = o.indexOf(document.activeElement), p = z(d);
     switch (t.key) {
       case "ArrowDown":
         t.preventDefault(), t.stopPropagation(), E(o[(u + 1) % o.length]);
@@ -176,7 +177,7 @@ function se({
       case "Tab": {
         t.preventDefault(), t.stopPropagation();
         const f = a.triggerRef.current;
-        a.close(!1), f && Ae(f, t.shiftKey);
+        a.close(!1), f && Ce(f, t.shiftKey);
         return;
       }
       case "ArrowLeft":
@@ -185,15 +186,16 @@ function se({
         return;
     }
     if (t.key.length === 1 && !t.ctrlKey && !t.metaKey && !t.altKey) {
-      const f = performance.now(), m = r.current.text !== "" && f - r.current.at <= ne;
+      const f = performance.now(), m = r.current.text !== "" && f - r.current.at <= oe;
       if (t.key === " " && !m) return;
       t.preventDefault(), r.current = { text: m ? r.current.text + t.key : t.key, at: f };
-      const l = o.map((x) => x.dataset.menuText ?? x.textContent ?? ""), b = ke(l, u, r.current.text);
+      const l = o.map((x) => x.dataset.menuText ?? x.textContent ?? ""), b = Ie(l, u, r.current.text);
       b !== -1 && E(o[b]);
     }
   };
 }
-function Ue({ children: e, open: r, onOpenChange: n, linkComponent: s = Ee }) {
+function qe({ children: e, open: r, onOpenChange: n, linkComponent: s = Pe }) {
+  Ee();
   const [a, t] = i.useState(!1), d = r ?? a, o = i.useId(), u = i.useRef(null), [p, f] = i.useState(null), m = i.useCallback((g) => {
     u.current = g, f(g);
   }, []), l = i.useRef("panel"), b = i.useCallback(
@@ -223,16 +225,16 @@ function Ue({ children: e, open: r, onOpenChange: n, linkComponent: s = Ee }) {
   );
   return i.useEffect(() => {
     if (!d) return;
-    Ce();
+    Le();
     const g = (I) => {
       I.target?.closest?.(`[data-menu-tree="${o}"]`) || (b(!1), requestAnimationFrame(() => {
         (document.activeElement === document.body || !document.activeElement) && u.current?.focus({ preventScroll: !0 });
       }));
     };
     return document.addEventListener("pointerdown", g, !0), () => document.removeEventListener("pointerdown", g, !0);
-  }, [d, o, b]), /* @__PURE__ */ c(G.Provider, { value: x, children: e });
+  }, [d, o, b]), /* @__PURE__ */ c(Y.Provider, { value: x, children: e });
 }
-const Ve = i.forwardRef(function({ plain: r = !1, className: n, onClick: s, onKeyDown: a, children: t, ...d }, o) {
+const Ge = i.forwardRef(function({ plain: r = !1, className: n, onClick: s, onKeyDown: a, children: t, ...d }, o) {
   const { variant: u, colorScheme: p, size: f, isLoading: m, loadingLabel: l, startIcon: b, endIcon: x, surface: g, ...I } = d, h = C("MenuButton"), { registerTrigger: P } = h, M = i.useCallback(
     (y) => {
       P(y), typeof o == "function" ? o(y) : o && (o.current = y);
@@ -254,8 +256,8 @@ const Ve = i.forwardRef(function({ plain: r = !1, className: n, onClick: s, onKe
       y.preventDefault();
       const k = h.open ? document.getElementById(h.panelId) : null;
       if (k) {
-        const L = D(k);
-        E(v === "last" ? L[L.length - 1] : L[0]);
+        const D = R(k);
+        E(v === "last" ? D[D.length - 1] : D[0]);
         return;
       }
       h.openWith(v);
@@ -264,7 +266,7 @@ const Ve = i.forwardRef(function({ plain: r = !1, className: n, onClick: s, onKe
   return r ? /* @__PURE__ */ c("button", { ref: M, type: "button", className: n, ...I, ...A, children: t }) : (
     /* min 44 by 44 whatever the size: the target a finger needs. */
     /* @__PURE__ */ c(
-      xe,
+      ke,
       {
         ref: M,
         className: S("rst:min-h-11 rst:min-w-11", n),
@@ -283,11 +285,11 @@ const Ve = i.forwardRef(function({ plain: r = !1, className: n, onClick: s, onKe
     )
   );
 });
-function je({ children: e, align: r = "start", offset: n = 4, className: s, ...a }) {
-  const t = C("MenuItems"), { mounted: d, closed: o, leaving: u } = te(t.open), p = i.useRef(null), f = z(t.triggerEl), { setPanel: m, panelEl: l, floatingStyles: b, placement: x, isPositioned: g } = re(t.triggerEl, d, `bottom-${r}`, n, p), I = ae(), { typedRef: h, typingAhead: P } = oe(), M = se({ panelRef: p, typedRef: h, onEscape: () => t.close(!0) });
+function Ye({ children: e, align: r = "start", offset: n = 4, className: s, ...a }) {
+  const t = C("MenuItems"), { mounted: d, closed: o, leaving: u } = re(t.open), p = i.useRef(null), f = z(t.triggerEl), { setPanel: m, panelEl: l, floatingStyles: b, placement: x, isPositioned: g } = ne(t.triggerEl, d, `bottom-${r}`, n, p), I = ie(), { typedRef: h, typingAhead: P } = se(), M = ae({ panelRef: p, typedRef: h, onEscape: () => t.close(!0) });
   i.useLayoutEffect(() => {
     if (!t.open || !l) return;
-    const v = D(l), k = t.focusOnOpen.current;
+    const v = R(l), k = t.focusOnOpen.current;
     k === "first" && v[0] ? E(v[0]) : k === "last" && v.length ? E(v[v.length - 1]) : l.focus({ preventScroll: !0 });
   }, [t.open, l, t.focusOnOpen]), i.useLayoutEffect(() => {
     if (!g || !l) return;
@@ -301,7 +303,7 @@ function je({ children: e, align: r = "start", offset: n = 4, className: s, ...a
     k && !k.closest(`[data-menu-tree="${t.treeId}"]`) && t.close(!1);
   };
   if (!d) return null;
-  const y = !!t.triggerEl?.closest(".dark");
+  const y = G(t.triggerEl);
   return /* @__PURE__ */ c(q, { children: /* @__PURE__ */ c(B.Provider, { value: { ...I, panelRef: p, typingAhead: P }, children: /* @__PURE__ */ c(
     "div",
     {
@@ -318,13 +320,13 @@ function je({ children: e, align: r = "start", offset: n = 4, className: s, ...a
       "data-leaving": u ? "" : void 0,
       onKeyDown: M,
       onBlur: A,
-      style: { ...b, ...Q, transformOrigin: Z(x, f) },
-      className: S(y && "dark", ee, s),
+      style: { ...b, ...Z, transformOrigin: ee(x, f) },
+      className: S(y && "dark", te, s),
       children: e
     }
   ) }) });
 }
-function ae() {
+function ie() {
   const [e, r] = i.useState(null), n = i.useRef(!1), s = i.useRef(void 0);
   return i.useEffect(() => () => window.clearTimeout(s.current), []), {
     openSubmenu: e,
@@ -333,7 +335,7 @@ function ae() {
       window.clearTimeout(s.current), n.current = t, r(a);
     },
     hoverItem: (a) => {
-      window.clearTimeout(s.current), a === null && (s.current = window.setTimeout(() => r(null), X));
+      window.clearTimeout(s.current), a === null && (s.current = window.setTimeout(() => r(null), J));
     }
   };
 }
@@ -351,7 +353,7 @@ const O = /* @__PURE__ */ S(
      leaves, which only the keyboard's paths set. */
   "rst:data-key-focus:ring-2 rst:data-key-focus:ring-inset rst:data-key-focus:ring-ring",
   "rst:aria-disabled:opacity-50 rst:aria-disabled:cursor-not-allowed"
-), H = "rst:text-error-600 rst:dark:text-error-400 rst:focus:bg-error-50 rst:focus:text-error-700 rst:dark:focus:bg-error-900/30 rst:dark:focus:text-error-300", Re = () => /* @__PURE__ */ c("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ c("path", { d: "M3.5 8.5 6.5 11.5 12.5 4.5" }) }), De = () => /* @__PURE__ */ c("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", children: /* @__PURE__ */ c("circle", { cx: "8", cy: "8", r: "3.5", fill: "currentColor" }) }), Ne = () => /* @__PURE__ */ c("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "rst:rtl:rotate-180", children: /* @__PURE__ */ c("path", { d: "M6 3.5 10.5 8 6 12.5" }) });
+), F = "rst:text-error-600 rst:dark:text-error-400 rst:focus:bg-error-50 rst:focus:text-error-700 rst:dark:focus:bg-error-900/30 rst:dark:focus:text-error-300", Ne = () => /* @__PURE__ */ c("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ c("path", { d: "M3.5 8.5 6.5 11.5 12.5 4.5" }) }), Oe = () => /* @__PURE__ */ c("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", children: /* @__PURE__ */ c("circle", { cx: "8", cy: "8", r: "3.5", fill: "currentColor" }) }), Ke = () => /* @__PURE__ */ c("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "rst:rtl:rotate-180", children: /* @__PURE__ */ c("path", { d: "M6 3.5 10.5 8 6 12.5" }) });
 function T({ icon: e, shortcut: r, description: n, badge: s, children: a }, t, d, o) {
   const u = t ?? e;
   return /* @__PURE__ */ N(j, { children: [
@@ -366,7 +368,7 @@ function T({ icon: e, shortcut: r, description: n, badge: s, children: a }, t, d
     d
   ] });
 }
-function F({
+function H({
   disabled: e,
   closeOnSelect: r,
   onChoose: n,
@@ -388,12 +390,12 @@ function F({
       }
     },
     onPointerMove: (o) => {
-      J(o) && (t.hoverItem(null), document.activeElement !== o.currentTarget && o.currentTarget.focus({ preventScroll: !0 }));
+      Q(o) && (t.hoverItem(null), document.activeElement !== o.currentTarget && o.currentTarget.focus({ preventScroll: !0 }));
     }
   };
 }
-function qe({ onSelect: e, href: r, closeOnSelect: n = !0, disabled: s, destructive: a, keyshortcuts: t, textValue: d, className: o, ...u }) {
-  const p = C("MenuItem"), f = _("MenuItem"), m = i.useId(), l = F({ disabled: s, closeOnSelect: n, onChoose: (g) => e?.(g) }), b = S(O, a && H, o), x = {
+function Xe({ onSelect: e, href: r, closeOnSelect: n = !0, disabled: s, destructive: a, keyshortcuts: t, textValue: d, className: o, ...u }) {
+  const p = C("MenuItem"), f = _("MenuItem"), m = i.useId(), l = H({ disabled: s, closeOnSelect: n, onChoose: (g) => e?.(g) }), b = S(O, a && F, o), x = {
     role: "menuitem",
     tabIndex: -1,
     "aria-disabled": s ? !0 : void 0,
@@ -426,8 +428,8 @@ function qe({ onSelect: e, href: r, closeOnSelect: n = !0, disabled: s, destruct
   }
   return /* @__PURE__ */ c("button", { type: "button", className: b, ...x, ...l, children: T(u, void 0, void 0, m) });
 }
-function Ge({ checked: e, onCheckedChange: r, indicator: n, closeOnSelect: s = !0, disabled: a, destructive: t, keyshortcuts: d, textValue: o, className: u, ...p }) {
-  const f = F({ disabled: a, closeOnSelect: s, spaceKeepsOpen: !0, onChoose: () => r(!e) }), m = i.useId();
+function Je({ checked: e, onCheckedChange: r, indicator: n, closeOnSelect: s = !0, disabled: a, destructive: t, keyshortcuts: d, textValue: o, className: u, ...p }) {
+  const f = H({ disabled: a, closeOnSelect: s, spaceKeepsOpen: !0, onChoose: () => r(!e) }), m = i.useId();
   return /* @__PURE__ */ c(
     "button",
     {
@@ -440,19 +442,19 @@ function Ge({ checked: e, onCheckedChange: r, indicator: n, closeOnSelect: s = !
       "aria-keyshortcuts": d,
       "data-menu-item": "",
       "data-menu-text": o,
-      className: S(O, t && H, u),
+      className: S(O, t && F, u),
       ...f,
-      children: n === void 0 ? T(p, /* @__PURE__ */ c("span", { className: e ? void 0 : "rst:invisible", "data-menu-check": "", children: /* @__PURE__ */ c(Re, {}) }), void 0, m) : T(p, void 0, /* @__PURE__ */ c("span", { "aria-hidden": "true", className: "rst:ms-auto rst:flex rst:shrink-0 rst:items-center", children: n }), m)
+      children: n === void 0 ? T(p, /* @__PURE__ */ c("span", { className: e ? void 0 : "rst:invisible", "data-menu-check": "", children: /* @__PURE__ */ c(Ne, {}) }), void 0, m) : T(p, void 0, /* @__PURE__ */ c("span", { "aria-hidden": "true", className: "rst:ms-auto rst:flex rst:shrink-0 rst:items-center", children: n }), m)
     }
   );
 }
-function Ye({ value: e, onValueChange: r, label: n, children: s, className: a }) {
-  return /* @__PURE__ */ c(Y.Provider, { value: { value: e, onValueChange: r }, children: /* @__PURE__ */ c(Oe, { label: n, className: a, children: s }) });
+function Qe({ value: e, onValueChange: r, label: n, children: s, className: a }) {
+  return /* @__PURE__ */ c(X.Provider, { value: { value: e, onValueChange: r }, children: /* @__PURE__ */ c($e, { label: n, className: a, children: s }) });
 }
-function Xe({ value: e, closeOnSelect: r = !0, disabled: n, destructive: s, keyshortcuts: a, textValue: t, className: d, ...o }) {
-  const u = i.useContext(Y);
+function Ze({ value: e, closeOnSelect: r = !0, disabled: n, destructive: s, keyshortcuts: a, textValue: t, className: d, ...o }) {
+  const u = i.useContext(X);
   if (!u) throw new Error("<MenuRadioItem> must be inside a <MenuRadioGroup>.");
-  const p = u.value === e, f = F({ disabled: n, closeOnSelect: r, spaceKeepsOpen: !0, onChoose: () => u.onValueChange?.(e) }), m = i.useId();
+  const p = u.value === e, f = H({ disabled: n, closeOnSelect: r, spaceKeepsOpen: !0, onChoose: () => u.onValueChange?.(e) }), m = i.useId();
   return /* @__PURE__ */ c(
     "button",
     {
@@ -465,13 +467,13 @@ function Xe({ value: e, closeOnSelect: r = !0, disabled: n, destructive: s, keys
       "aria-keyshortcuts": a,
       "data-menu-item": "",
       "data-menu-text": t,
-      className: S(O, s && H, d),
+      className: S(O, s && F, d),
       ...f,
-      children: T(o, /* @__PURE__ */ c("span", { className: p ? void 0 : "rst:invisible", "data-menu-check": "", children: /* @__PURE__ */ c(De, {}) }), void 0, m)
+      children: T(o, /* @__PURE__ */ c("span", { className: p ? void 0 : "rst:invisible", "data-menu-check": "", children: /* @__PURE__ */ c(Oe, {}) }), void 0, m)
     }
   );
 }
-function Oe({ label: e, children: r, className: n }) {
+function $e({ label: e, children: r, className: n }) {
   const s = i.useId();
   return /* @__PURE__ */ N("div", { role: "group", "aria-labelledby": e ? s : void 0, className: n, children: [
     e && /* @__PURE__ */ c(
@@ -486,36 +488,36 @@ function Oe({ label: e, children: r, className: n }) {
     r
   ] });
 }
-function Je({ className: e }) {
+function et({ className: e }) {
   return /* @__PURE__ */ c("div", { role: "separator", className: S("rst:my-1 rst:h-[var(--roster-border-width,1px)] rst:bg-[var(--roster-popover-border)]", e) });
 }
-function Qe({ label: e, children: r, icon: n, disabled: s, textValue: a, className: t, panelClassName: d }) {
+function tt({ label: e, children: r, icon: n, disabled: s, textValue: a, className: t, panelClassName: d }) {
   const o = C("MenuSubmenu"), u = _("MenuSubmenu"), p = i.useId(), f = `${p}-item`, m = `${p}-menu`, l = u.openSubmenu === f, b = i.useRef(null), [x, g] = i.useState(null), I = i.useCallback((w) => {
     b.current = w, g(w);
-  }, []), h = i.useRef(null), P = i.useRef(void 0), M = i.useRef("mouse"), { mounted: A, closed: y, leaving: v } = te(l), k = z(x), { setPanel: L, panelEl: K, floatingStyles: ie, placement: ue } = re(
+  }, []), h = i.useRef(null), P = i.useRef(void 0), M = i.useRef("mouse"), { mounted: A, closed: y, leaving: v } = re(l), k = z(x), { setPanel: D, panelEl: K, floatingStyles: ue, placement: ce } = ne(
     x,
     A,
     k ? "left-start" : "right-start",
     { mainAxis: 0, alignmentAxis: -4 },
     h,
     !0
-  ), ce = ae();
+  ), le = ie();
   i.useEffect(() => () => window.clearTimeout(P.current), []);
   const W = () => {
     u.setOpenSubmenu(null), E(b.current);
-  }, { typedRef: le, typingAhead: de } = oe(), me = se({ panelRef: h, typedRef: le, onEscape: W, onBack: W });
+  }, { typedRef: de, typingAhead: me } = se(), fe = ae({ panelRef: h, typedRef: de, onEscape: W, onBack: W });
   i.useLayoutEffect(() => {
-    !l || !K || u.focusFirstInSubmenu.current && E(D(K)[0]);
+    !l || !K || u.focusFirstInSubmenu.current && E(R(K)[0]);
   }, [l, K, u.focusFirstInSubmenu]);
   const $ = (w) => {
     if (!s) {
       if (l && w && h.current) {
-        E(D(h.current)[0]);
+        E(R(h.current)[0]);
         return;
       }
       u.setOpenSubmenu(f, w);
     }
-  }, fe = !!o.triggerEl?.closest(".dark");
+  }, pe = G(o.triggerEl);
   return /* @__PURE__ */ N(j, { children: [
     /* @__PURE__ */ c(
       "button",
@@ -538,20 +540,20 @@ function Qe({ label: e, children: r, icon: n, disabled: s, textValue: a, classNa
         },
         onClick: () => l && M.current !== "mouse" ? u.setOpenSubmenu(null) : $(!1),
         onKeyDown: (w) => {
-          const pe = k ? "ArrowLeft" : "ArrowRight";
-          w.key === " " && u.typingAhead() || (w.key === pe || w.key === "Enter" || w.key === " ") && (w.preventDefault(), $(!0));
+          const ge = k ? "ArrowLeft" : "ArrowRight";
+          w.key === " " && u.typingAhead() || (w.key === ge || w.key === "Enter" || w.key === " ") && (w.preventDefault(), $(!0));
         },
         onPointerMove: (w) => {
-          J(w) && (u.hoverItem(f), document.activeElement !== w.currentTarget && w.currentTarget.focus({ preventScroll: !0 }), !l && !s && (window.clearTimeout(P.current), P.current = window.setTimeout(() => $(!1), X)));
+          Q(w) && (u.hoverItem(f), document.activeElement !== w.currentTarget && w.currentTarget.focus({ preventScroll: !0 }), !l && !s && (window.clearTimeout(P.current), P.current = window.setTimeout(() => $(!1), J)));
         },
         onPointerLeave: () => window.clearTimeout(P.current),
-        children: T({ icon: n, children: e }, void 0, /* @__PURE__ */ c("span", { "aria-hidden": "true", className: "rst:ms-auto rst:flex rst:shrink-0 rst:items-center rst:opacity-70", "data-menu-chevron": "", children: /* @__PURE__ */ c(Ne, {}) }))
+        children: T({ icon: n, children: e }, void 0, /* @__PURE__ */ c("span", { "aria-hidden": "true", className: "rst:ms-auto rst:flex rst:shrink-0 rst:items-center rst:opacity-70", "data-menu-chevron": "", children: /* @__PURE__ */ c(Ke, {}) }))
       }
     ),
-    A && /* @__PURE__ */ c(q, { children: /* @__PURE__ */ c(B.Provider, { value: { ...ce, panelRef: h, typingAhead: de }, children: /* @__PURE__ */ c(
+    A && /* @__PURE__ */ c(q, { children: /* @__PURE__ */ c(B.Provider, { value: { ...le, panelRef: h, typingAhead: me }, children: /* @__PURE__ */ c(
       "div",
       {
-        ref: L,
+        ref: D,
         id: m,
         dir: k ? "rtl" : "ltr",
         role: "menu",
@@ -561,24 +563,24 @@ function Qe({ label: e, children: r, icon: n, disabled: s, textValue: a, classNa
         "data-menu-tree": o.treeId,
         "data-closed": y ? "" : void 0,
         "data-leaving": v ? "" : void 0,
-        onKeyDown: me,
+        onKeyDown: fe,
         onPointerEnter: () => u.hoverItem(f),
-        style: { ...ie, ...Q, transformOrigin: Z(ue, k) },
-        className: S(fe && "dark", ee, d),
+        style: { ...ue, ...Z, transformOrigin: ee(ce, k) },
+        className: S(pe && "dark", te, d),
         children: r
       }
     ) }) })
   ] });
 }
 export {
-  Ue as Menu,
-  Ve as MenuButton,
-  Ge as MenuCheckboxItem,
-  Oe as MenuGroup,
-  qe as MenuItem,
-  je as MenuItems,
-  Ye as MenuRadioGroup,
-  Xe as MenuRadioItem,
-  Je as MenuSeparator,
-  Qe as MenuSubmenu
+  qe as Menu,
+  Ge as MenuButton,
+  Je as MenuCheckboxItem,
+  $e as MenuGroup,
+  Xe as MenuItem,
+  Ye as MenuItems,
+  Qe as MenuRadioGroup,
+  Ze as MenuRadioItem,
+  et as MenuSeparator,
+  tt as MenuSubmenu
 };

package/dist/components/molecules/RadioGroup/RadioGroup.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const m=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),D=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),p=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),v=require("../../../node_modules/@headlessui/react/dist/components/radio-group/radio-group.cjs"),r=require("../../../lib/utils.cjs"),f=require("../../../internal/field-invalid.cjs"),c=require("./radio-group-variants.cjs"),E={sm:"rst:text-xs",md:"rst:text-sm",lg:"rst:text-base"},O=({options:y,value:j,onChange:b,label:n,helperText:d,errorMessage:l,disabled:e=!1,size:h="md",orientation:i="vertical",colorScheme:N,className:q,optionsClassName:g,optionClassName:G,radioClassName:w,labelClassName:z,optionLabelClassName:R,descriptionClassName:S,messageClassName:V,"aria-invalid":k,...x})=>{const u=!!l,I=f.isFieldInvalid(u,{...x,"aria-invalid":k}),L=f.withoutInvalidProps(x),a=h??"md";return t.jsxs(v.RadioGroup,{value:j,onChange:b,disabled:e,className:r.cn("rst:font-ui rst:flex rst:flex-col rst:gap-1.5 rst:min-w-0",q),...L,"aria-invalid":I||void 0,"aria-orientation":i,children:[n&&t.jsx(p.Label,{className:r.cn("rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left",e&&"rst:opacity-50",z),children:n}),t.jsx("div",{className:r.cn(c.radioGroupOptionsVariants({size:a,orientation:i}),g),children:y.map(s=>t.jsxs(D.Field,{disabled:e||s.disabled,className:r.cn(c.radioOptionVariants({orientation:i,size:a}),G),children:[t.jsx(v.Radio,{value:s.value,className:({checked:o})=>r.cn(c.radioVariants({colorScheme:N,size:a,checked:o}),"rst:self-start",e||s.disabled?"rst:opacity-50 rst:cursor-not-allowed":"rst:cursor-pointer",w),children:({checked:o})=>t.jsx("span",{className:r.cn(c.radioDotVariants({size:a}),o?"rst:opacity-100":"rst:opacity-0")})}),t.jsxs("div",{className:r.cn("rst:flex rst:min-w-0 rst:flex-col",i==="vertical"&&"rst:flex-1"),children:[t.jsx(p.Label,{className:r.cn("rst:cursor-pointer rst:select-none","rst:text-[var(--roster-control-text)]","rst:data-disabled:cursor-not-allowed rst:data-disabled:opacity-50",E[a],R),children:s.label}),s.description&&t.jsx(m.Description,{className:r.cn("rst:text-xs rst:text-gray-500 rst:dark:text-gray-400 rst:data-disabled:opacity-50",S),children:s.description})]})]},s.value))}),(d||l)&&t.jsx(m.Description,{as:"p",className:r.cn("rst:text-xs rst:text-left",u?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400",e&&"rst:opacity-50",V),children:l||d})]})};exports.RadioGroup=O;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const m=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),L=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),p=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),v=require("../../../node_modules/@headlessui/react/dist/components/radio-group/radio-group.cjs"),r=require("../../../lib/utils.cjs"),f=require("../../../internal/field-invalid.cjs"),c=require("./radio-group-variants.cjs"),D=require("../../../internal/key-focus.cjs"),E={sm:"rst:text-xs",md:"rst:text-sm",lg:"rst:text-base"},O=({options:y,value:j,onChange:b,label:n,helperText:d,errorMessage:l,disabled:e=!1,size:h="md",orientation:i="vertical",colorScheme:q,className:N,optionsClassName:g,optionClassName:G,radioClassName:k,labelClassName:w,optionLabelClassName:z,descriptionClassName:R,messageClassName:S,"aria-invalid":V,...u})=>{D.useKeyFocus();const x=!!l,F=f.isFieldInvalid(x,{...u,"aria-invalid":V}),I=f.withoutInvalidProps(u),a=h??"md";return t.jsxs(v.RadioGroup,{value:j,onChange:b,disabled:e,className:r.cn("rst:font-ui rst:flex rst:flex-col rst:gap-1.5 rst:min-w-0",N),...I,"aria-invalid":F||void 0,"aria-orientation":i,children:[n&&t.jsx(p.Label,{className:r.cn("rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left",e&&"rst:opacity-50",w),children:n}),t.jsx("div",{className:r.cn(c.radioGroupOptionsVariants({size:a,orientation:i}),g),children:y.map(s=>t.jsxs(L.Field,{disabled:e||s.disabled,className:r.cn(c.radioOptionVariants({orientation:i,size:a}),G),children:[t.jsx(v.Radio,{value:s.value,className:({checked:o})=>r.cn(c.radioVariants({colorScheme:q,size:a,checked:o}),"rst:self-start",e||s.disabled?"rst:opacity-50 rst:cursor-not-allowed":"rst:cursor-pointer",k),children:({checked:o})=>t.jsx("span",{className:r.cn(c.radioDotVariants({size:a}),o?"rst:opacity-100":"rst:opacity-0")})}),t.jsxs("div",{className:r.cn("rst:flex rst:min-w-0 rst:flex-col",i==="vertical"&&"rst:flex-1"),children:[t.jsx(p.Label,{className:r.cn("rst:cursor-pointer rst:select-none","rst:text-[var(--roster-control-text)]","rst:data-disabled:cursor-not-allowed rst:data-disabled:opacity-50",E[a],z),children:s.label}),s.description&&t.jsx(m.Description,{className:r.cn("rst:text-xs rst:text-gray-500 rst:dark:text-gray-400 rst:data-disabled:opacity-50",R),children:s.description})]})]},s.value))}),(d||l)&&t.jsx(m.Description,{as:"p",className:r.cn("rst:text-xs rst:text-left",x?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400",e&&"rst:opacity-50",S),children:l||d})]})};exports.RadioGroup=O;

package/dist/components/molecules/RadioGroup/RadioGroup.js

@@ -2,17 +2,18 @@
 import { jsxs as c, jsx as s } from "react/jsx-runtime";
 import "react";
 import { Description as p } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
-import { Field as S } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
+import { Field as R } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
 import { Label as f } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
-import { RadioGroup as j, Radio as D } from "../../../node_modules/@headlessui/react/dist/components/radio-group/radio-group.js";
+import { RadioGroup as S, Radio as j } from "../../../node_modules/@headlessui/react/dist/components/radio-group/radio-group.js";
 import { cn as t } from "../../../lib/utils.js";
-import { isFieldInvalid as F, withoutInvalidProps as O } from "../../../internal/field-invalid.js";
-import { radioDotVariants as P, radioVariants as Z, radioOptionVariants as A, radioGroupOptionsVariants as B } from "./radio-group-variants.js";
-const K = {
+import { isFieldInvalid as D, withoutInvalidProps as K } from "../../../internal/field-invalid.js";
+import { radioDotVariants as O, radioVariants as P, radioOptionVariants as Z, radioGroupOptionsVariants as A } from "./radio-group-variants.js";
+import { useKeyFocus as B } from "../../../internal/key-focus.js";
+const W = {
   sm: "rst:text-xs",
   md: "rst:text-sm",
   lg: "rst:text-base"
-}, Y = ({
+}, M = ({
   options: u,
   value: v,
   onChange: y,
@@ -30,13 +31,14 @@ const K = {
   labelClassName: k,
   optionLabelClassName: V,
   descriptionClassName: E,
-  messageClassName: G,
-  "aria-invalid": I,
+  messageClassName: F,
+  "aria-invalid": G,
   ...n
 }) => {
-  const x = !!o, L = F(x, { ...n, "aria-invalid": I }), R = O(n), e = h ?? "md";
+  B();
+  const x = !!o, I = D(x, { ...n, "aria-invalid": G }), L = K(n), e = h ?? "md";
   return /* @__PURE__ */ c(
-    j,
+    S,
     {
       value: v,
       onChange: y,
@@ -45,8 +47,8 @@ const K = {
         "rst:font-ui rst:flex rst:flex-col rst:gap-1.5 rst:min-w-0",
         b
       ),
-      ...R,
-      "aria-invalid": L || void 0,
+      ...L,
+      "aria-invalid": I || void 0,
       "aria-orientation": i,
       children: [
         d && /* @__PURE__ */ s(
@@ -64,24 +66,24 @@ const K = {
           "div",
           {
             className: t(
-              B({ size: e, orientation: i }),
+              A({ size: e, orientation: i }),
               g
             ),
             children: u.map((r) => /* @__PURE__ */ c(
-              S,
+              R,
               {
                 disabled: a || r.disabled,
                 className: t(
-                  A({ orientation: i, size: e }),
+                  Z({ orientation: i, size: e }),
                   w
                 ),
                 children: [
                   /* @__PURE__ */ s(
-                    D,
+                    j,
                     {
                       value: r.value,
                       className: ({ checked: l }) => t(
-                        Z({ colorScheme: N, size: e, checked: l }),
+                        P({ colorScheme: N, size: e, checked: l }),
                         /* `self-start`, and no nudge. The circle's height equals the
                            label's line-height at every size, so aligning their top
                            edges puts the radio on the first line whether the label
@@ -94,7 +96,7 @@ const K = {
                         "span",
                         {
                           className: t(
-                            P({ size: e }),
+                            O({ size: e }),
                             l ? "rst:opacity-100" : "rst:opacity-0"
                           )
                         }
@@ -120,7 +122,7 @@ const K = {
                               "rst:cursor-pointer rst:select-none",
                               "rst:text-[var(--roster-control-text)]",
                               "rst:data-disabled:cursor-not-allowed rst:data-disabled:opacity-50",
-                              K[e],
+                              W[e],
                               V
                             ),
                             children: r.label
@@ -153,7 +155,7 @@ const K = {
               "rst:text-xs rst:text-left",
               x ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400",
               a && "rst:opacity-50",
-              G
+              F
             ),
             children: o || m
           }
@@ -163,5 +165,5 @@ const K = {
   );
 };
 export {
-  Y as RadioGroup
+  M as RadioGroup
 };