@mediaradar/design-components 0.5.0 → 0.6.0

package/README.md

@@ -78,3 +78,35 @@ 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.
+
+The minimum version in that range is enforced, not guessed: this package's
+CI (`npm run check:token-compat`) compiles the built bundle with real
+Tailwind against the minimum allowed `@mediaradar/design-tokens` and the
+latest published one, and fails if any class generates no CSS. If a
+component needs a newer token, raise the minimum in the same PR.
+
+## Consuming app setup
+
+Tailwind v4 skips `node_modules` when scanning for classes, so a class used
+only inside this package compiles to nothing, with no build error. Point
+Tailwind at the compiled bundle, after the app's last `@import`:
+
+```css
+@source '../node_modules/@mediaradar/design-components/dist/index.js';
+```
+
+(Tailwind v3 / `@config` apps: add
+`./node_modules/@mediaradar/design-components/dist/*.{js,cjs}` to the
+`content` array instead.)
+
+Then verify it in CI, after the app's production build:
+
+```bash
+npx design-components-check-coverage --css-dir dist           # Vite
+npx design-components-check-coverage --css-dir .next/static   # Next.js
+```
+
+It fails if any class the installed version of this package uses is
+missing from the app's compiled CSS — whether because Tailwind isn't
+scanning the package, or because the app's `@mediaradar/design-tokens` is
+older than this package's peer range.

package/dist/index.cjs

@@ -115,7 +115,7 @@ function InfoTip({ text, size = 11, label = "More information", trigger = "click
         {
           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",
+          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
         }
       ),
@@ -464,7 +464,13 @@ function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testI
         "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
         "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
         on ? "border-transparent bg-brand-primaryAction text-white" : "border-border-interactive bg-input hover:border-brand-primaryAction",
-        disabled && "cursor-not-allowed opacity-50"
+        // Cancels the unchecked hover-border preview when disabled -- without
+        // this, a disabled box still visually previews the "you can click
+        // this" affordance on hover even though the click does nothing.
+        // Found empirically reconciling this against insights-studio-
+        // prototype's own (more complete) local CheckBox during its
+        // migration -- that version already had this guard.
+        disabled && "cursor-not-allowed opacity-50 hover:border-border-interactive"
       ].filter(Boolean).join(" "),
       children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react4.Minus, { size: 13, strokeWidth: 3 }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react4.Check, { size: 13, strokeWidth: 3 }) : null
     }
@@ -1131,7 +1137,7 @@ function SectionRail({
             type: "button",
             onClick: () => scroll(-1),
             "aria-label": "Previous",
-            className: "hidden h-10 w-10 items-center justify-center rounded-control border border-border text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary sm:flex lg:hidden",
+            className: "hidden h-10 w-10 items-center justify-center rounded-control border border-border-default text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary sm:flex lg:hidden",
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react7.ChevronLeft, { size: 16 })
           }
         ),
@@ -1141,7 +1147,7 @@ function SectionRail({
             type: "button",
             onClick: () => scroll(1),
             "aria-label": "Next",
-            className: "hidden h-10 w-10 items-center justify-center rounded-control border border-border text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary sm:flex lg:hidden",
+            className: "hidden h-10 w-10 items-center justify-center rounded-control border border-border-default text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary sm:flex lg:hidden",
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react7.ChevronRight, { size: 16 })
           }
         )
@@ -1492,7 +1498,7 @@ function cx5(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function WorkspaceSelectedCard({ groups, testIdPrefix }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("aside", { className: "sticky top-4 flex min-w-0 flex-col gap-4 self-start rounded-card border border-border bg-surface px-5 pb-5 pt-4 shadow-raised sm:px-6 sm:pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-col divide-y divide-border", children: groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SummaryGroupItem, { group: g, testIdPrefix }, g.id)) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("aside", { className: "sticky top-4 flex min-w-0 flex-col gap-4 self-start rounded-card border border-border-default bg-surface px-5 pb-5 pt-4 shadow-raised sm:px-6 sm:pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-col divide-y divide-border-default", children: groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SummaryGroupItem, { group: g, testIdPrefix }, g.id)) }) });
 }
 function SummaryGroupItem({
   group,
@@ -1537,7 +1543,7 @@ function SummaryGroupItem({
         group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           "div",
           {
-            className: "flex items-center justify-between gap-2 rounded-control border border-border bg-canvas px-2 py-1",
+            className: "flex items-center justify-between gap-2 rounded-control border border-border-default bg-canvas px-2 py-1",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "min-w-0 flex-1", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "block truncate text-[12px] text-text-primary", children: item.name }),