@mediaradar/design-components 0.1.0

package/README.md

@@ -0,0 +1,80 @@
+# @mediaradar/design-components
+
+Real, shared React component primitives — the canonical implementation for
+components genuinely common across consuming apps (`insights-studio-prototype`,
+`mr-clientapps-insights-studio`), published as a real npm package so there's
+structurally only one implementation instead of two that can silently drift.
+
+**Status: spike/pilot.** One component (`InfoTip`) so far, not yet published
+to the real npm registry, not yet consumed by `mr-clientapps-insights-studio`
+at all. See `gh-design-system`'s open spike PR for the current state.
+
+---
+
+## What belongs here — and what doesn't
+
+Not every shared-feeling component should move here. Two failure modes to
+watch for, in opposite directions:
+
+**Doesn't belong here: a concept that only exists in one app.** If
+`mr-clientapps-insights-studio` has nothing resembling a component, or has
+something meaningfully more sophisticated for the same job (its own
+`FilterDrawer`/`FilterPanel` system vs. a prototype's simpler filter
+components, for example), forcing it into a shared package is a downgrade
+for whichever app had the better version, not an improvement. Leave it
+where it is.
+
+**The escape hatch — a genuine conflict discovered mid-migration.** Sometimes
+a component looks like a good candidate until reconciliation actually starts,
+and it turns out the two apps need behavior that's genuinely incompatible —
+not just different-by-convenience, but conflicting requirements neither side
+can drop. When that happens, **pull the component back out of this package**
+rather than forcing a compromise that serves neither app well. A component
+that ends up split by `if (isMrClientapps)`-style branching inside a
+"shared" primitive has stopped being shared in any meaningful sense — it's
+just drift with extra indirection. Keeping it separate, in each app's own
+tree, is the honest outcome in that case, not a failure of the process.
+
+This hasn't happened yet — `InfoTip`'s reconciliation (hover-trigger support
+from `insights-studio-prototype`, z-index layering awareness from
+`mr-clientapps-insights-studio`) turned out to be a clean, additive merge,
+not a conflict. But the difference between "additive merge" and "genuine
+conflict" is a judgment call every future migration needs to make freshly,
+not assume away because the first one went smoothly.
+
+**When it's genuinely additive but app-specific**, prefer these over
+forking, in order:
+1. **A prop with a default matching current behavior** — see `InfoTip`'s
+   own `trigger` prop: `mr-clientapps-insights-studio` never has to know it
+   exists, since the default preserves exactly what it already had.
+2. **Composition** — an app wraps the shared primitive in its own local
+   component to add app-specific concerns (analytics, entitlements) the
+   shared primitive shouldn't know about. The shared component stays
+   strictly presentational.
+
+## Reconciling two existing implementations
+
+When a component already exists separately in both apps (as opposed to
+being net-new), verify differences empirically before picking a winner —
+don't assume one app's version is "more correct." `InfoTip`'s reconciliation
+found real, verified divergence in both directions: `mr-clientapps`' bare
+`outline` utility turned out to rely on a Tailwind v4 implementation
+fallback rather than the intended `outline-solid` syntax (confirmed by
+actually compiling both with the real installed Tailwind, not assumed), its
+`shadow-2` didn't exist anywhere in `@mediaradar/design-tokens` at all (a
+soon-to-be-stale local name), and its z-index value turned out to be in a
+completely different numeric scale than this package's own semantic
+`z-tooltip` token — using the "proper" shared token there would have
+actually broken the thing its own code comment was trying to guarantee.
+None of that would have surfaced without checking directly.
+
+## Peer dependencies
+
+`react`/`react-dom` are peer dependencies, never bundled — a bundled React
+would sit alongside a consuming app's own instance instead of using it,
+breaking hooks/context silently. `@mediaradar/design-tokens` is also a peer
+dependency, even though nothing here literally imports from it — components
+use Tailwind class names that only resolve correctly once a consuming app
+already has that package's Tailwind theme wired up. Declaring it as a peer
+(rather than not declaring it at all) means `npm install` at least warns if
+it's missing, instead of the component silently rendering unstyled.

