@mediaradar/design-components 0.5.0 → 0.6.0

package/dist/index.d.cts

@@ -6,7 +6,7 @@ import { ReactNode, RefObject } from 'react';
  * @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,
+ * @tokens text-text-tertiary, rounded-control, border-border-default, bg-surface,
  * shadow-overlay, text-text-secondary, focus-visible:outline-border-focus,
  * hover:text-text-primary, tracking-normal
  * @dependencies lucide-react
@@ -259,6 +259,11 @@ declare function DateRangeFilter({ caption, defaultValue, value: controlledValue
  * border-border-interactive, focus-visible:outline-border-focus,
  * hover:text-text-primary, placeholder:text-text-tertiary, rounded-card,
  * rounded-full, shadow-overlay, text-brand-primaryAction, text-text-secondary
+ * @variant default - Default. Plain keyword input, no match-type control.
+ * @variant filterable - Adds an attached match-type dropdown sharing one
+ * bordered control, mirroring the legacy Creative Intel search + match-type
+ * modal (Any Word/Exact Match/Contextual/Ad Code), including the Or/And
+ * sub-choice nested under Any Word.
  * @dependencies lucide-react
  * @behavior The match-type dropdown ('filterable' variant) closes on Escape
  * and outside click. Each mode row is a real `radio` role, with a nested
@@ -315,7 +320,7 @@ declare function SearchBar({ placeholder, value, onChange, variant, matchValue,
  * desktop grid exactly, or a variable-length list with no "view all" link
  * at all — both need to keep working without the row assuming a count.
  * @tokens text-text-primary, text-text-secondary, text-text-link,
- * rounded-control, rounded-sm, border-border, focus-visible:outline-solid,
+ * rounded-control, rounded-sm, border-border-default, focus-visible:outline-solid,
  * focus-visible:outline-border-focus, hover:bg-subtle, hover:text-text-primary,
  * tracking-tight, font-serif
  * @dependencies lucide-react
@@ -612,10 +617,10 @@ interface SummaryGroup {
  * naming maps to this package's `shadow-raised`/`shadow-overlay` respectively
  * (raised: a static card like this one; overlay: a floating popover/menu),
  * not a 1:1 name swap.
- * @tokens rounded-card, border-border, bg-surface, shadow-raised,
+ * @tokens rounded-card, border-border-default, bg-surface, shadow-raised,
  * text-text-secondary, text-text-primary, rounded-full, bg-subtle,
  * rounded-control, bg-canvas, hover:bg-subtle, hover:text-text-danger,
- * text-text-link, divide-border
+ * text-text-link, divide-border-default
  * @dependencies lucide-react
  * @behavior A group auto-expands only on the empty-to-nonempty transition
  * (including via a nested sub-group's items) and auto-collapses when

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import { ReactNode, RefObject } from 'react';
  * @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,
+ * @tokens text-text-tertiary, rounded-control, border-border-default, bg-surface,
  * shadow-overlay, text-text-secondary, focus-visible:outline-border-focus,
  * hover:text-text-primary, tracking-normal
  * @dependencies lucide-react
@@ -259,6 +259,11 @@ declare function DateRangeFilter({ caption, defaultValue, value: controlledValue
  * border-border-interactive, focus-visible:outline-border-focus,
  * hover:text-text-primary, placeholder:text-text-tertiary, rounded-card,
  * rounded-full, shadow-overlay, text-brand-primaryAction, text-text-secondary
+ * @variant default - Default. Plain keyword input, no match-type control.
+ * @variant filterable - Adds an attached match-type dropdown sharing one
+ * bordered control, mirroring the legacy Creative Intel search + match-type
+ * modal (Any Word/Exact Match/Contextual/Ad Code), including the Or/And
+ * sub-choice nested under Any Word.
  * @dependencies lucide-react
  * @behavior The match-type dropdown ('filterable' variant) closes on Escape
  * and outside click. Each mode row is a real `radio` role, with a nested
@@ -315,7 +320,7 @@ declare function SearchBar({ placeholder, value, onChange, variant, matchValue,
  * desktop grid exactly, or a variable-length list with no "view all" link
  * at all — both need to keep working without the row assuming a count.
  * @tokens text-text-primary, text-text-secondary, text-text-link,
- * rounded-control, rounded-sm, border-border, focus-visible:outline-solid,
+ * rounded-control, rounded-sm, border-border-default, focus-visible:outline-solid,
  * focus-visible:outline-border-focus, hover:bg-subtle, hover:text-text-primary,
  * tracking-tight, font-serif
  * @dependencies lucide-react
@@ -612,10 +617,10 @@ interface SummaryGroup {
  * naming maps to this package's `shadow-raised`/`shadow-overlay` respectively
  * (raised: a static card like this one; overlay: a floating popover/menu),
  * not a 1:1 name swap.
- * @tokens rounded-card, border-border, bg-surface, shadow-raised,
+ * @tokens rounded-card, border-border-default, bg-surface, shadow-raised,
  * text-text-secondary, text-text-primary, rounded-full, bg-subtle,
  * rounded-control, bg-canvas, hover:bg-subtle, hover:text-text-danger,
- * text-text-link, divide-border
+ * text-text-link, divide-border-default
  * @dependencies lucide-react
  * @behavior A group auto-expands only on the empty-to-nonempty transition
  * (including via a nested sub-group's items) and auto-collapses when

package/dist/index.js

@@ -62,7 +62,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
         }
       ),
@@ -411,7 +411,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__ */ jsx4(Minus, { size: 13, strokeWidth: 3 }) : checked ? /* @__PURE__ */ jsx4(Check2, { size: 13, strokeWidth: 3 }) : null
     }
@@ -1078,7 +1084,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__ */ jsx7(ChevronLeft2, { size: 16 })
           }
         ),
@@ -1088,7 +1094,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__ */ jsx7(ChevronRight2, { size: 16 })
           }
         )
@@ -1439,7 +1445,7 @@ function cx5(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function WorkspaceSelectedCard({ groups, testIdPrefix }) {
-  return /* @__PURE__ */ jsx12("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__ */ jsx12("div", { className: "flex flex-col divide-y divide-border", children: groups.map((g) => /* @__PURE__ */ jsx12(SummaryGroupItem, { group: g, testIdPrefix }, g.id)) }) });
+  return /* @__PURE__ */ jsx12("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__ */ jsx12("div", { className: "flex flex-col divide-y divide-border-default", children: groups.map((g) => /* @__PURE__ */ jsx12(SummaryGroupItem, { group: g, testIdPrefix }, g.id)) }) });
 }
 function SummaryGroupItem({
   group,
@@ -1484,7 +1490,7 @@ function SummaryGroupItem({
         group.items.map((item) => /* @__PURE__ */ jsxs11(
           "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__ */ jsxs11("span", { className: "min-w-0 flex-1", children: [
                 /* @__PURE__ */ jsx12("span", { className: "block truncate text-[12px] text-text-primary", children: item.name }),