@mediaradar/design-components 0.18.2 → 0.18.4

package/dist/index.js

@@ -1,7 +1,10 @@
 "use client";
 
+// <define:__FONT_SIZE_KEYS__>
+var define_FONT_SIZE_KEYS_default = ["micro", "xs", "card-title", "dense", "sm", "panel-title", "base", "md", "lg", "xl", "h1"];
+
 // src/InfoTip.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Info } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -9,6 +12,17 @@ function InfoTip({ text, size = 11, label = "More information", trigger = "click
   const [open, setOpen] = useState(false);
   const [pos, setPos] = useState(null);
   const btnRef = useRef(null);
+  const closeTimer = useRef(null);
+  const textId = useId();
+  const cancelClose = () => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    closeTimer.current = null;
+  };
+  const closeSoon = () => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => setOpen(false), 120);
+  };
+  useEffect(() => cancelClose, []);
   useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
@@ -30,6 +44,7 @@ function InfoTip({ text, size = 11, label = "More information", trigger = "click
     setPos({ top: r.bottom + 6, left, width });
   };
   const show = () => {
+    cancelClose();
     place();
     setOpen(true);
   };
@@ -40,7 +55,7 @@ function InfoTip({ text, size = 11, label = "More information", trigger = "click
   };
   const hoverProps = trigger === "hover" ? {
     onMouseEnter: show,
-    onMouseLeave: () => setOpen(false),
+    onMouseLeave: closeSoon,
     onFocus: show,
     onBlur: () => setOpen(false)
   } : {};
@@ -53,16 +68,20 @@ function InfoTip({ text, size = 11, label = "More information", trigger = "click
         onClick: toggle,
         "aria-label": label,
         "aria-expanded": open,
+        "aria-describedby": textId,
         ...hoverProps,
         className: "inline-flex cursor-pointer items-center text-text-tertiary transition-colors hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
         children: /* @__PURE__ */ jsx(Info, { size, "aria-hidden": "true" })
       }
     ),
+    /* @__PURE__ */ jsx("span", { id: textId, hidden: true, children: text }),
     open && pos && createPortal(
       /* @__PURE__ */ jsx(
         "div",
         {
-          role: "tooltip",
+          "aria-hidden": "true",
+          onMouseEnter: trigger === "hover" ? cancelClose : void 0,
+          onMouseLeave: trigger === "hover" ? closeSoon : void 0,
           style: { position: "fixed", top: pos.top, left: pos.left, width: pos.width },
           className: "z-[90] rounded-control border border-border-default bg-surface px-3 py-2 text-[12px] font-normal not-italic normal-case leading-relaxed tracking-normal text-text-secondary shadow-overlay",
           children: text
@@ -396,7 +415,7 @@ import { extendTailwindMerge } from "tailwind-merge";
 var twMerge = extendTailwindMerge({
   extend: {
     classGroups: {
-      "font-size": [{ text: ["micro", "dense"] }]
+      "font-size": [{ text: define_FONT_SIZE_KEYS_default }]
     }
   }
 });
@@ -511,7 +530,7 @@ import { jsx as jsx6 } from "react/jsx-runtime";
 function boxClass(on, disabled) {
   return cn(
     "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
-    on ? "border-transparent bg-brand-primaryAction text-white" : "border-border-interactive bg-input",
+    on ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input",
     disabled && "cursor-not-allowed opacity-50"
   );
 }
@@ -851,7 +870,7 @@ function DateRangeFilter({
                       /* @__PURE__ */ jsx7(
                         "span",
                         {
-                          className: `relative z-10 flex h-8 w-8 items-center justify-center rounded-full text-[13px] tabular-nums ${endpoint ? "bg-brand-primaryAction font-semibold text-white" : inMonth ? "text-text-primary hover:bg-subtle" : "text-text-tertiary"}`,
+                          className: `relative z-10 flex h-8 w-8 items-center justify-center rounded-full text-[13px] tabular-nums ${endpoint ? "bg-brand-primaryAction font-semibold text-brand-onprimary" : inMonth ? "text-text-primary hover:bg-subtle" : "text-text-tertiary"}`,
                           children: d.getDate()
                         }
                       )
@@ -862,7 +881,7 @@ function DateRangeFilter({
             }) }),
             /* @__PURE__ */ jsxs6("div", { className: "mt-4 flex justify-end gap-2", children: [
               /* @__PURE__ */ jsx7("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-cancel`, onClick: () => setOpen(false), className: "rounded-control border border-border-default bg-surface px-5 py-2 text-[13px] font-semibold text-text-primary transition-colors hover:bg-subtle", children: "Cancel" }),
-              /* @__PURE__ */ jsx7("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-apply`, onClick: apply, className: "rounded-control bg-brand-primaryAction px-5 py-2 text-[13px] font-semibold text-white transition-[filter] hover:brightness-110", children: "Apply" })
+              /* @__PURE__ */ jsx7("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-apply`, onClick: apply, className: "rounded-control bg-brand-primaryAction px-5 py-2 text-[13px] font-semibold text-brand-onprimary transition-[filter] hover:brightness-110", children: "Apply" })
             ] })
           ] })
         ]
@@ -881,7 +900,7 @@ function NavBtn({ children, onClick, ...rest }) {
 }
 
 // src/SearchBar.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+import { useEffect as useEffect4, useId as useId2, useRef as useRef4, useState as useState4 } from "react";
 import { AlertCircle, Check as Check3, ChevronDown as ChevronDown3, Search as Search3 } from "lucide-react";
 import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var DEFAULT_SEARCH_MATCH = { mode: "anyWord", wordJoin: "Or" };
@@ -1142,6 +1161,7 @@ function RadioOption({
 }
 function RowInfoTip({ text }) {
   const [open, setOpen] = useState4(false);
+  const id = useId2();
   const ref = useRef4(null);
   useEffect4(() => {
     if (!open) return;
@@ -1162,14 +1182,16 @@ function RowInfoTip({ text }) {
         },
         "aria-label": "More information",
         "aria-expanded": open,
-        className: "inline-flex text-text-tertiary transition-colors hover:text-text-primary",
+        "aria-describedby": id,
+        className: "inline-flex text-text-tertiary transition-colors hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
         children: /* @__PURE__ */ jsx8(AlertCircle, { size: 13, "aria-hidden": "true" })
       }
     ),
-    open && /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx8(
       "span",
       {
-        role: "tooltip",
+        id,
+        hidden: !open,
         className: "absolute left-0 top-[calc(100%+6px)] z-40 w-[220px] rounded-control border border-border-default bg-surface px-2.5 py-1.5 text-[11.5px] font-normal leading-snug text-text-secondary shadow-overlay",
         children: text
       }
@@ -1521,7 +1543,7 @@ var NO_RESULTS_BODY = "Your filters may be too narrow, conflict with each other,
 function noResultsBody(workspaceName) {
   return workspaceName ? `Nothing in the \u201C${workspaceName}\u201D workspace matches. ${NO_RESULTS_BODY}` : NO_RESULTS_BODY;
 }
-var PRIMARY_ACTION_CLASS = "rounded-control bg-brand-primaryAction px-3.5 py-2 text-[13px] font-semibold text-white transition-colors hover:opacity-90";
+var PRIMARY_ACTION_CLASS = "rounded-control bg-brand-primaryAction px-3.5 py-2 text-[13px] font-semibold text-brand-onprimary transition-colors hover:opacity-90";
 var QUIET_ACTION_CLASS = "rounded-control text-[13px] font-medium text-text-link transition-colors hover:underline focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus";
 function NoResultsEmptyState({
   title = NO_RESULTS_TITLE,
@@ -1856,12 +1878,21 @@ function StackedColumnPlaceholder({
 }
 
 // src/Tooltip.tsx
-import { useEffect as useEffect8, useId, useLayoutEffect as useLayoutEffect2, useRef as useRef9, useState as useState8 } from "react";
+import { useEffect as useEffect8, useId as useId3, useLayoutEffect as useLayoutEffect2, useRef as useRef9, useState as useState8 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function cx6(...parts) {
   return parts.filter(Boolean).join(" ");
 }
+function addDescribedBy(el, id) {
+  const ids = (el.getAttribute("aria-describedby") ?? "").split(" ").filter(Boolean);
+  if (!ids.includes(id)) el.setAttribute("aria-describedby", [...ids, id].join(" "));
+}
+function removeDescribedBy(el, id) {
+  const ids = (el.getAttribute("aria-describedby") ?? "").split(" ").filter((x) => x && x !== id);
+  if (ids.length) el.setAttribute("aria-describedby", ids.join(" "));
+  else el.removeAttribute("aria-describedby");
+}
 function exitDurationMs(el) {
   if (typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return 0;
   const cs = window.getComputedStyle(el);
@@ -1898,7 +1929,8 @@ function Tooltip({
   const [shown, setShown] = useState8(false);
   const openRef = useRef9(false);
   const mountedRef = useRef9(false);
-  const id = useId();
+  const id = useId3();
+  const describedRef = useRef9(null);
   const clearHideTimer = () => {
     if (hideTimer.current) {
       clearTimeout(hideTimer.current);
@@ -1935,7 +1967,8 @@ function Tooltip({
     if (!mountedRef.current) setBoxWidth(null);
     mountedRef.current = true;
     setAnchor({ top: r.top, left: r.left, width: r.width, height: r.height, bottom: r.bottom, right: r.right });
-    if (anchorRef) el.setAttribute("aria-describedby", id);
+    const target = anchorRef ? el : describedRef.current;
+    if (target) addDescribedBy(target, id);
   };
   const show = () => {
     clearHideTimer();
@@ -1952,7 +1985,9 @@ function Tooltip({
     mountedRef.current = false;
     setAnchor(null);
     setBoxWidth(null);
-    if (anchorRef?.current) anchorRef.current.removeAttribute("aria-describedby");
+    if (anchorRef?.current) removeDescribedBy(anchorRef.current, id);
+    if (describedRef.current) removeDescribedBy(describedRef.current, id);
+    describedRef.current = null;
   };
   const hideNow = () => {
     clearShowTimer();
@@ -2003,6 +2038,12 @@ function Tooltip({
       el.removeEventListener("blur", hide);
     };
   }, [anchorRef, placement, delay]);
+  useEffect8(() => {
+    if (!anchor) return;
+    const onKey = (e) => e.key === "Escape" && hideNow();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [anchor]);
   useLayoutEffect2(() => {
     if (!anchor) return;
     const el = boxRef.current;
@@ -2066,9 +2107,11 @@ function Tooltip({
       className,
       onMouseEnter: show,
       onMouseLeave: hide,
-      onFocus: show,
+      onFocus: (e) => {
+        describedRef.current = e.target;
+        show();
+      },
       onBlur: hide,
-      "aria-describedby": anchor ? id : void 0,
       children: [
         children,
         floating
@@ -2712,7 +2755,7 @@ function MetricCells({ spendN, yoy }) {
   return /* @__PURE__ */ jsxs23("span", { className: "flex shrink-0 items-center gap-2 pr-1.5", children: [
     /* @__PURE__ */ jsx25("span", { className: "text-right text-[12px] font-bold tabular-nums text-text-primary", style: { width: COL_CURRENT }, children: fmtM(spendN) }),
     /* @__PURE__ */ jsx25("span", { className: "text-right text-[12px] font-normal tabular-nums text-text-primary", style: { width: COL_PREVIOUS }, children: prior ?? "\u2014" }),
-    /* @__PURE__ */ jsx25("span", { className: "flex justify-end", style: { width: COL_YOY }, children: yoy === "NEW" ? /* @__PURE__ */ jsx25("span", { className: "rounded-full bg-status-warning/15 px-1.5 text-[10px] font-semibold text-text-warning", children: "NEW" }) : /* @__PURE__ */ jsxs23("span", { className: cx9("text-right text-[12px] font-semibold tabular-nums", up ? "text-text-success" : "text-text-danger"), children: [
+    /* @__PURE__ */ jsx25("span", { className: "flex justify-end", style: { width: COL_YOY }, children: yoy === "NEW" ? /* @__PURE__ */ jsx25("span", { className: "rounded-full bg-status-warning/15 px-1.5 text-micro font-semibold text-text-warning", children: "NEW" }) : /* @__PURE__ */ jsxs23("span", { className: cx9("text-right text-[12px] font-semibold tabular-nums", up ? "text-text-success" : "text-text-danger"), children: [
       up ? "+" : "\u2212",
       Math.abs(yoy),
       "%"
@@ -2763,7 +2806,7 @@ import { cva } from "class-variance-authority";
 import { Loader2 as Loader22 } from "lucide-react";
 import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control transition-all duration-(--mr-motion-duration-interactive) ease-interactive disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-hidden focus-visible:ring-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control transition-all duration-(--mr-motion-duration-interactive) ease-interactive disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
   {
     variants: {
       variant: {
@@ -2861,7 +2904,7 @@ function FilterDropdownFooter({
 }
 
 // src/NameListModal.tsx
-import { useEffect as useEffect10, useState as useState11 } from "react";
+import { useEffect as useEffect10, useId as useId4, useRef as useRef11, useState as useState11 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 import { jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
 function NameListModal({
@@ -2879,11 +2922,38 @@ function NameListModal({
     () => Object.fromEntries((options ?? []).map((o) => [o.key, !!o.initial]))
   );
   const toggle = (key) => setChecked((c) => ({ ...c, [key]: !c[key] }));
+  const dialogRef = useRef11(null);
+  const titleId = useId4();
+  const fieldId = useId4();
   useEffect10(() => {
     const onKey = (e) => e.key === "Escape" && onCancel();
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [onCancel]);
+  const [opener] = useState11(() => typeof document === "undefined" ? null : document.activeElement);
+  useEffect10(
+    () => () => {
+      const active = document.activeElement;
+      if (!active || active === document.body) opener?.focus?.();
+    },
+    [opener]
+  );
+  const trapTab = (e) => {
+    if (e.key !== "Tab" || !dialogRef.current) return;
+    const items = [
+      ...dialogRef.current.querySelectorAll("button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex='-1'])")
+    ];
+    if (items.length === 0) return;
+    const first = items[0];
+    const last = items[items.length - 1];
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  };
   return createPortal5(
     // bg-scrim, not a literal: design-tokens gained a scrim token in 2.5.0.
     // No in-data-[theme=dark] override needed any more -- the token redefines
@@ -2896,18 +2966,20 @@ function NameListModal({
         children: /* @__PURE__ */ jsxs26(
           "div",
           {
+            ref: dialogRef,
             role: "dialog",
             "aria-modal": "true",
-            "aria-label": title,
+            "aria-labelledby": titleId,
+            onKeyDown: trapTab,
             className: "w-full max-w-[420px] rounded-card border border-border-default bg-surface p-5 shadow-overlay",
             children: [
-              /* @__PURE__ */ jsx28("h2", { className: "text-[16px] font-semibold text-text-primary", children: title }),
+              /* @__PURE__ */ jsx28("h2", { id: titleId, className: "text-[16px] font-semibold text-text-primary", children: title }),
               /* @__PURE__ */ jsxs26("div", { className: "mt-4 flex flex-col gap-1.5", children: [
-                /* @__PURE__ */ jsx28("label", { htmlFor: "account-list-name", className: "text-[12px] font-medium text-text-secondary", children: fieldLabel }),
+                /* @__PURE__ */ jsx28("label", { htmlFor: fieldId, className: "text-[12px] font-medium text-text-secondary", children: fieldLabel }),
                 /* @__PURE__ */ jsx28(
                   "input",
                   {
-                    id: "account-list-name",
+                    id: fieldId,
                     autoFocus: true,
                     value: name,
                     onChange: (e) => setName(e.target.value),
@@ -3065,7 +3137,7 @@ function SortButton({
         // subtly tighter than the fixed headers next to them. A control
         // should carry exactly the properties that do not inherit, and
         // nothing more.
-        "group inline-flex items-center gap-1 uppercase transition-colors",
+        "group inline-flex items-center gap-1 uppercase transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
         ALIGN[align],
         !disabled && "hover:text-text-primary"
       ),
@@ -3337,7 +3409,7 @@ function TablePagination({
 }
 
 // src/DateRangePicker.tsx
-import { useEffect as useEffect11, useMemo as useMemo4, useRef as useRef11, useState as useState12 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo4, useRef as useRef12, useState as useState12 } from "react";
 import { ChevronDown as ChevronDown10 } from "lucide-react";
 import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
 var MONTH_ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
@@ -3404,7 +3476,7 @@ function DateRangePicker({
   const [open, setOpen] = useState12(false);
   const [value, setValue] = useState12(defaultValue);
   const [draft, setDraft] = useState12(defaultValue);
-  const ref = useRef11(null);
+  const ref = useRef12(null);
   const [fromMo, setFromMo] = useState12(end.getMonth());
   const [fromYr, setFromYr] = useState12(end.getFullYear() - 1);
   const [toMo, setToMo] = useState12(end.getMonth());
@@ -3511,7 +3583,7 @@ function DateRangePicker({
 }
 
 // src/MultiSelectFilter.tsx
-import { useCallback as useCallback4, useEffect as useEffect12, useRef as useRef12, useState as useState13 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect12, useRef as useRef13, useState as useState13 } from "react";
 import { ChevronDown as ChevronDown11, Check as Check7, Minus as Minus2, Search as Search5, X as X4 } from "lucide-react";
 import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
 function MultiSelectFilter({
@@ -3540,7 +3612,7 @@ function MultiSelectFilter({
   const [open, setOpen] = useState13(false);
   const [q, setQ] = useState13("");
   const [draft, setDraft] = useState13(selected);
-  const ref = useRef12(null);
+  const ref = useRef13(null);
   const close = useCallback4(() => {
     setOpen(false);
     setQ("");
@@ -3794,11 +3866,11 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className, te
 }
 
 // src/AISpark.tsx
-import { useId as useId2 } from "react";
+import { useId as useId5 } from "react";
 import { Sparkles } from "lucide-react";
 import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
 function AISpark({ size = 16, className }) {
-  const id = useId2();
+  const id = useId5();
   return /* @__PURE__ */ jsxs34(Fragment5, { children: [
     /* @__PURE__ */ jsx39("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ jsx39("defs", { children: /* @__PURE__ */ jsxs34("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "1", children: [
       /* @__PURE__ */ jsx39("stop", { offset: "0%", stopColor: "var(--mr-color-brand-primary)" }),