package/dist/index.cjs

@@ -0,0 +1,103 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  InfoTip: () => InfoTip
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/InfoTip.tsx
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function InfoTip({ text, size = 11, label = "More information", trigger = "click" }) {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [pos, setPos] = (0, import_react.useState)(null);
+  const btnRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (!btnRef.current?.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    window.addEventListener("mousedown", onDown);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("mousedown", onDown);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const place = () => {
+    if (!btnRef.current) return;
+    const r = btnRef.current.getBoundingClientRect();
+    const width = Math.min(260, window.innerWidth - 24);
+    const left = Math.max(12, Math.min(r.left, window.innerWidth - width - 12));
+    setPos({ top: r.bottom + 6, left, width });
+  };
+  const show = () => {
+    place();
+    setOpen(true);
+  };
+  const toggle = (e) => {
+    e.stopPropagation();
+    if (!open) show();
+    else setOpen(false);
+  };
+  const hoverProps = trigger === "hover" ? {
+    onMouseEnter: show,
+    onMouseLeave: () => setOpen(false),
+    onFocus: show,
+    onBlur: () => setOpen(false)
+  } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        ref: btnRef,
+        type: "button",
+        onClick: toggle,
+        "aria-label": label,
+        "aria-expanded": open,
+        ...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__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Info, { size, "aria-hidden": "true" })
+      }
+    ),
+    open && pos && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          role: "tooltip",
+          style: { position: "fixed", top: pos.top, left: pos.left, width: pos.width },
+          className: "z-[90] rounded-control border border-border 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
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InfoTip
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/InfoTip.tsx"],"sourcesContent":["export { InfoTip } from \"./InfoTip\";\nexport type { InfoTipProps } from \"./InfoTip\";\n","\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Info } from \"lucide-react\";\n\n/**\n * @pattern InfoTip\n * @description Info tooltip — a small info glyph that opens a portalled,\n * viewport-clamped bubble. Mirrors the Publisher Intel header affordance so\n * page subtitles can collapse into the eyebrow.\n * @tokens text-text-tertiary, rounded-control, border-border, bg-surface,\n * shadow-overlay, text-text-secondary, focus-visible:outline-border-focus,\n * hover:text-text-primary, tracking-normal\n * @dependencies lucide-react\n * @behavior 'click' mode toggles on click only. 'hover' mode also opens on\n * keyboard focus and closes on blur, so it stays reachable without a mouse —\n * not just a decorative hover effect. Both modes close on Escape and on any\n * outside click. The bubble is portaled to document.body and repositions\n * itself to stay clear of the right viewport edge.\n * @usage\n * ```tsx\n * <InfoTip text=\"Trims time periods to data that has finalized across the selected media formats.\" />\n * <InfoTip text=\"Hover variant\" trigger=\"hover\" />\n * ```\n */\nexport interface InfoTipProps {\n  /** The bubble's content. */\n  text: string;\n  /** Glyph size in pixels. */\n  size?: number;\n  /** Accessible label for the trigger button. */\n  label?: string;\n  /**\n   * 'click' toggles the bubble (default); 'hover' reveals it on hover, and\n   * also on keyboard focus so it stays reachable without a pointer.\n   */\n  trigger?: \"click\" | \"hover\";\n}\n\nexport function InfoTip({ text, size = 11, label = \"More information\", trigger = \"click\" }: InfoTipProps) {\n  const [open, setOpen] = useState(false);\n  const [pos, setPos] = useState<{ top: number; left: number; width: number } | null>(null);\n  const btnRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (!open) return;\n    const onDown = (e: MouseEvent) => {\n      if (!btnRef.current?.contains(e.target as Node)) setOpen(false);\n    };\n    const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && setOpen(false);\n    window.addEventListener(\"mousedown\", onDown);\n    window.addEventListener(\"keydown\", onKey);\n    return () => {\n      window.removeEventListener(\"mousedown\", onDown);\n      window.removeEventListener(\"keydown\", onKey);\n    };\n  }, [open]);\n\n  // Position the bubble under the glyph, clamped within the viewport so it\n  // never squeezes against the right edge.\n  const place = () => {\n    if (!btnRef.current) return;\n    const r = btnRef.current.getBoundingClientRect();\n    const width = Math.min(260, window.innerWidth - 24);\n    const left = Math.max(12, Math.min(r.left, window.innerWidth - width - 12));\n    setPos({ top: r.bottom + 6, left, width });\n  };\n\n  const show = () => {\n    place();\n    setOpen(true);\n  };\n\n  const toggle = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!open) show();\n    else setOpen(false);\n  };\n\n  // Hover trigger also opens on keyboard focus so it stays reachable.\n  const hoverProps =\n    trigger === \"hover\"\n      ? {\n          onMouseEnter: show,\n          onMouseLeave: () => setOpen(false),\n          onFocus: show,\n          onBlur: () => setOpen(false),\n        }\n      : {};\n\n  return (\n    <>\n      <button\n        ref={btnRef}\n        type=\"button\"\n        onClick={toggle}\n        aria-label={label}\n        aria-expanded={open}\n        {...hoverProps}\n        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\"\n      >\n        <Info size={size} aria-hidden=\"true\" />\n      </button>\n      {open &&\n        pos &&\n        createPortal(\n          <div\n            role=\"tooltip\"\n            style={{ position: \"fixed\", top: pos.top, left: pos.left, width: pos.width }}\n            // z-[90]: deliberately an arbitrary value, not @mediaradar/design-tokens'\n            // semantic z-tooltip (1200) -- checked directly: mr-clientapps-insights-\n            // studio's real toast layer is a literal z-[100] (ToastProvider.tsx),\n            // completely unrelated in scale to design-tokens' 1000+ semantic z-index\n            // tokens (z-dropdown/z-modal/z-tooltip). Using the shared token here\n            // would render this bubble ABOVE that app's toasts -- the opposite of\n            // the original intent (a tooltip should never cover a notification).\n            // 90 sits above mr-clientapps' modals (below its own z-[100] toasts) as\n            // of this writing -- portals to document.body, becoming a sibling of any\n            // open dialog rather than a child of it, so a lower z-index would render\n            // invisibly behind the dialog that triggered it. RE-VERIFY this number\n            // against any NEW consuming app's own z-index scale before trusting it;\n            // this is a leaf component making an assumption about global stacking\n            // context it can't fully see.\n            className=\"z-[90] rounded-control border border-border bg-surface px-3 py-2 text-[12px] font-normal not-italic normal-case leading-relaxed tracking-normal text-text-secondary shadow-overlay\"\n          >\n            {text}\n          </div>,\n          document.body\n        )}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAA4C;AAC5C,uBAA6B;AAC7B,0BAAqB;AAwFjB;AApDG,SAAS,QAAQ,EAAE,MAAM,OAAO,IAAI,QAAQ,oBAAoB,UAAU,QAAQ,GAAiB;AACxG,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,CAAC,KAAK,MAAM,QAAI,uBAA8D,IAAI;AACxF,QAAM,aAAS,qBAA0B,IAAI;AAE7C,8BAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,SAAS,CAAC,MAAkB;AAChC,UAAI,CAAC,OAAO,SAAS,SAAS,EAAE,MAAc,EAAG,SAAQ,KAAK;AAAA,IAChE;AACA,UAAM,QAAQ,CAAC,MAAqB,EAAE,QAAQ,YAAY,QAAQ,KAAK;AACvE,WAAO,iBAAiB,aAAa,MAAM;AAC3C,WAAO,iBAAiB,WAAW,KAAK;AACxC,WAAO,MAAM;AACX,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,WAAW,KAAK;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAIT,QAAM,QAAQ,MAAM;AAClB,QAAI,CAAC,OAAO,QAAS;AACrB,UAAM,IAAI,OAAO,QAAQ,sBAAsB;AAC/C,UAAM,QAAQ,KAAK,IAAI,KAAK,OAAO,aAAa,EAAE;AAClD,UAAM,OAAO,KAAK,IAAI,IAAI,KAAK,IAAI,EAAE,MAAM,OAAO,aAAa,QAAQ,EAAE,CAAC;AAC1E,WAAO,EAAE,KAAK,EAAE,SAAS,GAAG,MAAM,MAAM,CAAC;AAAA,EAC3C;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM;AACN,YAAQ,IAAI;AAAA,EACd;AAEA,QAAM,SAAS,CAAC,MAAwB;AACtC,MAAE,gBAAgB;AAClB,QAAI,CAAC,KAAM,MAAK;AAAA,QACX,SAAQ,KAAK;AAAA,EACpB;AAGA,QAAM,aACJ,YAAY,UACR;AAAA,IACE,cAAc;AAAA,IACd,cAAc,MAAM,QAAQ,KAAK;AAAA,IACjC,SAAS;AAAA,IACT,QAAQ,MAAM,QAAQ,KAAK;AAAA,EAC7B,IACA,CAAC;AAEP,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAS;AAAA,QACT,cAAY;AAAA,QACZ,iBAAe;AAAA,QACd,GAAG;AAAA,QACJ,WAAU;AAAA,QAEV,sDAAC,4BAAK,MAAY,eAAY,QAAO;AAAA;AAAA,IACvC;AAAA,IACC,QACC,WACA;AAAA,MACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,EAAE,UAAU,SAAS,KAAK,IAAI,KAAK,MAAM,IAAI,MAAM,OAAO,IAAI,MAAM;AAAA,UAe3E,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,38 @@
+import * as react from 'react';
+
+/**
+ * @pattern InfoTip
+ * @description Info tooltip — a small info glyph that opens a portalled,
+ * viewport-clamped bubble. Mirrors the Publisher Intel header affordance so
+ * page subtitles can collapse into the eyebrow.
+ * @tokens text-text-tertiary, rounded-control, border-border, bg-surface,
+ * shadow-overlay, text-text-secondary, focus-visible:outline-border-focus,
+ * hover:text-text-primary, tracking-normal
+ * @dependencies lucide-react
+ * @behavior 'click' mode toggles on click only. 'hover' mode also opens on
+ * keyboard focus and closes on blur, so it stays reachable without a mouse —
+ * not just a decorative hover effect. Both modes close on Escape and on any
+ * outside click. The bubble is portaled to document.body and repositions
+ * itself to stay clear of the right viewport edge.
+ * @usage
+ * ```tsx
+ * <InfoTip text="Trims time periods to data that has finalized across the selected media formats." />
+ * <InfoTip text="Hover variant" trigger="hover" />
+ * ```
+ */
+interface InfoTipProps {
+    /** The bubble's content. */
+    text: string;
+    /** Glyph size in pixels. */
+    size?: number;
+    /** Accessible label for the trigger button. */
+    label?: string;
+    /**
+     * 'click' toggles the bubble (default); 'hover' reveals it on hover, and
+     * also on keyboard focus so it stays reachable without a pointer.
+     */
+    trigger?: "click" | "hover";
+}
+declare function InfoTip({ text, size, label, trigger }: InfoTipProps): react.JSX.Element;
+
+export { InfoTip, type InfoTipProps };

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+import * as react from 'react';
+
+/**
+ * @pattern InfoTip
+ * @description Info tooltip — a small info glyph that opens a portalled,
+ * viewport-clamped bubble. Mirrors the Publisher Intel header affordance so
+ * page subtitles can collapse into the eyebrow.
+ * @tokens text-text-tertiary, rounded-control, border-border, bg-surface,
+ * shadow-overlay, text-text-secondary, focus-visible:outline-border-focus,
+ * hover:text-text-primary, tracking-normal
+ * @dependencies lucide-react
+ * @behavior 'click' mode toggles on click only. 'hover' mode also opens on
+ * keyboard focus and closes on blur, so it stays reachable without a mouse —
+ * not just a decorative hover effect. Both modes close on Escape and on any
+ * outside click. The bubble is portaled to document.body and repositions
+ * itself to stay clear of the right viewport edge.
+ * @usage
+ * ```tsx
+ * <InfoTip text="Trims time periods to data that has finalized across the selected media formats." />
+ * <InfoTip text="Hover variant" trigger="hover" />
+ * ```
+ */
+interface InfoTipProps {
+    /** The bubble's content. */
+    text: string;
+    /** Glyph size in pixels. */
+    size?: number;
+    /** Accessible label for the trigger button. */
+    label?: string;
+    /**
+     * 'click' toggles the bubble (default); 'hover' reveals it on hover, and
+     * also on keyboard focus so it stays reachable without a pointer.
+     */
+    trigger?: "click" | "hover";
+}
+declare function InfoTip({ text, size, label, trigger }: InfoTipProps): react.JSX.Element;
+
+export { InfoTip, type InfoTipProps };

