@blakesteve/roster 5.7.0 → 5.9.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/Pagination/Pagination.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),w=require("react"),v=require("../../../lib/utils.cjs"),ee=require("../../atoms/Button/Button.cjs"),te=require("../../atoms/Button/button-variants.cjs"),se=require("../../atoms/Select/select-variants.cjs"),Q=require("./page-items.cjs"),re={nav:"Pagination",page:t=>`Page ${t}`,number:t=>String(t),previous:"Previous",next:"Next",previousPage:t=>t===null?"Previous page":`Previous page (${t})`,nextPage:t=>t===null?"Next page":`Next page (${t})`,firstPage:t=>t===null?"First page":`First page (${t})`,lastPage:t=>t===null?"Last page":`Last page (${t})`,gap:"…",picker:"Page",of:t=>`of ${t}`,status:(t,i)=>`Page ${t} of ${i}`};function ae({href:t,className:i,children:c,onClick:o,...d}){return e.jsx("a",{href:t,className:i,onClick:o,"aria-label":d["aria-label"],"aria-current":d["aria-current"],"aria-disabled":d["aria-disabled"],children:c})}const ne="rst:h-11 rst:min-w-11 rst:px-2",ie="rst:cursor-not-allowed rst:opacity-50",le="rst:forced-colors:border-2 rst:forced-colors:underline rst:forced-colors:decoration-2 rst:forced-colors:underline-offset-4",X={width:18,height:18,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0},F=({dir:t,double:i=!1})=>e.jsx("svg",{...X,className:"rst:shrink-0",children:t==="left"?i?e.jsx("path",{d:"m11 17-5-5 5-5M18 17l-5-5 5-5"}):e.jsx("path",{d:"m15 18-6-6 6-6"}):i?e.jsx("path",{d:"m13 17 5-5-5-5M6 17l5-5-5-5"}):e.jsx("path",{d:"m9 18 6-6-6-6"})});function oe({id:t,describedBy:i,page:c,pageCount:o,number:d,onCommit:k}){const[u,j]=w.useState(null),p=w.useRef(!1),x=u&&u.page===c?u.value:null,b=l=>{j(null),l!==c&&k(l)},P=w.useMemo(()=>Array.from({length:o},(l,f)=>e.jsx("option",{value:f+1,children:d(f+1)},f+1)),[o,d]);return e.jsx("select",{id:t,value:x??c,"aria-describedby":i,disabled:o<1,onKeyDown:l=>{if(l.key==="Enter"){x!==null&&(l.preventDefault(),b(x));return}if(l.key==="Escape"){j(null);return}p.current=!0,setTimeout(()=>{p.current=!1},0)},onChange:l=>{const f=Number(l.currentTarget.value);p.current?j({page:c,value:f}):b(f)},onBlur:()=>{x!==null&&b(x)},className:v.cn(se.selectTriggerVariants({variant:"outline"}),"rst:h-11 rst:w-auto rst:min-w-16 rst:appearance-none rst:pl-3 rst:pr-8 rst:text-base rst:tabular-nums"),"data-pagination-picker":"",children:P})}function ce({page:t,pageCount:i,onPageChange:c,getPageHref:o,linkComponent:d,navigate:k,layout:u="auto",siblings:j=1,edges:p=!0,align:x="center",variant:b="ghost",announce:P=!0,labels:l,className:f}){const a={...re,...l},m=Number.isFinite(i)?Math.max(0,Math.floor(i)):0,n=Q.clampPage(t,m),C=w.useId(),Y=d??ae,[E,Z]=w.useState({page:n,text:""});E.page!==n&&Z({page:n,text:P?a.status(n,m):""});const L=s=>{s!==Math.floor(t)&&c?.(s)},y=(s,r,N,A)=>{const h=s==="page"&&r===n,$=r===null,U=v.cn(ne,$&&ie,h&&le,A.className),W=s==="page"?`page-${r}`:s;if(o){const J=o(r??n);return e.jsx(Y,{href:J,to:J,className:v.cn(te.buttonVariants({variant:h?"solid":b,colorScheme:h?"primary":"neutral"}),U),"aria-label":A.label,"aria-current":h?"page":void 0,"aria-disabled":$?!0:void 0,onClick:g=>{if($){g.preventDefault();return}!g.defaultPrevented&&g.button===0&&!g.metaKey&&!g.ctrlKey&&!g.shiftKey&&!g.altKey&&r!==null&&L(r)},children:N},W)}return e.jsx(ee.Button,{type:"button",variant:h?"solid":b,colorScheme:h?"primary":"neutral",className:U,"aria-label":A.label,"aria-current":h?"page":void 0,"aria-disabled":$||void 0,onClick:()=>{r!==null&&L(r)},children:N},W)},I=n>1?n-1:null,R=n<m?n+1:null,T=n>1?1:null,B=n<m?m:null,M=s=>y("previous",I,e.jsxs(e.Fragment,{children:[e.jsx(F,{dir:"left"}),s&&e.jsx("span",{className:"rst:hidden rst:pr-1 rst:@[36rem]:inline",children:a.previous})]}),{label:a.previousPage(I)}),S=s=>y("next",R,e.jsxs(e.Fragment,{children:[s&&e.jsx("span",{className:"rst:hidden rst:pl-1 rst:@[36rem]:inline",children:a.next}),e.jsx(F,{dir:"right"})]}),{label:a.nextPage(R)}),K=s=>y("first",T,e.jsx(F,{dir:"left",double:!0}),{label:a.firstPage(T),className:s?"rst:hidden rst:@[24rem]:inline-flex":void 0}),V=s=>y("last",B,e.jsx(F,{dir:"right",double:!0}),{label:a.lastPage(B),className:s?"rst:hidden rst:@[24rem]:inline-flex":void 0}),D="rst:flex rst:flex-wrap rst:items-center rst:gap-1",q={start:"rst:justify-start",center:"rst:justify-center",end:"rst:justify-end"}[x],O=s=>e.jsxs("div",{className:v.cn(D,q,s),"data-pagination-layout":"pages",children:[M(!0),Q.pageItems(n,m,j).map(r=>typeof r=="number"?y("page",r,a.number(r),{label:a.page(r)}):e.jsx("span",{"aria-hidden":"true",className:"rst:inline-flex rst:h-11 rst:w-11 rst:items-center rst:justify-center rst:text-sm rst:text-gray-500 rst:dark:text-gray-400",children:a.gap},r)),S(!0)]}),_=`${C}-picker`,z=`${C}-of`,G=s=>e.jsxs("div",{className:v.cn(D,q,s),"data-pagination-layout":"compact",children:[p&&K(!0),M(!1),e.jsxs("div",{className:"rst:flex rst:items-center rst:gap-2 rst:px-1 rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)]",children:[e.jsx("label",{htmlFor:_,children:a.picker}),e.jsxs("span",{className:"rst:relative rst:inline-flex",children:[e.jsx(oe,{id:_,describedBy:z,page:n,pageCount:m,number:a.number,onCommit:r=>{if(o){c?.(r);const N=o(r);k?k(N):window.location.assign(N)}else L(r)}}),e.jsx("svg",{...X,width:16,height:16,className:"rst:pointer-events-none rst:absolute rst:right-2.5 rst:top-1/2 rst:-translate-y-1/2 rst:text-gray-500 rst:dark:text-gray-400",children:e.jsx("path",{d:"m6 9 6 6 6-6"})})]}),e.jsx("span",{id:z,className:"rst:tabular-nums",children:a.of(m)})]}),S(!1),p&&V(!0)]}),H=e.jsxs("div",{className:v.cn(D,q),"data-pagination-layout":"arrows",children:[p&&K(!1),M(!1),S(!1),p&&V(!1)]});return e.jsxs("nav",{"aria-label":a.nav,className:v.cn("rst:font-ui",u==="arrows"?"rst:w-fit":"rst:@container rst:w-full rst:[contain-intrinsic-inline-size:18rem]",f),"data-pagination":"",children:[u==="pages"&&O(),u==="compact"&&G(),u==="arrows"&&H,u==="auto"&&e.jsxs(e.Fragment,{children:[O("rst:hidden rst:@[28rem]:flex"),G("rst:@[28rem]:hidden")]}),P&&e.jsx("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:"rst:sr-only","data-pagination-live":"",children:E.text})]})}exports.Pagination=ce;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),w=require("react"),b=require("../../../lib/utils.cjs"),ee=require("../../../lib/labels.cjs"),te=require("../../atoms/Button/Button.cjs"),se=require("../../atoms/Button/button-variants.cjs"),re=require("../../atoms/Select/select-variants.cjs"),Q=require("./page-items.cjs"),ae={nav:"Pagination",page:t=>`Page ${t}`,number:t=>String(t),previous:"Previous",next:"Next",previousPage:t=>t===null?"Previous page":`Previous page (${t})`,nextPage:t=>t===null?"Next page":`Next page (${t})`,firstPage:t=>t===null?"First page":`First page (${t})`,lastPage:t=>t===null?"Last page":`Last page (${t})`,gap:"…",picker:"Page",of:t=>`of ${t}`,status:(t,i)=>`Page ${t} of ${i}`};function ne({href:t,className:i,children:c,onClick:o,...d}){return e.jsx("a",{href:t,className:i,onClick:o,"aria-label":d["aria-label"],"aria-current":d["aria-current"],"aria-disabled":d["aria-disabled"],children:c})}const ie="rst:h-11 rst:min-w-11 rst:px-2",le="rst:cursor-not-allowed rst:opacity-50",oe="rst:forced-colors:border-2 rst:forced-colors:underline rst:forced-colors:decoration-2 rst:forced-colors:underline-offset-4",X={width:18,height:18,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0},L=({dir:t,double:i=!1})=>e.jsx("svg",{...X,className:"rst:shrink-0",children:t==="left"?i?e.jsx("path",{d:"m11 17-5-5 5-5M18 17l-5-5 5-5"}):e.jsx("path",{d:"m15 18-6-6 6-6"}):i?e.jsx("path",{d:"m13 17 5-5-5-5M6 17l5-5-5-5"}):e.jsx("path",{d:"m9 18 6-6-6-6"})});function ce({id:t,describedBy:i,page:c,pageCount:o,number:d,onCommit:k}){const[u,j]=w.useState(null),p=w.useRef(!1),x=u&&u.page===c?u.value:null,v=l=>{j(null),l!==c&&k(l)},P=w.useMemo(()=>Array.from({length:o},(l,f)=>e.jsx("option",{value:f+1,children:d(f+1)},f+1)),[o,d]);return e.jsx("select",{id:t,value:x??c,"aria-describedby":i,disabled:o<1,onKeyDown:l=>{if(l.key==="Enter"){x!==null&&(l.preventDefault(),v(x));return}if(l.key==="Escape"){j(null);return}p.current=!0,setTimeout(()=>{p.current=!1},0)},onChange:l=>{const f=Number(l.currentTarget.value);p.current?j({page:c,value:f}):v(f)},onBlur:()=>{x!==null&&v(x)},className:b.cn(re.selectTriggerVariants({variant:"outline"}),"rst:h-11 rst:w-auto rst:min-w-16 rst:appearance-none rst:pl-3 rst:pr-8 rst:text-base rst:tabular-nums"),"data-pagination-picker":"",children:P})}function ue({page:t,pageCount:i,onPageChange:c,getPageHref:o,linkComponent:d,navigate:k,layout:u="auto",siblings:j=1,edges:p=!0,align:x="center",variant:v="ghost",announce:P=!0,labels:l,className:f}){const a=ee.withLabels(ae,l),m=Number.isFinite(i)?Math.max(0,Math.floor(i)):0,n=Q.clampPage(t,m),C=w.useId(),Y=d??ne,[E,Z]=w.useState({page:n,text:""});E.page!==n&&Z({page:n,text:P?a.status(n,m):""});const F=s=>{s!==Math.floor(t)&&c?.(s)},y=(s,r,N,A)=>{const h=s==="page"&&r===n,$=r===null,U=b.cn(ie,$&&le,h&&oe,A.className),W=s==="page"?`page-${r}`:s;if(o){const J=o(r??n);return e.jsx(Y,{href:J,to:J,className:b.cn(se.buttonVariants({variant:h?"solid":v,colorScheme:h?"primary":"neutral"}),U),"aria-label":A.label,"aria-current":h?"page":void 0,"aria-disabled":$?!0:void 0,onClick:g=>{if($){g.preventDefault();return}!g.defaultPrevented&&g.button===0&&!g.metaKey&&!g.ctrlKey&&!g.shiftKey&&!g.altKey&&r!==null&&F(r)},children:N},W)}return e.jsx(te.Button,{type:"button",variant:h?"solid":v,colorScheme:h?"primary":"neutral",className:U,"aria-label":A.label,"aria-current":h?"page":void 0,"aria-disabled":$||void 0,onClick:()=>{r!==null&&F(r)},children:N},W)},I=n>1?n-1:null,R=n<m?n+1:null,T=n>1?1:null,B=n<m?m:null,M=s=>y("previous",I,e.jsxs(e.Fragment,{children:[e.jsx(L,{dir:"left"}),s&&e.jsx("span",{className:"rst:hidden rst:pr-1 rst:@[36rem]:inline",children:a.previous})]}),{label:a.previousPage(I)}),S=s=>y("next",R,e.jsxs(e.Fragment,{children:[s&&e.jsx("span",{className:"rst:hidden rst:pl-1 rst:@[36rem]:inline",children:a.next}),e.jsx(L,{dir:"right"})]}),{label:a.nextPage(R)}),K=s=>y("first",T,e.jsx(L,{dir:"left",double:!0}),{label:a.firstPage(T),className:s?"rst:hidden rst:@[24rem]:inline-flex":void 0}),V=s=>y("last",B,e.jsx(L,{dir:"right",double:!0}),{label:a.lastPage(B),className:s?"rst:hidden rst:@[24rem]:inline-flex":void 0}),q="rst:flex rst:flex-wrap rst:items-center rst:gap-1",D={start:"rst:justify-start",center:"rst:justify-center",end:"rst:justify-end"}[x],O=s=>e.jsxs("div",{className:b.cn(q,D,s),"data-pagination-layout":"pages",children:[M(!0),Q.pageItems(n,m,j).map(r=>typeof r=="number"?y("page",r,a.number(r),{label:a.page(r)}):e.jsx("span",{"aria-hidden":"true",className:"rst:inline-flex rst:h-11 rst:w-11 rst:items-center rst:justify-center rst:text-sm rst:text-gray-500 rst:dark:text-gray-400",children:a.gap},r)),S(!0)]}),_=`${C}-picker`,z=`${C}-of`,G=s=>e.jsxs("div",{className:b.cn(q,D,s),"data-pagination-layout":"compact",children:[p&&K(!0),M(!1),e.jsxs("div",{className:"rst:flex rst:items-center rst:gap-2 rst:px-1 rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)]",children:[e.jsx("label",{htmlFor:_,children:a.picker}),e.jsxs("span",{className:"rst:relative rst:inline-flex",children:[e.jsx(ce,{id:_,describedBy:z,page:n,pageCount:m,number:a.number,onCommit:r=>{if(o){c?.(r);const N=o(r);k?k(N):window.location.assign(N)}else F(r)}}),e.jsx("svg",{...X,width:16,height:16,className:"rst:pointer-events-none rst:absolute rst:right-2.5 rst:top-1/2 rst:-translate-y-1/2 rst:text-gray-500 rst:dark:text-gray-400",children:e.jsx("path",{d:"m6 9 6 6 6-6"})})]}),e.jsx("span",{id:z,className:"rst:tabular-nums",children:a.of(m)})]}),S(!1),p&&V(!0)]}),H=e.jsxs("div",{className:b.cn(q,D),"data-pagination-layout":"arrows",children:[p&&K(!1),M(!1),S(!1),p&&V(!1)]});return e.jsxs("nav",{"aria-label":a.nav,className:b.cn("rst:font-ui",u==="arrows"?"rst:w-fit":"rst:@container rst:w-full rst:[contain-intrinsic-inline-size:18rem]",f),"data-pagination":"",children:[u==="pages"&&O(),u==="compact"&&G(),u==="arrows"&&H,u==="auto"&&e.jsxs(e.Fragment,{children:[O("rst:hidden rst:@[28rem]:flex"),G("rst:@[28rem]:hidden")]}),P&&e.jsx("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:"rst:sr-only","data-pagination-live":"",children:E.text})]})}exports.Pagination=ue;

package/dist/components/molecules/Pagination/Pagination.d.ts

@@ -96,6 +96,7 @@ export interface PaginationProps {
     variant?: "ghost" | "outline";
     /** Say the new page in a polite live region when it changes. */
     announce?: boolean;
+    /** The component's own words, replaced; any left out stay English. */
     labels?: Partial<PaginationLabels>;
     className?: string;
 }