@mediaradar/design-components 0.14.0 → 0.15.0

package/dist/index.d.cts

@@ -978,18 +978,29 @@ declare function StackedColumnPlaceholder({ height, width, legendRows, axis, }:
  * escapes both `overflow` clipping inside scrollable panels and the broken
  * `fixed` containing block a transformed ancestor creates.
  * @tokens rounded-control, border-border-default, bg-surface, shadow-overlay,
- * text-text-primary, bg-text-primary, text-surface
+ * text-text-primary, bg-text-primary, text-surface,
+ * duration-(--mr-motion-duration-interactive)
  * @variant surface - Default. Themed surface/border bubble -- matches the
  * Recharts chart tooltips this was originally built for.
  * @variant inverted - Solid dark pill (no border) -- for a tooltip sitting
  * over a nav rail or other icon-only surface, where the themed surface bubble
  * doesn't read as clearly against a busy background.
  * @behavior Shows on hover and on keyboard focus (so it stays reachable
- * without a pointer) after `delay` ms (0 = immediate, the default). Hides
- * immediately on mouseleave/blur, cancelling a pending delayed show if it
- * hasn't fired yet -- except in `interactive` mode, which delays the hide
- * briefly so the pointer can travel from the trigger into the tooltip's own
- * content. Pass `whenTruncated` to only surface it once the trigger's content
+ * without a pointer) after `delay` ms (0 = immediate, the default). Fades in
+ * and out (opacity, `ease-in-out`, over the sys
+ * `--mr-motion-duration-interactive` token -- 200ms today); the bubble stays
+ * mounted through the fade-out and is removed from the DOM once it ends.
+ * Under `prefers-reduced-motion: reduce` there is no fade: it appears and is
+ * removed instantly. The hide starts on mouseleave/blur, cancelling a pending
+ * delayed show if it hasn't fired yet -- except in `interactive` mode, which
+ * delays the hide briefly so the pointer can travel from the trigger into the
+ * tooltip's own content. Re-hovering (or re-focusing) the trigger while the
+ * bubble is still fading out reverses the fade from where it is, without
+ * waiting out `delay` again, since it is already on screen; so does moving
+ * the pointer back into an `interactive` bubble. A non-interactive bubble is
+ * `pointer-events-none` throughout, fade-out included, so it never
+ * intercepts clicks meant for what sits under it. Pass `whenTruncated` to
+ * only surface it once the trigger's content
  * is actually clipped by ellipsis (`scrollWidth > clientWidth`). `placement`
  * 'top'/'bottom' centre (or `align="start"` left-align) on the trigger;
  * 'right' centres vertically beside the anchor and 'bottom-end' hangs below,