package/dist/index.js

@@ -0,0 +1,76 @@
+// src/InfoTip.tsx
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Info } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function InfoTip({ text, size = 11, label = "More information", trigger = "click" }) {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState(null);
+  const btnRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (!btnRef.current?.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    window.addEventListener("mousedown", onDown);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("mousedown", onDown);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const place = () => {
+    if (!btnRef.current) return;
+    const r = btnRef.current.getBoundingClientRect();
+    const width = Math.min(260, window.innerWidth - 24);
+    const left = Math.max(12, Math.min(r.left, window.innerWidth - width - 12));
+    setPos({ top: r.bottom + 6, left, width });
+  };
+  const show = () => {
+    place();
+    setOpen(true);
+  };
+  const toggle = (e) => {
+    e.stopPropagation();
+    if (!open) show();
+    else setOpen(false);
+  };
+  const hoverProps = trigger === "hover" ? {
+    onMouseEnter: show,
+    onMouseLeave: () => setOpen(false),
+    onFocus: show,
+    onBlur: () => setOpen(false)
+  } : {};
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: btnRef,
+        type: "button",
+        onClick: toggle,
+        "aria-label": label,
+        "aria-expanded": open,
+        ...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" })
+      }
+    ),
+    open && pos && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "tooltip",
+          style: { position: "fixed", top: pos.top, left: pos.left, width: pos.width },
+          className: "z-[90] rounded-control border border-border 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
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+export {
+  InfoTip
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/InfoTip.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Info } from \"lucide-react\";\n\n/**\n * @pattern InfoTip\n * @description Info tooltip — a small info glyph that opens a portalled,\n * viewport-clamped bubble. Mirrors the Publisher Intel header affordance so\n * page subtitles can collapse into the eyebrow.\n * @tokens text-text-tertiary, rounded-control, border-border, bg-surface,\n * shadow-overlay, text-text-secondary, focus-visible:outline-border-focus,\n * hover:text-text-primary, tracking-normal\n * @dependencies lucide-react\n * @behavior 'click' mode toggles on click only. 'hover' mode also opens on\n * keyboard focus and closes on blur, so it stays reachable without a mouse —\n * not just a decorative hover effect. Both modes close on Escape and on any\n * outside click. The bubble is portaled to document.body and repositions\n * itself to stay clear of the right viewport edge.\n * @usage\n * ```tsx\n * <InfoTip text=\"Trims time periods to data that has finalized across the selected media formats.\" />\n * <InfoTip text=\"Hover variant\" trigger=\"hover\" />\n * ```\n */\nexport interface InfoTipProps {\n  /** The bubble's content. */\n  text: string;\n  /** Glyph size in pixels. */\n  size?: number;\n  /** Accessible label for the trigger button. */\n  label?: string;\n  /**\n   * 'click' toggles the bubble (default); 'hover' reveals it on hover, and\n   * also on keyboard focus so it stays reachable without a pointer.\n   */\n  trigger?: \"click\" | \"hover\";\n}\n\nexport function InfoTip({ text, size = 11, label = \"More information\", trigger = \"click\" }: InfoTipProps) {\n  const [open, setOpen] = useState(false);\n  const [pos, setPos] = useState<{ top: number; left: number; width: number } | null>(null);\n  const btnRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (!open) return;\n    const onDown = (e: MouseEvent) => {\n      if (!btnRef.current?.contains(e.target as Node)) setOpen(false);\n    };\n    const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && setOpen(false);\n    window.addEventListener(\"mousedown\", onDown);\n    window.addEventListener(\"keydown\", onKey);\n    return () => {\n      window.removeEventListener(\"mousedown\", onDown);\n      window.removeEventListener(\"keydown\", onKey);\n    };\n  }, [open]);\n\n  // Position the bubble under the glyph, clamped within the viewport so it\n  // never squeezes against the right edge.\n  const place = () => {\n    if (!btnRef.current) return;\n    const r = btnRef.current.getBoundingClientRect();\n    const width = Math.min(260, window.innerWidth - 24);\n    const left = Math.max(12, Math.min(r.left, window.innerWidth - width - 12));\n    setPos({ top: r.bottom + 6, left, width });\n  };\n\n  const show = () => {\n    place();\n    setOpen(true);\n  };\n\n  const toggle = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!open) show();\n    else setOpen(false);\n  };\n\n  // Hover trigger also opens on keyboard focus so it stays reachable.\n  const hoverProps =\n    trigger === \"hover\"\n      ? {\n          onMouseEnter: show,\n          onMouseLeave: () => setOpen(false),\n          onFocus: show,\n          onBlur: () => setOpen(false),\n        }\n      : {};\n\n  return (\n    <>\n      <button\n        ref={btnRef}\n        type=\"button\"\n        onClick={toggle}\n        aria-label={label}\n        aria-expanded={open}\n        {...hoverProps}\n        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\"\n      >\n        <Info size={size} aria-hidden=\"true\" />\n      </button>\n      {open &&\n        pos &&\n        createPortal(\n          <div\n            role=\"tooltip\"\n            style={{ position: \"fixed\", top: pos.top, left: pos.left, width: pos.width }}\n            // z-[90]: deliberately an arbitrary value, not @mediaradar/design-tokens'\n            // semantic z-tooltip (1200) -- checked directly: mr-clientapps-insights-\n            // studio's real toast layer is a literal z-[100] (ToastProvider.tsx),\n            // completely unrelated in scale to design-tokens' 1000+ semantic z-index\n            // tokens (z-dropdown/z-modal/z-tooltip). Using the shared token here\n            // would render this bubble ABOVE that app's toasts -- the opposite of\n            // the original intent (a tooltip should never cover a notification).\n            // 90 sits above mr-clientapps' modals (below its own z-[100] toasts) as\n            // of this writing -- portals to document.body, becoming a sibling of any\n            // open dialog rather than a child of it, so a lower z-index would render\n            // invisibly behind the dialog that triggered it. RE-VERIFY this number\n            // against any NEW consuming app's own z-index scale before trusting it;\n            // this is a leaf component making an assumption about global stacking\n            // context it can't fully see.\n            className=\"z-[90] rounded-control border border-border bg-surface px-3 py-2 text-[12px] font-normal not-italic normal-case leading-relaxed tracking-normal text-text-secondary shadow-overlay\"\n          >\n            {text}\n          </div>,\n          document.body\n        )}\n    </>\n  );\n}\n"],"mappings":";AAEA,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AAwFjB,mBAUI,KAVJ;AApDG,SAAS,QAAQ,EAAE,MAAM,OAAO,IAAI,QAAQ,oBAAoB,UAAU,QAAQ,GAAiB;AACxG,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,KAAK,MAAM,IAAI,SAA8D,IAAI;AACxF,QAAM,SAAS,OAA0B,IAAI;AAE7C,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,SAAS,CAAC,MAAkB;AAChC,UAAI,CAAC,OAAO,SAAS,SAAS,EAAE,MAAc,EAAG,SAAQ,KAAK;AAAA,IAChE;AACA,UAAM,QAAQ,CAAC,MAAqB,EAAE,QAAQ,YAAY,QAAQ,KAAK;AACvE,WAAO,iBAAiB,aAAa,MAAM;AAC3C,WAAO,iBAAiB,WAAW,KAAK;AACxC,WAAO,MAAM;AACX,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,WAAW,KAAK;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAIT,QAAM,QAAQ,MAAM;AAClB,QAAI,CAAC,OAAO,QAAS;AACrB,UAAM,IAAI,OAAO,QAAQ,sBAAsB;AAC/C,UAAM,QAAQ,KAAK,IAAI,KAAK,OAAO,aAAa,EAAE;AAClD,UAAM,OAAO,KAAK,IAAI,IAAI,KAAK,IAAI,EAAE,MAAM,OAAO,aAAa,QAAQ,EAAE,CAAC;AAC1E,WAAO,EAAE,KAAK,EAAE,SAAS,GAAG,MAAM,MAAM,CAAC;AAAA,EAC3C;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM;AACN,YAAQ,IAAI;AAAA,EACd;AAEA,QAAM,SAAS,CAAC,MAAwB;AACtC,MAAE,gBAAgB;AAClB,QAAI,CAAC,KAAM,MAAK;AAAA,QACX,SAAQ,KAAK;AAAA,EACpB;AAGA,QAAM,aACJ,YAAY,UACR;AAAA,IACE,cAAc;AAAA,IACd,cAAc,MAAM,QAAQ,KAAK;AAAA,IACjC,SAAS;AAAA,IACT,QAAQ,MAAM,QAAQ,KAAK;AAAA,EAC7B,IACA,CAAC;AAEP,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAS;AAAA,QACT,cAAY;AAAA,QACZ,iBAAe;AAAA,QACd,GAAG;AAAA,QACJ,WAAU;AAAA,QAEV,8BAAC,QAAK,MAAY,eAAY,QAAO;AAAA;AAAA,IACvC;AAAA,IACC,QACC,OACA;AAAA,MACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,EAAE,UAAU,SAAS,KAAK,IAAI,KAAK,MAAM,IAAI,MAAM,OAAO,IAAI,MAAM;AAAA,UAe3E,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;","names":[]}

