@blakesteve/roster 5.8.0 → 5.10.0

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

@@ -0,0 +1,577 @@
+"use client";
+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 }) {
+  return /* @__PURE__ */ c("a", { href: e, ...s, children: n });
+}
+const G = i.createContext(null), B = i.createContext(null), Y = i.createContext(null);
+function C(e) {
+  const r = i.useContext(G);
+  if (!r) throw new Error(`<${e}> must be inside a <Menu>.`);
+  return r;
+}
+function _(e) {
+  const r = i.useContext(B);
+  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) : [];
+}
+function S(e) {
+  e && (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)
+  ), s = n.indexOf(e);
+  ((r ? n[s - 1] : n[s + 1]) ?? e).focus();
+}
+function Ae(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 };
+let U = !1;
+function Ce() {
+  U || typeof window > "u" || (U = !0, window.addEventListener(
+    "pointermove",
+    (e) => {
+      D.x = e.clientX, D.y = e.clientY;
+    },
+    { passive: !0 }
+  ));
+}
+function J(e) {
+  return !Number.isNaN(D.x) && (e.clientX !== D.x || e.clientY !== D.y);
+}
+const V = (e) => `radial-gradient(farthest-side at 50% ${e === "top" ? "0" : "100%"}, var(--menu-edge), transparent)`, Q = {
+  backgroundImage: "var(--menu-edge-top, none), var(--menu-edge-bottom, none)",
+  backgroundPosition: "top, bottom",
+  backgroundSize: "100% 0.5rem",
+  backgroundRepeat: "no-repeat"
+};
+function Re(e) {
+  i.useLayoutEffect(() => {
+    if (!e) return;
+    const r = () => {
+      const s = e.scrollTop > 8, a = e.scrollTop + e.clientHeight < e.scrollHeight - 8;
+      e.toggleAttribute("data-more-above", s), e.toggleAttribute("data-more-below", a), e.style.setProperty("--menu-edge-top", s ? V("top") : "none"), e.style.setProperty("--menu-edge-bottom", a ? V("bottom") : "none");
+    };
+    r(), e.addEventListener("scroll", r, { passive: !0 });
+    const n = typeof ResizeObserver > "u" ? null : new ResizeObserver(r);
+    return n?.observe(e), () => {
+      e.removeEventListener("scroll", r), n?.disconnect();
+    };
+  }, [e]);
+}
+function Z(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(
+  "rst:font-ui",
+  we,
+  /* 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",
+  /* The scroll shadows' color: stronger on a dark panel, where a faint one vanishes. */
+  "rst:[--menu-edge:rgb(0_0_0/0.18)] rst:dark:[--menu-edge:rgb(0_0_0/0.6)]",
+  /* The entrance: a fade and a slight grow from the corner nearest the
+     button. Leaving is quicker. Neither moves under reduced motion. Opacity
+     and scale only: a transition on the position would fly the panel in
+     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) {
+  const [r, n] = i.useState(e), [s, a] = i.useState(!0);
+  return i.useLayoutEffect(() => {
+    if (e) {
+      n(!0);
+      const o = requestAnimationFrame(() => a(!1));
+      return () => cancelAnimationFrame(o);
+    }
+    a(!0);
+    const t = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, d = window.setTimeout(() => n(!1), t ? 0 : Pe);
+    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({
+    open: r,
+    strategy: "fixed",
+    /* Placed by top and left, not a transform: the entrance's scale would
+       scale a transform's translation too, and slide the panel in. */
+    transform: !1,
+    placement: n,
+    elements: { reference: e },
+    whileElementsMounted: Ie,
+    middleware: [
+      he(s),
+      be({ padding: 8 }),
+      ye({ padding: 8, crossAxis: t }),
+      ve({
+        padding: 8,
+        apply({ availableHeight: m, elements: l }) {
+          l.floating.style.maxHeight = `min(var(--anchor-max-height, 100vh), ${Math.max(m, 96)}px)`;
+        }
+      })
+    ]
+  }), { setFloating: p } = u.refs, f = i.useCallback(
+    (m) => {
+      a.current = m, o(m), p(m);
+    },
+    [a, p]
+  );
+  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, []);
+  return { typedRef: e, typingAhead: r };
+}
+function se({
+  panelRef: e,
+  typedRef: r,
+  onEscape: n,
+  onBack: s
+}) {
+  const a = C("MenuItems");
+  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);
+    switch (t.key) {
+      case "ArrowDown":
+        t.preventDefault(), t.stopPropagation(), S(o[(u + 1) % o.length]);
+        return;
+      case "ArrowUp":
+        t.preventDefault(), t.stopPropagation(), S(o[u <= 0 ? o.length - 1 : u - 1]);
+        return;
+      case "Home":
+      case "PageUp":
+        t.preventDefault(), t.stopPropagation(), S(o[0]);
+        return;
+      case "End":
+      case "PageDown":
+        t.preventDefault(), t.stopPropagation(), S(o[o.length - 1]);
+        return;
+      case "Escape":
+        t.preventDefault(), t.stopPropagation(), n();
+        return;
+      case "Tab": {
+        t.preventDefault(), t.stopPropagation();
+        const f = a.triggerRef.current;
+        a.close(!1), f && Te(f, t.shiftKey);
+        return;
+      }
+      case "ArrowLeft":
+      case "ArrowRight":
+        s && t.key === (p ? "ArrowRight" : "ArrowLeft") && (t.preventDefault(), t.stopPropagation(), s());
+        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;
+      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]);
+    }
+  };
+}
+function Ue({ children: e, open: r, onOpenChange: n, linkComponent: s = 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(
+    (g) => {
+      r === void 0 && t(g), n?.(g);
+    },
+    [r, n]
+  ), x = i.useMemo(
+    () => ({
+      treeId: o,
+      open: d,
+      openWith: (g) => {
+        l.current = g, b(!0);
+      },
+      close: (g) => {
+        b(!1), g && u.current?.focus();
+      },
+      triggerRef: u,
+      triggerEl: p,
+      registerTrigger: m,
+      triggerId: `${o}-button`,
+      panelId: `${o}-menu`,
+      focusOnOpen: l,
+      linkComponent: s
+    }),
+    [o, d, b, s, p, m]
+  );
+  return i.useEffect(() => {
+    if (!d) return;
+    Ce();
+    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 });
+}
+const Ve = 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 = {
+    id: h.triggerId,
+    "aria-haspopup": "menu",
+    "aria-expanded": h.open,
+    "aria-controls": h.open ? h.panelId : void 0,
+    "data-menu-tree": h.treeId,
+    onClick: (y) => {
+      s?.(y), !y.defaultPrevented && (h.open ? h.close(!1) : h.openWith("panel"));
+    },
+    onKeyDown: (y) => {
+      if (a?.(y), y.defaultPrevented) return;
+      const v = y.key === "Enter" || y.key === " " || y.key === "ArrowDown" ? "first" : y.key === "ArrowUp" ? "last" : null;
+      if (!v) return;
+      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]);
+        return;
+      }
+      h.openWith(v);
+    }
+  };
+  return r ? /* @__PURE__ */ c("button", { ref: M, type: "button", className: n, ...I, ...T, children: t }) : (
+    /* min 44 by 44 whatever the size: the target a finger needs. */
+    /* @__PURE__ */ c(
+      xe,
+      {
+        ref: M,
+        className: E("rst:min-h-11 rst:min-w-11", n),
+        variant: u,
+        colorScheme: p,
+        size: f,
+        isLoading: m,
+        loadingLabel: l,
+        startIcon: b,
+        endIcon: x,
+        surface: g,
+        ...I,
+        ...T,
+        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) });
+  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 });
+  }, [t.open, l, t.focusOnOpen]), i.useLayoutEffect(() => {
+    if (!g || !l) return;
+    const v = document.activeElement;
+    v && v !== l && l.contains(v) && v.scrollIntoView?.({ block: "nearest" });
+  }, [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 k = v.relatedTarget;
+    k && !k.closest(`[data-menu-tree="${t.treeId}"]`) && t.close(!1);
+  };
+  if (!d) return null;
+  const y = !!t.triggerEl?.closest(".dark");
+  return /* @__PURE__ */ c(q, { children: /* @__PURE__ */ c(B.Provider, { value: { ...I, panelRef: p, typingAhead: P }, children: /* @__PURE__ */ c(
+    "div",
+    {
+      ref: m,
+      id: t.panelId,
+      dir: f ? "rtl" : "ltr",
+      role: "menu",
+      "aria-labelledby": a["aria-label"] ? void 0 : t.triggerId,
+      "aria-label": a["aria-label"],
+      tabIndex: -1,
+      "data-menu-panel": "",
+      "data-menu-tree": t.treeId,
+      "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),
+      children: e
+    }
+  ) }) });
+}
+function ae() {
+  const [e, r] = i.useState(null), n = i.useRef(!1), s = i.useRef(void 0);
+  return i.useEffect(() => () => window.clearTimeout(s.current), []), {
+    openSubmenu: e,
+    focusFirstInSubmenu: n,
+    setOpenSubmenu: (a, t = !1) => {
+      window.clearTimeout(s.current), n.current = t, r(a);
+    },
+    hoverItem: (a) => {
+      window.clearTimeout(s.current), a === null && (s.current = window.setTimeout(() => r(null), X));
+    }
+  };
+}
+const O = /* @__PURE__ */ E(
+  /* 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",
+  "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) {
+  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__ */ 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 })
+    ] }),
+    s != null && /* @__PURE__ */ c("span", { className: "rst:flex rst:shrink-0 rst:items-center", "data-menu-badge": "", children: s }),
+    r && /* @__PURE__ */ c("span", { "aria-hidden": "true", className: "rst:ms-auto rst:shrink-0 rst:ps-4 rst:text-xs rst:tracking-wide rst:opacity-70", "data-menu-shortcut": "", children: r }),
+    d
+  ] });
+}
+function F({
+  disabled: e,
+  closeOnSelect: r,
+  onChoose: n,
+  spaceKeepsOpen: s
+}) {
+  const a = C("MenuItem"), t = _("MenuItem"), d = (o, u) => {
+    if (e) {
+      o.preventDefault();
+      return;
+    }
+    n(o), u && a.close(!0);
+  };
+  return {
+    onClick: (o) => d(o, r),
+    onKeyDown: (o) => {
+      if (o.key === " ") {
+        if (t.typingAhead()) return;
+        o.preventDefault(), d(o, r && !s);
+      }
+    },
+    onPointerMove: (o) => {
+      J(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 = {
+    role: "menuitem",
+    tabIndex: -1,
+    "aria-disabled": s ? !0 : void 0,
+    "aria-keyshortcuts": t,
+    "aria-describedby": u.description != null ? m : void 0,
+    "data-menu-item": "",
+    "data-menu-text": d,
+    "data-destructive": a ? "" : void 0
+  };
+  if (r !== void 0) {
+    const g = p.linkComponent;
+    return /* @__PURE__ */ c(
+      g,
+      {
+        href: r,
+        to: r,
+        className: b,
+        ...x,
+        onClick: l.onClick,
+        onPointerMove: l.onPointerMove,
+        onKeyDown: (I) => {
+          if (I.key === " ") {
+            if (f.typingAhead()) return;
+            I.preventDefault(), s || I.currentTarget.click();
+          }
+        },
+        children: A(u, void 0, void 0, m)
+      }
+    );
+  }
+  return /* @__PURE__ */ c("button", { type: "button", className: b, ...x, ...l, children: A(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();
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      type: "button",
+      role: "menuitemcheckbox",
+      "aria-checked": e,
+      "aria-describedby": p.description != null ? m : void 0,
+      tabIndex: -1,
+      "aria-disabled": a || void 0,
+      "aria-keyshortcuts": d,
+      "data-menu-item": "",
+      "data-menu-text": o,
+      className: E(O, t && H, 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)
+    }
+  );
+}
+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 Xe({ value: e, closeOnSelect: r = !0, disabled: n, destructive: s, keyshortcuts: a, textValue: t, className: d, ...o }) {
+  const u = i.useContext(Y);
+  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();
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      type: "button",
+      role: "menuitemradio",
+      "aria-checked": p,
+      "aria-describedby": o.description != null ? m : void 0,
+      tabIndex: -1,
+      "aria-disabled": n || void 0,
+      "aria-keyshortcuts": a,
+      "data-menu-item": "",
+      "data-menu-text": t,
+      className: E(O, s && H, d),
+      ...f,
+      children: A(o, /* @__PURE__ */ c("span", { className: p ? void 0 : "rst:invisible", "data-menu-check": "", children: /* @__PURE__ */ c(Le, {}) }), void 0, m)
+    }
+  );
+}
+function Oe({ 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(
+      "div",
+      {
+        id: s,
+        className: "rst:px-3 rst:pt-2 rst:pb-1 rst:text-xs rst:font-semibold rst:text-gray-600 rst:dark:text-gray-400",
+        "data-menu-heading": "",
+        children: e
+      }
+    ),
+    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 Qe({ 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(
+    x,
+    T,
+    k ? "left-start" : "right-start",
+    { mainAxis: 0, alignmentAxis: -4 },
+    h,
+    !0
+  ), ce = ae();
+  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 });
+  i.useLayoutEffect(() => {
+    !l || !K || u.focusFirstInSubmenu.current && S(L(K)[0]);
+  }, [l, K, u.focusFirstInSubmenu]);
+  const $ = (w) => {
+    if (!s) {
+      if (l && w && h.current) {
+        S(L(h.current)[0]);
+        return;
+      }
+      u.setOpenSubmenu(f, w);
+    }
+  }, fe = !!o.triggerEl?.closest(".dark");
+  return /* @__PURE__ */ N(j, { children: [
+    /* @__PURE__ */ c(
+      "button",
+      {
+        ref: I,
+        id: f,
+        type: "button",
+        role: "menuitem",
+        tabIndex: -1,
+        "aria-haspopup": "menu",
+        "aria-expanded": l,
+        "aria-controls": l ? m : void 0,
+        "aria-disabled": s || void 0,
+        "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),
+        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));
+        },
+        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)));
+        },
+        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, {}) }))
+      }
+    ),
+    T && /* @__PURE__ */ c(q, { children: /* @__PURE__ */ c(B.Provider, { value: { ...ce, panelRef: h, typingAhead: de }, children: /* @__PURE__ */ c(
+      "div",
+      {
+        ref: R,
+        id: m,
+        dir: k ? "rtl" : "ltr",
+        role: "menu",
+        "aria-labelledby": f,
+        tabIndex: -1,
+        "data-menu-panel": "",
+        "data-menu-tree": o.treeId,
+        "data-closed": y ? "" : void 0,
+        "data-leaving": v ? "" : void 0,
+        onKeyDown: me,
+        onPointerEnter: () => u.hoverItem(f),
+        style: { ...ie, ...Q, transformOrigin: Z(ue, k) },
+        className: E(fe && "dark", ee, 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
+};

package/dist/components/molecules/Menu/menu-typeahead.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function h(r,n,s){const e=s.toLocaleLowerCase();if(!e||r.length===0)return-1;const o=[...e].every(t=>t===e[0]),c=o?e[0]:e,i=o?n+1:n;for(let t=0;t<r.length;t++){const a=(Math.max(i,0)+t)%r.length;if(r[a].trim().toLocaleLowerCase().startsWith(c))return a}return-1}exports.nextByTypeahead=h;

package/dist/components/molecules/Menu/menu-typeahead.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The item typeahead lands on: the next one, after `current`, whose label
+ * starts with what's been typed, wrapping round to the start. Typing the same
+ * letter again cycles through the items starting with it. `-1` when nothing
+ * matches, so focus stays put.
+ */
+export declare function nextByTypeahead(labels: string[], current: number, typed: string): number;

package/dist/components/molecules/Menu/menu-typeahead.js

@@ -0,0 +1,13 @@
+function i(r, n, s) {
+  const t = s.toLocaleLowerCase();
+  if (!t || r.length === 0) return -1;
+  const o = [...t].every((e) => e === t[0]), c = o ? t[0] : t, h = o ? n + 1 : n;
+  for (let e = 0; e < r.length; e++) {
+    const a = (Math.max(h, 0) + e) % r.length;
+    if (r[a].trim().toLocaleLowerCase().startsWith(c)) return a;
+  }
+  return -1;
+}
+export {
+  i as nextByTypeahead
+};

package/dist/components/molecules/SkeletonPresets/SkeletonPresets.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../lib/utils.cjs"),x=require("../../atoms/Card/Card.cjs"),m=require("../../atoms/Eyebrow/Eyebrow.cjs"),c=require("../../atoms/Stat/stat-variants.cjs"),h=require("../../organisms/Table/Table.cjs"),t=require("../../atoms/Skeleton/Skeleton.cjs");function j({media:r,lines:a=3,variant:s,padding:i,className:n}){return e.jsxs(x.Card,{variant:s,padding:i,className:n,"aria-hidden":"true","data-skeleton":"card",children:[r!==void 0&&e.jsx(t.Skeleton,{shape:"block",height:r,className:"rst:mb-4"}),e.jsx(t.Skeleton,{size:"lg",width:"45%"}),a>0&&e.jsx(t.Skeleton,{size:"md",lines:a,className:"rst:mt-2"})]})}function S({columns:r,className:a}){const s=["70%","50%","60%","40%"];return e.jsx(h.TableRow,{"aria-hidden":"true",className:a,"data-skeleton":"table-row",children:Array.from({length:Math.max(1,r)},(i,n)=>e.jsx(h.TableCell,{children:e.jsx(t.Skeleton,{size:"inherit",width:s[n%s.length]})},n))})}function k({size:r="md",withName:a=!1,className:s}){return a?e.jsxs("span",{"aria-hidden":"true",className:l.cn("rst:flex rst:items-center rst:gap-3",s),"data-skeleton":"avatar",children:[e.jsx(t.Skeleton,{shape:"circle",size:r}),e.jsx(t.Skeleton,{size:"md",width:"8rem"})]}):e.jsx(t.Skeleton,{shape:"circle",size:r,className:s})}function w({size:r="md",semantics:a="definition",source:s=!1,className:i}){const n=c.statValueVariants({size:r,colorScheme:"neutral"}),o=e.jsx(t.Skeleton,{size:"inherit",width:"2.5em"}),d=e.jsx(m.Eyebrow,{size:"xs",children:e.jsx(t.Skeleton,{size:"inherit",width:"9em"})}),u=e.jsx("span",{className:c.statSourceClass,children:e.jsx(t.Skeleton,{size:"inherit",width:"12em"})});return a==="standalone"?e.jsxs("span",{"aria-hidden":"true",className:l.cn("rst:flex rst:flex-col rst:gap-[3px]",i),"data-skeleton":"stat",children:[e.jsx("span",{className:n,children:o}),d,s&&u]}):e.jsxs("div",{"aria-hidden":"true",className:l.cn("rst:grid rst:content-start rst:gap-[3px]",i),"data-skeleton":"stat",children:[e.jsx("dt",{className:"rst:relative rst:col-start-1 rst:row-start-2 rst:flex",children:d}),s?e.jsxs("dd",{className:l.cn("rst:m-0",n,"rst:col-start-1 rst:row-span-3 rst:row-start-1 rst:grid rst:grid-rows-subgrid"),children:[e.jsx("span",{className:"rst:row-start-1",children:o}),e.jsx("span",{className:l.cn(c.statSourceClass,"rst:row-start-3"),children:e.jsx(t.Skeleton,{size:"inherit",width:"12em"})})]}):e.jsx("dd",{className:l.cn("rst:m-0 rst:col-start-1 rst:row-start-1",n),children:o})]})}exports.SkeletonAvatar=k;exports.SkeletonCard=j;exports.SkeletonStat=w;exports.SkeletonTableRow=S;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../lib/utils.cjs"),j=require("../../atoms/Card/Card.cjs"),S=require("../../atoms/Eyebrow/Eyebrow.cjs"),d=require("../../atoms/Stat/stat-variants.cjs"),u=require("../../organisms/Table/Table.cjs"),s=require("../../atoms/Skeleton/Skeleton.cjs");function k({media:a,lines:n=3,variant:r,padding:t,animation:i,className:l}){return e.jsxs(j.Card,{variant:r,padding:t,className:l,"aria-hidden":"true","data-skeleton":"card",children:[a!==void 0&&e.jsx(s.Skeleton,{shape:"block",height:a,animation:i,className:"rst:mb-4"}),e.jsx(s.Skeleton,{size:"lg",width:"45%",animation:i}),n>0&&e.jsx(s.Skeleton,{size:"md",lines:n,animation:i,className:"rst:mt-2"})]})}function m({columns:a,animation:n,className:r}){const t=["70%","50%","60%","40%"];return e.jsx(u.TableRow,{"aria-hidden":"true",className:r,"data-skeleton":"table-row",children:Array.from({length:Math.max(1,a)},(i,l)=>e.jsx(u.TableCell,{children:e.jsx(s.Skeleton,{size:"inherit",width:t[l%t.length],animation:n})},l))})}function w({size:a="md",withName:n=!1,animation:r,className:t}){return n?e.jsxs("span",{"aria-hidden":"true",className:c.cn("rst:flex rst:items-center rst:gap-3",t),"data-skeleton":"avatar",children:[e.jsx(s.Skeleton,{shape:"circle",size:a,animation:r}),e.jsx(s.Skeleton,{size:"md",width:"8rem",animation:r})]}):e.jsx(s.Skeleton,{shape:"circle",size:a,animation:r,className:t})}function p({size:a="md",semantics:n="definition",source:r=!1,animation:t,className:i}){const l=d.statValueVariants({size:a,colorScheme:"neutral"}),o=e.jsx(s.Skeleton,{size:"inherit",width:"2.5em",animation:t}),h=e.jsx(S.Eyebrow,{size:"xs",children:e.jsx(s.Skeleton,{size:"inherit",width:"9em",animation:t})}),x=e.jsx("span",{className:d.statSourceClass,children:e.jsx(s.Skeleton,{size:"inherit",width:"12em",animation:t})});return n==="standalone"?e.jsxs("span",{"aria-hidden":"true",className:c.cn("rst:flex rst:flex-col rst:gap-[3px]",i),"data-skeleton":"stat",children:[e.jsx("span",{className:l,children:o}),h,r&&x]}):e.jsxs("div",{"aria-hidden":"true",className:c.cn("rst:grid rst:content-start rst:gap-[3px]",i),"data-skeleton":"stat",children:[e.jsx("dt",{className:"rst:relative rst:col-start-1 rst:row-start-2 rst:flex",children:h}),r?e.jsxs("dd",{className:c.cn("rst:m-0",l,"rst:col-start-1 rst:row-span-3 rst:row-start-1 rst:grid rst:grid-rows-subgrid"),children:[e.jsx("span",{className:"rst:row-start-1",children:o}),e.jsx("span",{className:c.cn(d.statSourceClass,"rst:row-start-3"),children:e.jsx(s.Skeleton,{size:"inherit",width:"12em",animation:t})})]}):e.jsx("dd",{className:c.cn("rst:m-0 rst:col-start-1 rst:row-start-1",l),children:o})]})}exports.SkeletonAvatar=w;exports.SkeletonCard=k;exports.SkeletonStat=p;exports.SkeletonTableRow=m;