@mediaradar/design-components 0.13.0 → 0.15.0

package/dist/index.cjs

@@ -517,17 +517,22 @@ var TONE_STYLE = {
   }
 };
 var KIND = {
-  label: "px-2 py-0.5",
+  // Twice the vertical room the first version had. At py-0.5 the pill hugged
+  // its text and read as a tight little tag; at py-1 it reads as a deliberate
+  // object. Taken from the status pills the product had already arrived at by
+  // hand, which were noticeably more comfortable than anything else -- the
+  // breathing room was what made them so, not their extra pixel of type.
+  label: "px-2.5 py-1",
   // Square-ish and centred, with a floor width so a 1-digit and a 3-digit
   // count are the same shape, and lining figures so the width does not shift
   // as the number changes.
   count: "h-[18px] min-w-[18px] justify-center px-1.5 tabular-nums",
   // The only kind that shouts. Caps need the letterspacing -- caps set tight
   // are harder to read than the sentence case they replaced.
-  eyebrow: "px-2 py-0.5 uppercase tracking-wider"
+  eyebrow: "px-2.5 py-1 uppercase tracking-wider"
 };
-function Badge({ tone = "neutral", kind = "label", children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+function Badge({ tone = "neutral", kind = "label", dot = false, children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "span",
     {
       style: TONE_STYLE[tone],
@@ -541,7 +546,10 @@ function Badge({ tone = "neutral", kind = "label", children, className }) {
         KIND[kind],
         className
       ),
-      children
+      children: [
+        dot && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", className: "size-1.5 shrink-0 rounded-full bg-current" }),
+        children
+      ]
     }
   );
 }
@@ -1903,6 +1911,19 @@ var import_jsx_runtime19 = require("react/jsx-runtime");
 function cx6(...parts) {
   return parts.filter(Boolean).join(" ");
 }
+function exitDurationMs(el) {
+  if (typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return 0;
+  const cs = window.getComputedStyle(el);
+  if (cs.transitionProperty === "none") return 0;
+  const toMs = (v) => {
+    const n = parseFloat(v);
+    if (!Number.isFinite(n)) return 0;
+    return v.trim().endsWith("ms") ? n : n * 1e3;
+  };
+  const durations = cs.transitionDuration.split(",").map(toMs);
+  const delays = cs.transitionDelay.split(",").map(toMs);
+  return Math.max(0, ...durations.map((d, i) => d + (delays[i] ?? delays[0] ?? 0)));
+}
 function Tooltip({
   label,
   children,
@@ -1922,6 +1943,10 @@ function Tooltip({
   const boxRef = (0, import_react10.useRef)(null);
   const hideTimer = (0, import_react10.useRef)(null);
   const showTimer = (0, import_react10.useRef)(null);
+  const exitTimer = (0, import_react10.useRef)(null);
+  const [shown, setShown] = (0, import_react10.useState)(false);
+  const openRef = (0, import_react10.useRef)(false);
+  const mountedRef = (0, import_react10.useRef)(false);
   const id = (0, import_react10.useId)();
   const clearHideTimer = () => {
     if (hideTimer.current) {
@@ -1935,10 +1960,17 @@ function Tooltip({
       showTimer.current = null;
     }
   };
+  const clearExitTimer = () => {
+    if (exitTimer.current) {
+      clearTimeout(exitTimer.current);
+      exitTimer.current = null;
+    }
+  };
   (0, import_react10.useEffect)(
     () => () => {
       clearHideTimer();
       clearShowTimer();
+      clearExitTimer();
     },
     []
   );
@@ -1946,26 +1978,56 @@ function Tooltip({
     const el = anchorRef ? anchorRef.current : ref.current;
     if (!el) return;
     if (whenTruncated && el.scrollWidth <= el.clientWidth) return;
+    clearExitTimer();
+    openRef.current = true;
     const r = el.getBoundingClientRect();
-    setBoxWidth(null);
+    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 show = () => {
     clearHideTimer();
-    if (delay > 0) {
+    clearShowTimer();
+    if (delay > 0 && !mountedRef.current) {
       showTimer.current = setTimeout(reveal, delay);
     } else {
       reveal();
     }
   };
-  const hideNow = () => {
-    clearShowTimer();
-    clearHideTimer();
+  const unmount = () => {
+    clearExitTimer();
+    if (openRef.current || !mountedRef.current) return;
+    mountedRef.current = false;
     setAnchor(null);
     setBoxWidth(null);
     if (anchorRef?.current) anchorRef.current.removeAttribute("aria-describedby");
   };
+  const hideNow = () => {
+    clearShowTimer();
+    clearHideTimer();
+    openRef.current = false;
+    if (!mountedRef.current) return;
+    setShown(false);
+    clearExitTimer();
+    const ms = boxRef.current ? exitDurationMs(boxRef.current) : 0;
+    if (ms === 0) {
+      unmount();
+      return;
+    }
+    exitTimer.current = setTimeout(unmount, ms + 50);
+  };
+  const keepOpen = () => {
+    clearHideTimer();
+    if (openRef.current || !mountedRef.current) return;
+    clearExitTimer();
+    openRef.current = true;
+    setShown(true);
+  };
+  const onBoxTransitionEnd = (e) => {
+    if (e.target !== e.currentTarget || e.propertyName !== "opacity") return;
+    if (!openRef.current) unmount();
+  };
   const hide = () => {
     clearShowTimer();
     if (!interactive) {
@@ -1995,6 +2057,7 @@ function Tooltip({
     const el = boxRef.current;
     if (!el) return;
     setBoxWidth(el.getBoundingClientRect().width);
+    if (openRef.current) setShown(true);
   }, [anchor, label]);
   const margin = 8;
   let style = { top: 0, left: 0 };
@@ -2022,10 +2085,19 @@ function Tooltip({
         id,
         "data-testid": testIdPrefix && `${testIdPrefix}-tooltip`,
         style: { top: style.top, left: style.left, right: style.right, visibility: boxWidth == null ? "hidden" : "visible" },
-        onMouseEnter: interactive ? clearHideTimer : void 0,
+        onMouseEnter: interactive ? keepOpen : void 0,
         onMouseLeave: interactive ? hide : void 0,
+        onTransitionEnd: onBoxTransitionEnd,
         className: cx6(
           "fixed z-[90] w-max max-w-xs whitespace-normal break-words px-2.5 py-1.5 text-xs leading-snug",
+          // Fade in/out. The sys duration token rather than a ref one:
+          // it is what Button's hover/press transition uses, and a
+          // tooltip's fade is the same kind of interactive feedback.
+          // design-tokens has no in-out curve (ease-interactive is the
+          // decelerating "standard" curve), so ease-in-out is Tailwind's.
+          "transition-opacity duration-(--mr-motion-duration-interactive) ease-in-out motion-reduce:transition-none",
+          shown ? "opacity-100" : "opacity-0",
+          // Non-interactive: never a pointer target, fade-out included.
           interactive ? "pointer-events-auto" : "pointer-events-none",
           variant === "inverted" ? "rounded-control bg-text-primary text-surface" : "rounded-control border border-border-default bg-surface text-text-primary shadow-overlay",
           translate
@@ -2765,21 +2837,19 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
 );
 var Button = (0, import_react13.forwardRef)(
   ({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }, ref) => {
-    const Comp = asChild ? import_react_slot.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-      Comp,
-      {
-        className: cn(buttonVariants({ variant, size, className })),
-        ref,
-        disabled: disabled || loading,
-        "aria-busy": loading || void 0,
-        ...props,
-        children: [
-          loading && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react15.Loader2, { className: "size-4 shrink-0 animate-spin", "aria-hidden": "true" }),
-          children
-        ]
-      }
-    );
+    const shared = {
+      className: cn(buttonVariants({ variant, size, className })),
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      ...props
+    };
+    if (asChild) {
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_slot.Slot, { ref, ...shared, children });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("button", { ref, ...shared, children: [
+      loading && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react15.Loader2, { className: "size-4 shrink-0 animate-spin", "aria-hidden": "true" }),
+      children
+    ] });
   }
 );
 Button.displayName = "Button";