@blakesteve/roster 5.10.0 → 5.11.0

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

@@ -3,7 +3,7 @@ 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 { cn as S } from "../../../lib/utils.js";
 import { POPUP_PANEL as we } from "../../../internal/popup.js";
 import { Button as xe } from "../../atoms/Button/Button.js";
 import { nextByTypeahead as ke } from "./menu-typeahead.js";
@@ -23,41 +23,41 @@ function _(e) {
   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) {
+function D(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 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) {
+function Ae(e, r) {
   const n = [...document.querySelectorAll(Me)].filter(
-    (t) => t === e || t.tabIndex >= 0 && !t.matches(":disabled") && !t.closest("[data-menu-panel], [inert]") && t.getClientRects().length > 0 && getComputedStyle(t).visibility !== "hidden" && !Ae(t, r)
+    (t) => t === e || t.tabIndex >= 0 && !t.matches(":disabled") && !t.closest("[data-menu-panel], [inert]") && t.getClientRects().length > 0 && getComputedStyle(t).visibility !== "hidden" && !Te(t, r)
   ), s = n.indexOf(e);
   ((r ? n[s - 1] : n[s + 1]) ?? e).focus();
 }
-function Ae(e, r) {
+function Te(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 R = { 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;
+      R.x = e.clientX, R.y = e.clientY;
     },
     { passive: !0 }
   ));
 }
 function J(e) {
-  return !Number.isNaN(D.x) && (e.clientX !== D.x || e.clientY !== D.y);
+  return !Number.isNaN(R.x) && (e.clientX !== R.x || e.clientY !== R.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)",
@@ -65,7 +65,7 @@ const V = (e) => `radial-gradient(farthest-side at 50% ${e === "top" ? "0" : "10
   backgroundSize: "100% 0.5rem",
   backgroundRepeat: "no-repeat"
 };
-function Re(e) {
+function Le(e) {
   i.useLayoutEffect(() => {
     if (!e) return;
     const r = () => {
@@ -83,7 +83,7 @@ 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(
+const ee = /* @__PURE__ */ S(
   "rst:font-ui",
   we,
   /* Its own width wherever it lands: a fixed panel sized by the room to its
@@ -137,7 +137,7 @@ function re(e, r, n, s, a, t = !1) {
     },
     [a, p]
   );
-  return Re(d), { ...u, setPanel: f, panelEl: d };
+  return Le(d), { ...u, setPanel: f, panelEl: d };
 }
 const ne = 500;
 function oe() {
@@ -154,21 +154,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 = D(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 +176,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 && Ae(f, t.shiftKey);
         return;
       }
       case "ArrowLeft":
@@ -189,7 +189,7 @@ function se({
       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]);
+      b !== -1 && E(o[b]);
     }
   };
 }
@@ -238,7 +238,7 @@ const Ve = i.forwardRef(function({ plain: r = !1, className: n, onClick: s, onKe
       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 +254,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 L = D(k);
+        E(v === "last" ? L[L.length - 1] : L[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,
       {
         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,7 +277,7 @@ const Ve = i.forwardRef(function({ plain: r = !1, className: n, onClick: s, onKe
         endIcon: x,
         surface: g,
         ...I,
-        ...T,
+        ...A,
         children: t
       }
     )
@@ -287,8 +287,8 @@ 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 });
+    const v = D(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,7 +296,7 @@ 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);
   };
@@ -317,9 +317,9 @@ 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,
+      onBlur: A,
       style: { ...b, ...Q, transformOrigin: Z(x, f) },
-      className: E(y && "dark", ee, s),
+      className: S(y && "dark", ee, s),
       children: e
     }
   ) }) });
@@ -337,19 +337,26 @@ function ae() {
     }
   };
 }
-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) {
+), H = "rst:text-error-600 rst:dark:text-error-400 rst:focus:bg-error-50 rst:focus:text-error-700 rst:dark:focus:bg-error-900/30 rst:dark:focus:text-error-300", Re = () => /* @__PURE__ */ c("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ c("path", { d: "M3.5 8.5 6.5 11.5 12.5 4.5" }) }), De = () => /* @__PURE__ */ c("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", children: /* @__PURE__ */ c("circle", { cx: "8", cy: "8", r: "3.5", fill: "currentColor" }) }), Ne = () => /* @__PURE__ */ c("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "rst:rtl:rotate-180", children: /* @__PURE__ */ c("path", { d: "M6 3.5 10.5 8 6 12.5" }) });
+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 })
@@ -386,7 +393,7 @@ function F({
   };
 }
 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 = {
+  const p = C("MenuItem"), f = _("MenuItem"), m = i.useId(), l = F({ disabled: s, closeOnSelect: n, onChoose: (g) => e?.(g) }), b = S(O, a && H, o), x = {
     role: "menuitem",
     tabIndex: -1,
     "aria-disabled": s ? !0 : void 0,
@@ -413,11 +420,11 @@ 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();
@@ -433,9 +440,9 @@ 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 && 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)
+      children: n === void 0 ? T(p, /* @__PURE__ */ c("span", { className: e ? void 0 : "rst:invisible", "data-menu-check": "", children: /* @__PURE__ */ c(Re, {}) }), void 0, m) : T(p, void 0, /* @__PURE__ */ c("span", { "aria-hidden": "true", className: "rst:ms-auto rst:flex rst:shrink-0 rst:items-center", children: n }), m)
     }
   );
 }
@@ -458,9 +465,9 @@ 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 && 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)
+      children: T(o, /* @__PURE__ */ c("span", { className: p ? void 0 : "rst:invisible", "data-menu-check": "", children: /* @__PURE__ */ c(De, {}) }), void 0, m)
     }
   );
 }
@@ -480,14 +487,14 @@ function Oe({ label: e, children: r, className: n }) {
   ] });
 }
 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) });
+  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 }) {
   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 } = te(l), k = z(x), { setPanel: L, panelEl: K, floatingStyles: ie, placement: ue } = re(
     x,
-    T,
+    A,
     k ? "left-start" : "right-start",
     { mainAxis: 0, alignmentAxis: -4 },
     h,
@@ -495,15 +502,15 @@ function Qe({ label: e, children: r, icon: n, disabled: s, textValue: a, classNa
   ), ce = ae();
   i.useEffect(() => () => window.clearTimeout(P.current), []);
   const W = () => {
-    u.setOpenSubmenu(null), b.current?.focus({ preventScroll: !0 });
+    u.setOpenSubmenu(null), E(b.current);
   }, { 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.current && E(D(K)[0]);
   }, [l, K, u.focusFirstInSubmenu]);
   const $ = (w) => {
     if (!s) {
       if (l && w && h.current) {
-        S(L(h.current)[0]);
+        E(D(h.current)[0]);
         return;
       }
       u.setOpenSubmenu(f, w);
@@ -525,7 +532,7 @@ 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;
         },
@@ -538,13 +545,13 @@ function Qe({ label: e, children: r, icon: n, disabled: s, textValue: a, classNa
           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, {}) }))
+        children: T({ icon: n, children: e }, void 0, /* @__PURE__ */ c("span", { "aria-hidden": "true", className: "rst:ms-auto rst:flex rst:shrink-0 rst:items-center rst:opacity-70", "data-menu-chevron": "", children: /* @__PURE__ */ c(Ne, {}) }))
       }
     ),
-    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: { ...ce, panelRef: h, typingAhead: de }, children: /* @__PURE__ */ c(
       "div",
       {
-        ref: R,
+        ref: L,
         id: m,
         dir: k ? "rtl" : "ltr",
         role: "menu",
@@ -557,7 +564,7 @@ function Qe({ label: e, children: r, icon: n, disabled: s, textValue: a, classNa
         onKeyDown: me,
         onPointerEnter: () => u.hoverItem(f),
         style: { ...ie, ...Q, transformOrigin: Z(ue, k) },
-        className: E(fe && "dark", ee, d),
+        className: S(fe && "dark", ee, d),
         children: r
       }
     ) }) })

package/dist/components/molecules/RangeSlider/RangeSlider.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),d=require("react"),G=require("../../../lib/utils.cjs"),ge=require("../../../lib/labels.cjs"),J=require("../../../internal/field-invalid.cjs"),l=require("../Slider/track.cjs"),h=require("../Slider/track-parts.cjs"),ve={low:"Minimum",high:"Maximum",valueText:(s,i)=>i?`${s}, ${i}`:s,range:(s,i)=>`${s} – ${i}`},he=([s,i])=>s<=i?[s,i]:[i,s];function pe({value:s,defaultValue:i,onChange:Q,onCommit:B,min:g=0,max:v=100,step:M=1,pageStep:U,snapPoints:W=[],label:P,helperText:T,errorMessage:R,disabled:a=!1,name:p,formatValue:b=String,labels:X,className:Y,trackClassName:Z,thumbClassName:_,chipClassName:V,labelClassName:ee,messageClassName:te,"aria-invalid":ne,"aria-labelledby":re,"aria-describedby":se,...C}){const j=ge.withLabels(ve,X),x=d.useId(),F=`${x}-label`,N=`${x}-message`,w=[`${x}-low`,`${x}-high`],S=re??(P?F:void 0),c=l.useScale(g,v,M,U),m=s!==void 0,[O,L]=d.useState(i??[g,v]),D=m?s:O,r=he([c.clamp(D[0]),c.clamp(D[1])]),ie=J.isFieldInvalid(!!R,{...C,"aria-invalid":ne}),K=J.withoutInvalidProps(C),f=l.useCommitted(r),[,ae]=d.useReducer(e=>e+1,0),k=(e,t,o)=>{const u=f.current,q=e===0?Math.min(t,u[1]):Math.max(t,u[0]);if(q===u[e])return;const y=e===0?[q,u[1]]:[u[0],q];f.current=y,m?ae():L(y),Q?.(y),o&&B?.(y)},z=d.useRef(null),A=d.useRef(O);l.useFormReset(z,m,()=>{f.current=A.current,L(A.current)},p);const E=d.useRef(null),H=[d.useRef(null),d.useRef(null)],{dragging:I,rtl:le,handlers:oe}=l.useTrackPress({trackRef:E,disabled:a,scale:c,min:g,max:v,values:()=>f.current,set:k,focus:e=>H[e].current?.focus({preventScroll:!0}),commit:()=>B?.(f.current),own:{down:void 0,move:void 0,up:void 0,cancel:void 0,lost:void 0}}),ce=e=>t=>{if(a)return;const o=f.current,u=l.keyTarget(t,o[e],{scale:c,step:M,start:o[e],floor:e===0?g:o[0],ceiling:e===0?o[1]:v,rtl:le()});u!==void 0&&(t.preventDefault(),k(e,u,!0))},ue=e=>{const[t,o]=f.current;k(e<=t?0:e>=o?1:e-t<=o-e?0:1,e,!0)},$=l.inRange(W,g,v),de=[T||R?N:void 0,se].filter(Boolean).join(" ")||void 0,fe="rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background";return n.jsxs("div",{...K,role:"group","aria-labelledby":S,className:G.cn("rst:font-ui rst:flex rst:min-w-0 rst:flex-col rst:gap-1.5",Y),"data-range-slider":"",children:[n.jsx(h.SliderHeader,{labelId:F,label:P,readout:j.range(b(r[0]),b(r[1])),empty:!1,disabled:a,labelClassName:ee}),n.jsx("span",{id:w[0],hidden:!0,children:j.low}),n.jsx("span",{id:w[1],hidden:!0,children:j.high}),n.jsxs("div",{...oe,ref:E,"data-dragging":I?"":void 0,className:G.cn(l.trackClasses(a),Z),children:[n.jsx(h.Rail,{}),n.jsx(h.Fill,{from:c.at(r[0]),to:c.at(r[1]),dragging:I}),n.jsx(h.Marks,{points:$,at:c.at,filled:e=>e>=r[0]&&e<=r[1]}),r.map((e,t)=>n.jsx("span",{ref:H[t],role:"slider",tabIndex:a?void 0:0,"aria-labelledby":[S,w[t]].filter(Boolean).join(" "),"aria-describedby":de,"aria-valuemin":t===0?g:r[0],"aria-valuemax":t===0?r[1]:v,"aria-valuenow":e,"aria-valuetext":j.valueText(b(e),l.nearestPoint($,e)?.label),"aria-orientation":"horizontal","aria-disabled":a||void 0,"aria-invalid":ie||void 0,"data-slider-thumb":t===0?"low":"high",onKeyDown:ce(t),className:l.thumbClasses(I,fe,_),style:{insetInlineStart:l.along(c.at(e))}},t))]}),n.jsx(h.SnapChips,{points:$,labelledBy:S,label:K["aria-label"],pressed:e=>e===r[0]||e===r[1],pick:ue,disabled:a,chipClassName:V}),n.jsx(h.Message,{id:N,helperText:T,errorMessage:R,disabled:a,className:te}),p&&n.jsxs(n.Fragment,{children:[n.jsx("input",{ref:z,type:"hidden",name:p,value:String(r[0]),disabled:a,readOnly:!0}),n.jsx("input",{type:"hidden",name:p,value:String(r[1]),disabled:a,readOnly:!0})]})]})}exports.RangeSlider=pe;

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

@@ -0,0 +1,74 @@
+import { HTMLAttributes } from 'react';
+import { SliderSnapPoint } from '../Slider/track';
+/** A range's two values, low then high. */
+export type RangeValue = [number, number];
+/** Every word RangeSlider says. Pass any of them in `labels` to replace it. */
+export interface RangeSliderLabels {
+    /** The low thumb's name, heard after the slider's label: "Price Minimum". */
+    low: string;
+    /** The high thumb's name. */
+    high: string;
+    /** What a screen reader hears for a thumb's value, with the nearest snap point's label when there is one: "40, Likely". */
+    valueText: (value: string, nearest: string | undefined) => string;
+    /** The number shown beside the label, both values in one: "20 – 80". */
+    range: (low: string, high: string) => string;
+}
+export interface RangeSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** The two values, low then high. Pass it to control the slider; leave it out for one that starts from `defaultValue`. */
+    value?: RangeValue;
+    /** Where an uncontrolled slider starts. The whole range, `[min, max]`, by default. */
+    defaultValue?: RangeValue;
+    /** Each change: a tap, every step of a drag, a key, a snap point. */
+    onChange?: (value: RangeValue) => void;
+    /** Once a change is finished: a tap, the end of a drag, a key, a snap point. */
+    onCommit?: (value: RangeValue) => void;
+    /** The lowest value. */
+    min?: number;
+    /** The highest value. */
+    max?: number;
+    /** The smallest move: the arrows step by it, and every value lands on it. */
+    step?: number;
+    /** PageUp and PageDown's move. A tenth of the range, on a step, by default. */
+    pageStep?: number;
+    /**
+     * Named stops, any values and labels. Each gets a mark on the track and a
+     * chip under it, which does what a tap on its mark does: moves the nearer
+     * thumb there. A point outside `min` to `max` is left out.
+     */
+    snapPoints?: SliderSnapPoint[];
+    /** The slider's name, shown above the track. */
+    label?: string;
+    /** Supporting text under the slider. */
+    helperText?: string;
+    /** The message for an invalid value. Implies the error state. */
+    errorMessage?: string;
+    disabled?: boolean;
+    /** A form field name: both values are submitted under it, low then high, as a multiple select's are. */
+    name?: string;
+    /** How a value is written, in the readout and in what's said. */
+    formatValue?: (value: number) => string;
+    /** Every word the slider says, with English defaults. */
+    labels?: Partial<RangeSliderLabels>;
+    /** Classes for the track, the pointer's hit area. */
+    trackClassName?: string;
+    /** Classes for each thumb. */
+    thumbClassName?: string;
+    /** Classes for each snap chip. */
+    chipClassName?: string;
+    /** Classes for the label. */
+    labelClassName?: string;
+    /** Classes for the helper text or error message. */
+    messageClassName?: string;
+}
+/**
+ * Two values picked along one track, a low and a high: tapped, dragged,
+ * stepped with the keys, or set from a named snap point.
+ *
+ * Each thumb is a slider of its own to a screen reader and the keyboard, a
+ * tab stop named for the slider and for its end ("Price Minimum"), whose
+ * range runs to the other thumb: the thumbs meet, and never cross. The track
+ * takes a press for the nearer thumb. It starts at the whole range, and has
+ * no not-set state: the whole range is what "any" looks like.
+ */
+declare function RangeSlider({ value: controlled, defaultValue, onChange, onCommit, min, max, step, pageStep, snapPoints, label, helperText, errorMessage, disabled, name, formatValue, labels: overrides, className, trackClassName, thumbClassName, chipClassName, labelClassName, messageClassName, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: RangeSliderProps): import("react/jsx-runtime").JSX.Element;
+export { RangeSlider };

package/dist/components/molecules/RangeSlider/RangeSlider.js

@@ -0,0 +1,164 @@
+"use client";
+import { jsxs as B, jsx as i, Fragment as ue } from "react/jsx-runtime";
+import { useId as fe, useState as ge, useReducer as ve, useRef as g } from "react";
+import { cn as q } from "../../../lib/utils.js";
+import { withLabels as pe } from "../../../lib/labels.js";
+import { isFieldInvalid as he, withoutInvalidProps as me } from "../../../internal/field-invalid.js";
+import { useScale as we, useCommitted as ye, useFormReset as be, useTrackPress as Se, inRange as Re, along as $e, thumbClasses as ke, nearestPoint as Ie, trackClasses as xe, keyTarget as Be } from "../Slider/track.js";
+import { SliderHeader as je, Rail as Ce, Fill as Fe, Marks as Me, SnapChips as Ne, Message as Te } from "../Slider/track-parts.js";
+const Le = {
+  low: "Minimum",
+  high: "Maximum",
+  valueText: (n, o) => o ? `${n}, ${o}` : n,
+  range: (n, o) => `${n} – ${o}`
+}, Oe = ([n, o]) => n <= o ? [n, o] : [o, n];
+function qe({
+  value: n,
+  defaultValue: o,
+  onChange: G,
+  onCommit: j,
+  min: u = 0,
+  max: f = 100,
+  step: C = 1,
+  pageStep: J,
+  snapPoints: Q = [],
+  label: F,
+  helperText: M,
+  errorMessage: w,
+  disabled: s = !1,
+  name: v,
+  formatValue: y = String,
+  labels: U,
+  className: W,
+  trackClassName: X,
+  thumbClassName: Y,
+  chipClassName: Z,
+  labelClassName: _,
+  messageClassName: V,
+  "aria-invalid": ee,
+  "aria-labelledby": re,
+  "aria-describedby": te,
+  ...N
+}) {
+  const p = pe(Le, U), h = fe(), T = `${h}-label`, L = `${h}-message`, b = [`${h}-low`, `${h}-high`], S = re ?? (F ? T : void 0), l = we(u, f, C, J), R = n !== void 0, [O, P] = ge(o ?? [u, f]), D = R ? n : O, t = Oe([l.clamp(D[0]), l.clamp(D[1])]), ne = he(!!w, { ...N, "aria-invalid": ee }), K = me(N), d = ye(t), [, ie] = ve((e) => e + 1, 0), $ = (e, r, a) => {
+    const c = d.current, x = e === 0 ? Math.min(r, c[1]) : Math.max(r, c[0]);
+    if (x === c[e]) return;
+    const m = e === 0 ? [x, c[1]] : [c[0], x];
+    d.current = m, R ? ie() : P(m), G?.(m), a && j?.(m);
+  }, z = g(null), A = g(O);
+  be(
+    z,
+    R,
+    () => {
+      d.current = A.current, P(A.current);
+    },
+    v
+  );
+  const E = g(null), H = [g(null), g(null)], { dragging: k, rtl: oe, handlers: se } = Se({
+    trackRef: E,
+    disabled: s,
+    scale: l,
+    min: u,
+    max: f,
+    values: () => d.current,
+    set: $,
+    focus: (e) => H[e].current?.focus({ preventScroll: !0 }),
+    commit: () => j?.(d.current),
+    own: { down: void 0, move: void 0, up: void 0, cancel: void 0, lost: void 0 }
+  }), ae = (e) => (r) => {
+    if (s) return;
+    const a = d.current, c = Be(r, a[e], {
+      scale: l,
+      step: C,
+      start: a[e],
+      floor: e === 0 ? u : a[0],
+      ceiling: e === 0 ? a[1] : f,
+      rtl: oe()
+    });
+    c !== void 0 && (r.preventDefault(), $(e, c, !0));
+  }, le = (e) => {
+    const [r, a] = d.current;
+    $(e <= r ? 0 : e >= a ? 1 : e - r <= a - e ? 0 : 1, e, !0);
+  }, I = Re(Q, u, f), ce = [M || w ? L : void 0, te].filter(Boolean).join(" ") || void 0, de = "rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background";
+  return /* @__PURE__ */ B(
+    "div",
+    {
+      ...K,
+      role: "group",
+      "aria-labelledby": S,
+      className: q("rst:font-ui rst:flex rst:min-w-0 rst:flex-col rst:gap-1.5", W),
+      "data-range-slider": "",
+      children: [
+        /* @__PURE__ */ i(
+          je,
+          {
+            labelId: T,
+            label: F,
+            readout: p.range(y(t[0]), y(t[1])),
+            empty: !1,
+            disabled: s,
+            labelClassName: _
+          }
+        ),
+        /* @__PURE__ */ i("span", { id: b[0], hidden: !0, children: p.low }),
+        /* @__PURE__ */ i("span", { id: b[1], hidden: !0, children: p.high }),
+        /* @__PURE__ */ B(
+          "div",
+          {
+            ...se,
+            ref: E,
+            "data-dragging": k ? "" : void 0,
+            className: q(xe(s), X),
+            children: [
+              /* @__PURE__ */ i(Ce, {}),
+              /* @__PURE__ */ i(Fe, { from: l.at(t[0]), to: l.at(t[1]), dragging: k }),
+              /* @__PURE__ */ i(Me, { points: I, at: l.at, filled: (e) => e >= t[0] && e <= t[1] }),
+              t.map((e, r) => /* @__PURE__ */ i(
+                "span",
+                {
+                  ref: H[r],
+                  role: "slider",
+                  tabIndex: s ? void 0 : 0,
+                  "aria-labelledby": [S, b[r]].filter(Boolean).join(" "),
+                  "aria-describedby": ce,
+                  "aria-valuemin": r === 0 ? u : t[0],
+                  "aria-valuemax": r === 0 ? t[1] : f,
+                  "aria-valuenow": e,
+                  "aria-valuetext": p.valueText(y(e), Ie(I, e)?.label),
+                  "aria-orientation": "horizontal",
+                  "aria-disabled": s || void 0,
+                  "aria-invalid": ne || void 0,
+                  "data-slider-thumb": r === 0 ? "low" : "high",
+                  onKeyDown: ae(r),
+                  className: ke(k, de, Y),
+                  style: { insetInlineStart: $e(l.at(e)) }
+                },
+                r
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(
+          Ne,
+          {
+            points: I,
+            labelledBy: S,
+            label: K["aria-label"],
+            pressed: (e) => e === t[0] || e === t[1],
+            pick: le,
+            disabled: s,
+            chipClassName: Z
+          }
+        ),
+        /* @__PURE__ */ i(Te, { id: L, helperText: M, errorMessage: w, disabled: s, className: V }),
+        v && /* @__PURE__ */ B(ue, { children: [
+          /* @__PURE__ */ i("input", { ref: z, type: "hidden", name: v, value: String(t[0]), disabled: s, readOnly: !0 }),
+          /* @__PURE__ */ i("input", { type: "hidden", name: v, value: String(t[1]), disabled: s, readOnly: !0 })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  qe as RangeSlider
+};

package/dist/components/molecules/Slider/Slider.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),z=require("../../../lib/utils.cjs"),be=require("../../../lib/labels.cjs"),A=require("../../../internal/field-invalid.cjs"),s=require("./track.cjs"),d=require("./track-parts.cjs"),pe={notSet:"Not set",valueText:(v,f)=>f?`${v}, ${f}`:v};function ye({value:v,defaultValue:f,onChange:E,onCommit:m,min:i=0,max:o=100,step:x=1,pageStep:H,startValue:M,snapPoints:_=[],label:I,helperText:q,errorMessage:g,disabled:n=!1,name:b,formatValue:G=String,labels:J,className:Q,trackClassName:U,thumbClassName:W,chipClassName:X,labelClassName:Y,messageClassName:Z,"aria-invalid":V,"aria-labelledby":ee,onKeyDown:te,onPointerDown:re,onPointerMove:se,onPointerUp:ne,onPointerCancel:ie,onLostPointerCapture:le,...p}){const y=be.withLabels(pe,J),N=c.useId(),P=`${N}-label`,B=`${N}-message`,C=ee??(I?P:void 0),l=s.useScale(i,o,x,H),T=l.snap(M??i+(o-i)/2),S=v!==void 0,[$,D]=c.useState(f===void 0?T:f),F=S?v:$,t=F===null?null:l.clamp(F),ae=A.isFieldInvalid(!!g,{...p,"aria-invalid":V}),L=A.withoutInvalidProps(p),a=s.useCommitted(t),[,oe]=c.useReducer(e=>e+1,0),j=(e,u)=>{e!==a.current&&(a.current=e,S?oe():D(e),E?.(e),u&&e!==null&&m?.(e))},O=c.useRef(null),K=c.useRef($);s.useFormReset(O,S,()=>{a.current=K.current,D(K.current)},b);const h=c.useRef(null),{dragging:R,rtl:ue,handlers:ce}=s.useTrackPress({trackRef:h,disabled:n,scale:l,min:i,max:o,values:()=>[a.current],set:(e,u,ge)=>j(u,ge),focus:()=>h.current?.focus({preventScroll:!0}),commit:()=>a.current!==null&&m?.(a.current),own:{down:re,move:se,up:ne,cancel:ie,lost:le}}),de=e=>{if(te?.(e),n)return;const u=s.keyTarget(e,a.current,{scale:l,step:x,start:T,floor:i,ceiling:o,rtl:ue()});u!==void 0&&(e.preventDefault(),j(u,!0))},w=s.inRange(_,i,o),k=t===null?null:G(t),ve=k===null?y.notSet:y.valueText(k,s.nearestPoint(w,t)?.label),fe=[q||g?B:void 0,p["aria-describedby"]].filter(Boolean).join(" ")||void 0;return r.jsxs("div",{className:z.cn("rst:font-ui rst:flex rst:min-w-0 rst:flex-col rst:gap-1.5",Q),"data-slider":"",children:[r.jsx(d.SliderHeader,{labelId:P,label:I,readout:k??y.notSet,empty:t===null,disabled:n,labelClassName:Y}),r.jsxs("div",{...L,...ce,ref:h,role:"slider",tabIndex:n?void 0:0,"aria-labelledby":C,"aria-describedby":fe,"aria-valuemin":i,"aria-valuemax":o,"aria-valuenow":t??void 0,"aria-valuetext":ve,"aria-orientation":"horizontal","aria-disabled":n||void 0,"aria-invalid":ae||void 0,"data-dragging":R?"":void 0,"data-empty":t===null?"":void 0,onKeyDown:de,className:z.cn(s.trackClasses(n),"rst:group/slider rst:focus-visible:outline-hidden",t===null&&"rst:focus-visible:ring-2 rst:focus-visible:ring-ring",U),children:[r.jsx(d.Rail,{}),t!==null&&r.jsx(d.Fill,{from:0,to:l.at(t),dragging:R}),r.jsx(d.Marks,{points:w,at:l.at,filled:e=>t!==null&&t>=e}),t!==null&&r.jsx("span",{"aria-hidden":"true","data-slider-thumb":"",className:s.thumbClasses(R,"rst:group-focus-visible/slider:ring-2 rst:group-focus-visible/slider:ring-ring rst:group-focus-visible/slider:ring-offset-2 rst:ring-offset-background",W),style:{insetInlineStart:s.along(l.at(t))}})]}),r.jsx(d.SnapChips,{points:w,labelledBy:C,label:L["aria-label"],pressed:e=>t===e,pick:e=>j(e,!0),disabled:n,chipClassName:X}),r.jsx(d.Message,{id:B,helperText:q,errorMessage:g,disabled:n,className:Z}),b&&r.jsx("input",{ref:O,type:"hidden",name:b,value:t===null?"":String(t),disabled:n,readOnly:!0})]})}exports.Slider=ye;