@@ -1402,9 +1413,20 @@ declare const buttonVariants: (props?: ({
     size?: "icon" | "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-    /** Render the button styling onto the single child element instead of a `<button>` (e.g. a router `<Link>`). */
+    /**
+     * Render the button styling onto the single child element instead of a
+     * `<button>` (e.g. a router `<Link>` or an `<a>`). The child must be exactly
+     * one React element; it keeps its own tag, content and semantics.
+     */
     asChild?: boolean;
-    /** Shows a spinner in place of the leading edge and disables the button. */
+    /**
+     * Shows a spinner in place of the leading edge and disables the button.
+     * With `asChild` there is no spinner (the child owns its content, and a
+     * spinner belongs inside a real `<button>`): `loading` only sets
+     * `aria-busy` and forwards `disabled` to the child, which only has an
+     * effect on elements that support it -- an `<a>` stays clickable, so block
+     * navigation yourself while loading.
+     */
     loading?: boolean;
     /** Button label and/or icon. With `asChild`, the single element that receives the button styling. */
     children?: ReactNode;
@@ -1430,8 +1452,13 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
  * but Button suppresses it (`focus-visible:outline-hidden focus-visible:ring-0`)
  * and relies on its per-variant hover/brightness treatment instead. `loading`
  * implies `disabled` (and sets `aria-busy`), since a control mid-submit
- * shouldn't accept another click.
- * @a11y Renders a native <button>, so it keeps native keyboard behaviour.
+ * shouldn't accept another click. `asChild` renders only the child element,
+ * through Radix `Slot`, with the button classes, ref and remaining props
+ * merged onto it -- no wrapping `<button>`. With `asChild`, `loading` draws
+ * no spinner; it sets `aria-busy` and forwards `disabled`, which an `<a>`
+ * ignores, so a loading link stays clickable unless the caller blocks it.
+ * @a11y Renders a native <button>, so it keeps native keyboard behaviour
+ * (with `asChild`, the child element's own semantics apply instead).
  * `loading` sets aria-busy, and the spinner is aria-hidden. Icon-only
  * usage needs an aria-label from the caller -- nothing here supplies one.
  * @usage
@@ -1440,6 +1467,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
  * <Button variant="secondary" size="sm">Cancel</Button>
  * <Button variant="danger">Delete</Button>
  * <Button variant="primary" loading>Saving…</Button>
+ * <Button asChild variant="secondary"><a href="/reports">View reports</a></Button>
  * ```
  */
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;

package/dist/index.d.ts

@@ -978,18 +978,29 @@ declare function StackedColumnPlaceholder({ height, width, legendRows, axis, }:
  * escapes both `overflow` clipping inside scrollable panels and the broken
  * `fixed` containing block a transformed ancestor creates.
  * @tokens rounded-control, border-border-default, bg-surface, shadow-overlay,
- * text-text-primary, bg-text-primary, text-surface
+ * text-text-primary, bg-text-primary, text-surface,
+ * duration-(--mr-motion-duration-interactive)
  * @variant surface - Default. Themed surface/border bubble -- matches the
  * Recharts chart tooltips this was originally built for.
  * @variant inverted - Solid dark pill (no border) -- for a tooltip sitting
  * over a nav rail or other icon-only surface, where the themed surface bubble
  * doesn't read as clearly against a busy background.
  * @behavior Shows on hover and on keyboard focus (so it stays reachable
- * without a pointer) after `delay` ms (0 = immediate, the default). Hides
- * immediately on mouseleave/blur, cancelling a pending delayed show if it
- * hasn't fired yet -- except in `interactive` mode, which delays the hide
- * briefly so the pointer can travel from the trigger into the tooltip's own
- * content. Pass `whenTruncated` to only surface it once the trigger's content
+ * without a pointer) after `delay` ms (0 = immediate, the default). Fades in
+ * and out (opacity, `ease-in-out`, over the sys
+ * `--mr-motion-duration-interactive` token -- 200ms today); the bubble stays
+ * mounted through the fade-out and is removed from the DOM once it ends.
+ * Under `prefers-reduced-motion: reduce` there is no fade: it appears and is
+ * removed instantly. The hide starts on mouseleave/blur, cancelling a pending
+ * delayed show if it hasn't fired yet -- except in `interactive` mode, which
+ * delays the hide briefly so the pointer can travel from the trigger into the
+ * tooltip's own content. Re-hovering (or re-focusing) the trigger while the
+ * bubble is still fading out reverses the fade from where it is, without
+ * waiting out `delay` again, since it is already on screen; so does moving
+ * the pointer back into an `interactive` bubble. A non-interactive bubble is
+ * `pointer-events-none` throughout, fade-out included, so it never
+ * intercepts clicks meant for what sits under it. Pass `whenTruncated` to
+ * only surface it once the trigger's content
  * is actually clipped by ellipsis (`scrollWidth > clientWidth`). `placement`
  * 'top'/'bottom' centre (or `align="start"` left-align) on the trigger;
  * 'right' centres vertically beside the anchor and 'bottom-end' hangs below,
@@ -1402,9 +1413,20 @@ declare const buttonVariants: (props?: ({
     size?: "icon" | "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-    /** Render the button styling onto the single child element instead of a `<button>` (e.g. a router `<Link>`). */
+    /**
+     * Render the button styling onto the single child element instead of a
+     * `<button>` (e.g. a router `<Link>` or an `<a>`). The child must be exactly
+     * one React element; it keeps its own tag, content and semantics.
+     */
     asChild?: boolean;
-    /** Shows a spinner in place of the leading edge and disables the button. */
+    /**
+     * Shows a spinner in place of the leading edge and disables the button.
+     * With `asChild` there is no spinner (the child owns its content, and a
+     * spinner belongs inside a real `<button>`): `loading` only sets
+     * `aria-busy` and forwards `disabled` to the child, which only has an
+     * effect on elements that support it -- an `<a>` stays clickable, so block
+     * navigation yourself while loading.
+     */
     loading?: boolean;
     /** Button label and/or icon. With `asChild`, the single element that receives the button styling. */
     children?: ReactNode;
@@ -1430,8 +1452,13 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
  * but Button suppresses it (`focus-visible:outline-hidden focus-visible:ring-0`)
  * and relies on its per-variant hover/brightness treatment instead. `loading`
  * implies `disabled` (and sets `aria-busy`), since a control mid-submit
- * shouldn't accept another click.
- * @a11y Renders a native <button>, so it keeps native keyboard behaviour.
+ * shouldn't accept another click. `asChild` renders only the child element,
+ * through Radix `Slot`, with the button classes, ref and remaining props
+ * merged onto it -- no wrapping `<button>`. With `asChild`, `loading` draws
+ * no spinner; it sets `aria-busy` and forwards `disabled`, which an `<a>`
+ * ignores, so a loading link stays clickable unless the caller blocks it.
+ * @a11y Renders a native <button>, so it keeps native keyboard behaviour
+ * (with `asChild`, the child element's own semantics apply instead).
  * `loading` sets aria-busy, and the spinner is aria-hidden. Icon-only
  * usage needs an aria-label from the caller -- nothing here supplies one.
  * @usage
@@ -1440,6 +1467,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
  * <Button variant="secondary" size="sm">Cancel</Button>
  * <Button variant="danger">Delete</Button>
  * <Button variant="primary" loading>Saving…</Button>
+ * <Button asChild variant="secondary"><a href="/reports">View reports</a></Button>
  * ```
  */
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;

package/dist/index.js

@@ -1836,6 +1836,19 @@ import { jsx as jsx19, jsxs as jsxs17 } from "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,
@@ -1855,6 +1868,10 @@ function Tooltip({
   const boxRef = useRef9(null);
   const hideTimer = useRef9(null);
   const showTimer = useRef9(null);
+  const exitTimer = useRef9(null);
+  const [shown, setShown] = useState8(false);
+  const openRef = useRef9(false);
+  const mountedRef = useRef9(false);
   const id = useId();
   const clearHideTimer = () => {
     if (hideTimer.current) {
@@ -1868,10 +1885,17 @@ function Tooltip({
       showTimer.current = null;
     }
   };
+  const clearExitTimer = () => {
+    if (exitTimer.current) {
+      clearTimeout(exitTimer.current);
+      exitTimer.current = null;
+    }
+  };
   useEffect8(
     () => () => {
       clearHideTimer();
       clearShowTimer();
+      clearExitTimer();
     },
     []
   );
@@ -1879,26 +1903,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) {
@@ -1928,6 +1982,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 };
@@ -1955,10 +2010,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
@@ -2698,21 +2762,19 @@ var buttonVariants = cva(
 );
 var Button = forwardRef2(
   ({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsxs23(
-      Comp,
-      {
-        className: cn(buttonVariants({ variant, size, className })),
-        ref,
-        disabled: disabled || loading,
-        "aria-busy": loading || void 0,
-        ...props,
-        children: [
-          loading && /* @__PURE__ */ jsx25(Loader22, { 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__ */ jsx25(Slot, { ref, ...shared, children });
+    }
+    return /* @__PURE__ */ jsxs23("button", { ref, ...shared, children: [
+      loading && /* @__PURE__ */ jsx25(Loader22, { className: "size-4 shrink-0 animate-spin", "aria-hidden": "true" }),
+      children
+    ] });
   }
 );
 Button.displayName = "Button";