package/package.json

@@ -0,0 +1,54 @@
+{
+    "name": "@mediaradar/design-components",
+    "version": "0.1.0",
+    "type": "module",
+    "main": "./dist/index.cjs",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "require": "./dist/index.cjs"
+        },
+        "./package.json": "./package.json"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "build": "tsup",
+        "typecheck": "tsc --noEmit"
+    },
+    "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0",
+        "@mediaradar/design-tokens": ">=2.0.0"
+    },
+    "peerDependenciesMeta": {
+        "@mediaradar/design-tokens": {
+            "optional": false
+        }
+    },
+    "dependencies": {
+        "lucide-react": "^1.17.0"
+    },
+    "devDependencies": {
+        "@types/react": "^19.2.6",
+        "@types/react-dom": "^19.2.6",
+        "react": "^19.2.6",
+        "react-dom": "^19.2.6",
+        "tsup": "^8.3.5",
+        "typescript": "^5.7.2"
+    },
+    "author": "",
+    "license": "Apache-2.0",
+    "keywords": [
+        "design-components",
+        "mediaradar"
+    ],
+    "description": "MediaRadar shared React component primitives -- the canonical implementation for components genuinely common across consuming apps (insights-studio-prototype, mr-clientapps-insights-studio). Not everything belongs here -- see the pilot notes in this package's README before adding a new component."
+}