@blakesteve/roster 5.10.0 → 5.12.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 { cn as E } 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 { 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 { 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,44 +23,44 @@ 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 L(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 S(e) {
-  e && (e.focus({ preventScroll: !0 }), e.scrollIntoView?.({ block: "nearest" }));
+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" }));
 }
 function z(e) {
   return !!e && getComputedStyle(e).direction === "rtl";
 }
-function Te(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" && !Ae(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 Ae(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 D = { 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) => {
-      D.x = e.clientX, D.y = e.clientY;
+      L.x = e.clientX, L.y = e.clientY;
     },
     { passive: !0 }
   ));
 }
-function J(e) {
-  return !Number.isNaN(D.x) && (e.clientX !== D.x || e.clientY !== D.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",
@@ -79,13 +80,13 @@ function Re(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__ */ E(
+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__ */ E(
      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)`;
@@ -139,12 +140,12 @@ function re(e, r, n, s, a, t = !1) {
   );
   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,21 +155,21 @@ 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 = L(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(), S(o[(u + 1) % o.length]);
+        t.preventDefault(), t.stopPropagation(), E(o[(u + 1) % o.length]);
         return;
       case "ArrowUp":
-        t.preventDefault(), t.stopPropagation(), S(o[u <= 0 ? o.length - 1 : u - 1]);
+        t.preventDefault(), t.stopPropagation(), E(o[u <= 0 ? o.length - 1 : u - 1]);
         return;
       case "Home":
       case "PageUp":
-        t.preventDefault(), t.stopPropagation(), S(o[0]);
+        t.preventDefault(), t.stopPropagation(), E(o[0]);
         return;
       case "End":
       case "PageDown":
-        t.preventDefault(), t.stopPropagation(), S(o[o.length - 1]);
+        t.preventDefault(), t.stopPropagation(), E(o[o.length - 1]);
         return;
       case "Escape":
         t.preventDefault(), t.stopPropagation(), n();
@@ -176,7 +177,7 @@ function se({
       case "Tab": {
         t.preventDefault(), t.stopPropagation();
         const f = a.triggerRef.current;
-        a.close(!1), f && Te(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);
-      b !== -1 && S(o[b]);
+      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,22 +225,22 @@ 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);
     },
     [P, o]
-  ), T = {
+  ), A = {
     id: h.triggerId,
     "aria-haspopup": "menu",
     "aria-expanded": h.open,
@@ -254,20 +256,20 @@ 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 R = L(k);
-        S(v === "last" ? R[R.length - 1] : R[0]);
+        const D = R(k);
+        E(v === "last" ? D[D.length - 1] : D[0]);
         return;
       }
       h.openWith(v);
     }
   };
-  return r ? /* @__PURE__ */ c("button", { ref: M, type: "button", className: n, ...I, ...T, children: t }) : (
+  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: E("rst:min-h-11 rst:min-w-11", n),
+        className: S("rst:min-h-11 rst:min-w-11", n),
         variant: u,
         colorScheme: p,
         size: f,
@@ -277,18 +279,18 @@ const Ve = i.forwardRef(function({ plain: r = !1, className: n, onClick: s, onKe
         endIcon: x,
         surface: g,
         ...I,
-        ...T,
+        ...A,
         children: t
       }
     )
   );
 });
-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 = L(l), k = t.focusOnOpen.current;
-    k === "first" && v[0] ? S(v[0]) : k === "last" && v.length ? S(v[v.length - 1]) : l.focus({ preventScroll: !0 });
+    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;
     const v = document.activeElement;
@@ -296,12 +298,12 @@ function je({ children: e, align: r = "start", offset: n = 4, className: s, ...a
   }, [g, l]), i.useLayoutEffect(() => {
     !t.open && l?.contains(document.activeElement) && t.triggerRef.current?.focus({ preventScroll: !0 });
   }, [t.open, l, t.triggerRef]);
-  const T = (v) => {
+  const A = (v) => {
     const k = v.relatedTarget;
     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",
     {
@@ -317,14 +319,14 @@ function je({ children: e, align: r = "start", offset: n = 4, className: s, ...a
       "data-closed": o ? "" : void 0,
       "data-leaving": u ? "" : void 0,
       onKeyDown: M,
-      onBlur: T,
-      style: { ...b, ...Q, transformOrigin: Z(x, f) },
-      className: E(y && "dark", ee, s),
+      onBlur: A,
+      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,23 +335,30 @@ 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));
     }
   };
 }
-const O = /* @__PURE__ */ E(
+const O = /* @__PURE__ */ S(
   /* A button or a link reset to a row: no border, no fill, the panel's type. */
   "rst:relative rst:flex rst:w-full rst:min-h-11 rst:items-center rst:gap-2.5 rst:border-0 rst:bg-transparent rst:px-3 rst:py-2 rst:text-start rst:text-sm rst:text-inherit rst:no-underline rst:[font-family:inherit] rst:cursor-pointer rst:select-none rst:outline-none rst:transition-colors",
   /* Focus follows the pointer, so the highlight is focus. In forced colors a
      fill is dropped, so focus draws an outline there instead. */
   "rst:focus:bg-primary-100 rst:focus:text-primary-900 rst:dark:focus:bg-primary-900/30 rst:dark:focus:text-primary-100 rst:forced-colors:focus:outline-solid rst:forced-colors:focus:outline-2 rst:forced-colors:focus:-outline-offset-2",
+  /* The tint alone isn't a focus indicator: it measures under 1.2:1 against
+     the panel in both themes, on the default surface and a consumer's. So
+     keyboard focus adds an inset ring in the focus token, which a consumer
+     tunes against their own surfaces, and holds 3:1 on any of them. The
+     pointer's focus is the tint alone: the ring follows the mark `focusItem`
+     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", De = () => /* @__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" }) }), Le = () => /* @__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" }) });
-function A({ icon: e, shortcut: r, description: n, badge: s, children: a }, t, d, o) {
+), 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: [
     u != null && /* With a description, the icon lines up with the label, not the middle of both lines. */
-    /* @__PURE__ */ c("span", { "aria-hidden": "true", className: E("rst:flex rst:size-4 rst:shrink-0 rst:items-center rst:justify-center", n != null && "rst:self-start rst:mt-0.5"), "data-menu-lead": "", children: u }),
+    /* @__PURE__ */ c("span", { "aria-hidden": "true", className: S("rst:flex rst:size-4 rst:shrink-0 rst:items-center rst:justify-center", n != null && "rst:self-start rst:mt-0.5"), "data-menu-lead": "", children: u }),
     /* @__PURE__ */ N("span", { className: "rst:min-w-0 rst:flex-1 rst:break-words", "data-menu-label": "", children: [
       a,
       n != null && /* @__PURE__ */ c("span", { id: o, "aria-hidden": "true", className: "rst:block rst:text-xs rst:opacity-75", "data-menu-description": "", children: n })
@@ -359,7 +368,7 @@ function A({ icon: e, shortcut: r, description: n, badge: s, children: a }, t, d
     d
   ] });
 }
-function F({
+function H({
   disabled: e,
   closeOnSelect: r,
   onChoose: n,
@@ -381,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 = E(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,
@@ -413,14 +422,14 @@ function qe({ onSelect: e, href: r, closeOnSelect: n = !0, disabled: s, destruct
             I.preventDefault(), s || I.currentTarget.click();
           }
         },
-        children: A(u, void 0, void 0, m)
+        children: T(u, void 0, void 0, m)
       }
     );
   }
-  return /* @__PURE__ */ c("button", { type: "button", className: b, ...x, ...l, children: A(u, void 0, void 0, m) });
+  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",
     {
@@ -433,19 +442,19 @@ function Ge({ checked: e, onCheckedChange: r, indicator: n, closeOnSelect: s = !
       "aria-keyshortcuts": d,
       "data-menu-item": "",
       "data-menu-text": o,
-      className: E(O, t && H, u),
+      className: S(O, t && F, u),
       ...f,
-      children: n === void 0 ? A(p, /* @__PURE__ */ c("span", { className: e ? void 0 : "rst:invisible", "data-menu-check": "", children: /* @__PURE__ */ c(De, {}) }), void 0, m) : A(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",
     {
@@ -458,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: E(O, s && H, d),
+      className: S(O, s && F, d),
       ...f,
-      children: A(o, /* @__PURE__ */ c("span", { className: p ? void 0 : "rst:invisible", "data-menu-check": "", children: /* @__PURE__ */ c(Le, {}) }), 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(
@@ -479,36 +488,36 @@ function Oe({ label: e, children: r, className: n }) {
     r
   ] });
 }
-function Je({ className: e }) {
-  return /* @__PURE__ */ c("div", { role: "separator", className: E("rst:my-1 rst:h-[var(--roster-border-width,1px)] rst:bg-[var(--roster-popover-border)]", 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: T, closed: y, leaving: v } = te(l), k = z(x), { setPanel: R, 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,
-    T,
+    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), b.current?.focus({ preventScroll: !0 });
-  }, { typedRef: le, typingAhead: de } = oe(), me = se({ panelRef: h, typedRef: le, onEscape: W, onBack: W });
+    u.setOpenSubmenu(null), E(b.current);
+  }, { typedRef: de, typingAhead: me } = se(), fe = ae({ panelRef: h, typedRef: de, onEscape: W, onBack: W });
   i.useLayoutEffect(() => {
-    !l || !K || u.focusFirstInSubmenu.current && S(L(K)[0]);
+    !l || !K || u.focusFirstInSubmenu.current && E(R(K)[0]);
   }, [l, K, u.focusFirstInSubmenu]);
   const $ = (w) => {
     if (!s) {
       if (l && w && h.current) {
-        S(L(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",
@@ -525,26 +534,26 @@ function Qe({ label: e, children: r, icon: n, disabled: s, textValue: a, classNa
         "data-menu-item": "",
         "data-menu-text": a,
         "data-menu-tree": o.treeId,
-        className: E(O, l && "rst:bg-gray-100 rst:dark:bg-gray-700/50", t),
+        className: S(O, l && "rst:bg-gray-100 rst:dark:bg-gray-700/50", t),
         onPointerDown: (w) => {
           M.current = w.pointerType;
         },
         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: A({ 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, {}) }))
       }
     ),
-    T && /* @__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: R,
+        ref: D,
         id: m,
         dir: k ? "rtl" : "ltr",
         role: "menu",
@@ -554,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: E(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;