@mediaradar/design-components 0.18.4 → 0.18.6

package/dist/index.d.cts

@@ -56,7 +56,7 @@ declare function InfoTip({ text, size, label, trigger }: InfoTipProps): react.JS
  * original (and still primary) use, but the copy props make it reusable for
  * any dimension that's also search-first in its own filter tray, so the
  * dimension reads the same in the quick bar as it does there.
- * @tokens rounded-control, rounded-card, border-border-default, border-border-strong,
+ * @tokens text-control-caption, rounded-control, rounded-card, border-border-default, border-border-strong,
  * border-border-interactive, border-border-focus, bg-surface, bg-input,
  * shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary,
  * text-text-link, bg-brand-primaryAction, text-brand-onprimary,
@@ -408,7 +408,7 @@ declare function CheckBoxBox({ checked, indeterminate, disabled, className }: Ch
  * a chevron that opens a two-pane picker: preset shortcuts on the left, a
  * dual-month calendar with range highlighting on the right, Start/End fields,
  * and Cancel/Apply. Shared by Creative Intel and the Account Review.
- * @tokens rounded-control, rounded-card, border-border-default, border-border-strong,
+ * @tokens text-control-caption, rounded-control, rounded-card, border-border-default, border-border-strong,
  * bg-surface, bg-input, bg-subtle, bg-ai-tint, bg-brand-primaryAction, text-brand-onprimary,
  * shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary,
  * hover:bg-subtle, hover:text-text-primary, focus-visible:outline-border-focus
@@ -473,7 +473,7 @@ declare function DateRangeFilter({ caption, defaultValue, value: controlledValue
  * 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.
- * @tokens rounded-control, border-border-strong, bg-input, text-text-primary,
+ * @tokens text-badge, rounded-control, border-border-strong, bg-input, text-text-primary,
  * text-text-tertiary, hover:bg-subtle, bg-brand-primaryAction, bg-subtle,
  * bg-surface, border-brand-primaryAction, border-border-default,
  * border-border-interactive, focus-visible:outline-border-focus,
@@ -592,7 +592,7 @@ declare function SectionRail({ title, titleSerif, subtitle, viewAllLabel, viewAl
  * formats, for stable report-ready numbers). One boolean, one control,
  * shared across every dashboard that has this data-finality concept
  * (Publisher Intel, Opportunities, Sports).
- * @tokens rounded-control, border-border-strong, bg-input, hover:bg-subtle,
+ * @tokens text-control-caption, rounded-control, border-border-strong, bg-input, hover:bg-subtle,
  * hover:text-text-primary, focus-visible:outline-border-focus, rounded-card,
  * border-border-default, bg-surface, shadow-overlay, text-text-primary,
  * text-text-secondary, text-text-tertiary, text-brand-primaryAction
@@ -630,7 +630,7 @@ declare function DataScopeFilter({ value, onChange, align }: DataScopeFilterProp
  * `document.body` so the popover is never clipped by a scrollable ancestor
  * (e.g. inside a modal) -- unlike this package's other chip popovers, none
  * of which are known to sit inside a clipping container today.
- * @tokens rounded-control, rounded-card, border-border-default,
+ * @tokens text-control-caption, rounded-control, rounded-card, border-border-default,
  * border-border-strong, bg-input, bg-surface, shadow-overlay,
  * text-text-primary, text-text-secondary,
  * text-text-tertiary, hover:bg-subtle, hover:text-text-primary,
@@ -1466,7 +1466,7 @@ interface PublisherBreakdownListProps {
  * @tokens text-text-primary, text-text-tertiary, text-text-secondary,
  * text-text-link, text-text-warning, text-text-success, text-text-danger,
  * border-border-default, bg-surface, bg-subtle, rounded-control, rounded-full,
- * shadow-overlay, text-micro
+ * shadow-overlay, text-badge
  * @behavior Truncates to `defaultVisibleCount` rows with a "See all (N more)"
  * / "Show less" toggle, unless `viewAllHref` is given, in which case the
  * footer becomes a plain link out instead (e.g. to a full breakdown page).
@@ -1686,7 +1686,7 @@ interface ChipContentProps {
  * @description Shared foundation for filter-bar chip triggers — pairs
  * `chipTriggerClass` with `ChipContent` for the caption/value/icon layout, so
  * every dropdown chip across the app matches.
- * @tokens rounded-control, bg-input, border-border-default, border-border-strong, text-text-secondary, text-text-tertiary, text-text-primary, hover:bg-subtle, focus-visible:outline-border-focus, hover:text-text-primary
+ * @tokens text-control-caption, rounded-control, bg-input, border-border-default, border-border-strong, text-text-secondary, text-text-tertiary, text-text-primary, hover:bg-subtle, focus-visible:outline-border-focus, hover:text-text-primary
  * @behavior `chipTriggerClass` takes a `ChipVariant`: `box` (default, the
  * boxed two-line chip on the default border) or `inline` (same fill, darker
  * stroke, for chips sitting directly on the canvas). It is an argument to
@@ -1856,9 +1856,11 @@ declare const SIZES$1: {
     /** Matches a 15px lucide icon exactly, so a workspace name in a menu row
      *  left-aligns with labels in icon-led rows above and below it. */
     readonly xs: "h-[15px] w-[15px] rounded-[4px] text-[8px] tracking-tight";
+    /** 10px, not text-control-caption: that step is for dropdown captions.
+     *  Two initials need to sit inside the 24px circle, a step below md. */
     readonly sm: "h-6 w-6 text-[10px]";
-    readonly md: "h-7 w-7 text-[11px]";
-    readonly lg: "h-11 w-11 text-[15px]";
+    readonly md: "h-7 w-7 text-micro";
+    readonly lg: "h-11 w-11 text-panel-title";
 };
 interface WorkspaceAvatarProps {
     /** Omit for the unscoped "All data workspace". */

package/dist/index.d.ts

@@ -56,7 +56,7 @@ declare function InfoTip({ text, size, label, trigger }: InfoTipProps): react.JS
  * original (and still primary) use, but the copy props make it reusable for
  * any dimension that's also search-first in its own filter tray, so the
  * dimension reads the same in the quick bar as it does there.
- * @tokens rounded-control, rounded-card, border-border-default, border-border-strong,
+ * @tokens text-control-caption, rounded-control, rounded-card, border-border-default, border-border-strong,
  * border-border-interactive, border-border-focus, bg-surface, bg-input,
  * shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary,
  * text-text-link, bg-brand-primaryAction, text-brand-onprimary,
@@ -408,7 +408,7 @@ declare function CheckBoxBox({ checked, indeterminate, disabled, className }: Ch
  * a chevron that opens a two-pane picker: preset shortcuts on the left, a
  * dual-month calendar with range highlighting on the right, Start/End fields,
  * and Cancel/Apply. Shared by Creative Intel and the Account Review.
- * @tokens rounded-control, rounded-card, border-border-default, border-border-strong,
+ * @tokens text-control-caption, rounded-control, rounded-card, border-border-default, border-border-strong,
  * bg-surface, bg-input, bg-subtle, bg-ai-tint, bg-brand-primaryAction, text-brand-onprimary,
  * shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary,
  * hover:bg-subtle, hover:text-text-primary, focus-visible:outline-border-focus
@@ -473,7 +473,7 @@ declare function DateRangeFilter({ caption, defaultValue, value: controlledValue
  * 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.
- * @tokens rounded-control, border-border-strong, bg-input, text-text-primary,
+ * @tokens text-badge, rounded-control, border-border-strong, bg-input, text-text-primary,
  * text-text-tertiary, hover:bg-subtle, bg-brand-primaryAction, bg-subtle,
  * bg-surface, border-brand-primaryAction, border-border-default,
  * border-border-interactive, focus-visible:outline-border-focus,
@@ -592,7 +592,7 @@ declare function SectionRail({ title, titleSerif, subtitle, viewAllLabel, viewAl
  * formats, for stable report-ready numbers). One boolean, one control,
  * shared across every dashboard that has this data-finality concept
  * (Publisher Intel, Opportunities, Sports).
- * @tokens rounded-control, border-border-strong, bg-input, hover:bg-subtle,
+ * @tokens text-control-caption, rounded-control, border-border-strong, bg-input, hover:bg-subtle,
  * hover:text-text-primary, focus-visible:outline-border-focus, rounded-card,
  * border-border-default, bg-surface, shadow-overlay, text-text-primary,
  * text-text-secondary, text-text-tertiary, text-brand-primaryAction
@@ -630,7 +630,7 @@ declare function DataScopeFilter({ value, onChange, align }: DataScopeFilterProp
  * `document.body` so the popover is never clipped by a scrollable ancestor
  * (e.g. inside a modal) -- unlike this package's other chip popovers, none
  * of which are known to sit inside a clipping container today.
- * @tokens rounded-control, rounded-card, border-border-default,
+ * @tokens text-control-caption, rounded-control, rounded-card, border-border-default,
  * border-border-strong, bg-input, bg-surface, shadow-overlay,
  * text-text-primary, text-text-secondary,
  * text-text-tertiary, hover:bg-subtle, hover:text-text-primary,
@@ -1466,7 +1466,7 @@ interface PublisherBreakdownListProps {
  * @tokens text-text-primary, text-text-tertiary, text-text-secondary,
  * text-text-link, text-text-warning, text-text-success, text-text-danger,
  * border-border-default, bg-surface, bg-subtle, rounded-control, rounded-full,
- * shadow-overlay, text-micro
+ * shadow-overlay, text-badge
  * @behavior Truncates to `defaultVisibleCount` rows with a "See all (N more)"
  * / "Show less" toggle, unless `viewAllHref` is given, in which case the
  * footer becomes a plain link out instead (e.g. to a full breakdown page).
@@ -1686,7 +1686,7 @@ interface ChipContentProps {
  * @description Shared foundation for filter-bar chip triggers — pairs
  * `chipTriggerClass` with `ChipContent` for the caption/value/icon layout, so
  * every dropdown chip across the app matches.
- * @tokens rounded-control, bg-input, border-border-default, border-border-strong, text-text-secondary, text-text-tertiary, text-text-primary, hover:bg-subtle, focus-visible:outline-border-focus, hover:text-text-primary
+ * @tokens text-control-caption, rounded-control, bg-input, border-border-default, border-border-strong, text-text-secondary, text-text-tertiary, text-text-primary, hover:bg-subtle, focus-visible:outline-border-focus, hover:text-text-primary
  * @behavior `chipTriggerClass` takes a `ChipVariant`: `box` (default, the
  * boxed two-line chip on the default border) or `inline` (same fill, darker
  * stroke, for chips sitting directly on the canvas). It is an argument to
@@ -1856,9 +1856,11 @@ declare const SIZES$1: {
     /** Matches a 15px lucide icon exactly, so a workspace name in a menu row
      *  left-aligns with labels in icon-led rows above and below it. */
     readonly xs: "h-[15px] w-[15px] rounded-[4px] text-[8px] tracking-tight";
+    /** 10px, not text-control-caption: that step is for dropdown captions.
+     *  Two initials need to sit inside the 24px circle, a step below md. */
     readonly sm: "h-6 w-6 text-[10px]";
-    readonly md: "h-7 w-7 text-[11px]";
-    readonly lg: "h-11 w-11 text-[15px]";
+    readonly md: "h-7 w-7 text-micro";
+    readonly lg: "h-11 w-11 text-panel-title";
 };
 interface WorkspaceAvatarProps {
     /** Omit for the unscoped "All data workspace". */

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // <define:__FONT_SIZE_KEYS__>
-var define_FONT_SIZE_KEYS_default = ["micro", "xs", "card-title", "dense", "sm", "panel-title", "base", "md", "lg", "xl", "h1"];
+var define_FONT_SIZE_KEYS_default = ["control-caption", "badge", "micro", "xs", "card-title", "dense", "sm", "panel-title", "base", "md", "lg", "xl", "h1"];
 
 // src/InfoTip.tsx
 import { useEffect, useId, useRef, useState } from "react";
@@ -208,7 +208,7 @@ function AdvertiserQuickFilter({
         children: [
           icon && /* @__PURE__ */ jsx3("span", { className: "shrink-0 text-text-tertiary", children: icon }),
           /* @__PURE__ */ jsxs3("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
-            /* @__PURE__ */ jsx3("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
+            /* @__PURE__ */ jsx3("span", { className: "text-control-caption uppercase tracking-wide text-text-tertiary", children: caption }),
             /* @__PURE__ */ jsx3("span", { className: "text-[12px] font-medium text-text-primary", children: value })
           ] }),
           /* @__PURE__ */ jsx3(
@@ -803,7 +803,7 @@ function DateRangeFilter({
         children: [
           icon && /* @__PURE__ */ jsx7("span", { className: "shrink-0 text-text-tertiary", children: icon }),
           /* @__PURE__ */ jsxs6("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
-            /* @__PURE__ */ jsx7("span", { className: showDates ? "text-[11px] text-text-tertiary" : "text-[10px] uppercase tracking-wide text-text-tertiary", children: showDates ? displayDatesLine : caption }),
+            /* @__PURE__ */ jsx7("span", { className: showDates ? "text-[11px] text-text-tertiary" : "text-control-caption uppercase tracking-wide text-text-tertiary", children: showDates ? displayDatesLine : caption }),
             /* @__PURE__ */ jsx7("span", { className: "text-[12px] font-medium text-text-primary", children: displayValue })
           ] }),
           /* @__PURE__ */ jsx7(ChevronDown2, { size: 14, "aria-hidden": "true", className: `shrink-0 text-text-secondary transition-transform ${open ? "rotate-180" : ""}` })
@@ -1115,7 +1115,7 @@ function ModeRow({
               /* @__PURE__ */ jsx8("span", { className: "text-[14px] font-semibold text-text-primary", children: title }),
               /* @__PURE__ */ jsx8(RowInfoTip, { text: infoText })
             ] }),
-            badge && /* @__PURE__ */ jsx8("span", { className: "rounded-full bg-subtle px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-text-secondary", children: badge }),
+            badge && /* @__PURE__ */ jsx8("span", { className: "rounded-full bg-subtle px-2 py-0.5 text-badge font-semibold uppercase tracking-wide text-text-secondary", children: badge }),
             extra
           ] }),
           selected && /* @__PURE__ */ jsx8(Check3, { size: 16, strokeWidth: 2.5, "aria-hidden": "true", className: "shrink-0 text-brand-primaryAction" })
@@ -1312,7 +1312,7 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
         className: "flex h-11 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
         children: [
           /* @__PURE__ */ jsxs9("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
-            /* @__PURE__ */ jsx10("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: "Data" }),
+            /* @__PURE__ */ jsx10("span", { className: "text-control-caption uppercase tracking-wide text-text-tertiary", children: "Data" }),
             /* @__PURE__ */ jsx10("span", { className: "text-[12px] font-medium text-text-primary", children: display })
           ] }),
           /* @__PURE__ */ jsx10(
@@ -1444,7 +1444,7 @@ function SelectFilter({
         ),
         children: [
           /* @__PURE__ */ jsxs10("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
-            /* @__PURE__ */ jsx11("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
+            /* @__PURE__ */ jsx11("span", { className: "text-control-caption uppercase tracking-wide text-text-tertiary", children: caption }),
             /* @__PURE__ */ jsx11("span", { className: "text-[12px] font-medium text-text-primary", children: value })
           ] }),
           /* @__PURE__ */ jsx11(
@@ -2755,7 +2755,7 @@ function MetricCells({ spendN, yoy }) {
   return /* @__PURE__ */ jsxs23("span", { className: "flex shrink-0 items-center gap-2 pr-1.5", children: [
     /* @__PURE__ */ jsx25("span", { className: "text-right text-[12px] font-bold tabular-nums text-text-primary", style: { width: COL_CURRENT }, children: fmtM(spendN) }),
     /* @__PURE__ */ jsx25("span", { className: "text-right text-[12px] font-normal tabular-nums text-text-primary", style: { width: COL_PREVIOUS }, children: prior ?? "\u2014" }),
-    /* @__PURE__ */ jsx25("span", { className: "flex justify-end", style: { width: COL_YOY }, children: yoy === "NEW" ? /* @__PURE__ */ jsx25("span", { className: "rounded-full bg-status-warning/15 px-1.5 text-micro font-semibold text-text-warning", children: "NEW" }) : /* @__PURE__ */ jsxs23("span", { className: cx9("text-right text-[12px] font-semibold tabular-nums", up ? "text-text-success" : "text-text-danger"), children: [
+    /* @__PURE__ */ jsx25("span", { className: "flex justify-end", style: { width: COL_YOY }, children: yoy === "NEW" ? /* @__PURE__ */ jsx25("span", { className: "rounded-full bg-status-warning/15 px-1.5 text-badge font-semibold text-text-warning", children: "NEW" }) : /* @__PURE__ */ jsxs23("span", { className: cx9("text-right text-[12px] font-semibold tabular-nums", up ? "text-text-success" : "text-text-danger"), children: [
       up ? "+" : "\u2212",
       Math.abs(yoy),
       "%"
@@ -3018,7 +3018,7 @@ function chipTriggerClass(variant = "box") {
 }
 function ChipContent({ caption, value, icon }) {
   const stack = /* @__PURE__ */ jsxs27("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
-    /* @__PURE__ */ jsx29("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
+    /* @__PURE__ */ jsx29("span", { className: "text-control-caption uppercase tracking-wide text-text-tertiary", children: caption }),
     /* @__PURE__ */ jsx29("span", { className: "text-[12px] font-medium text-text-primary", children: value })
   ] });
   if (icon) {
@@ -3242,9 +3242,11 @@ var SIZES = {
   /** Matches a 15px lucide icon exactly, so a workspace name in a menu row
    *  left-aligns with labels in icon-led rows above and below it. */
   xs: "h-[15px] w-[15px] rounded-[4px] text-[8px] tracking-tight",
+  /** 10px, not text-control-caption: that step is for dropdown captions.
+   *  Two initials need to sit inside the 24px circle, a step below md. */
   sm: "h-6 w-6 text-[10px]",
-  md: "h-7 w-7 text-[11px]",
-  lg: "h-11 w-11 text-[15px]"
+  md: "h-7 w-7 text-micro",
+  lg: "h-11 w-11 text-panel-title"
 };
 function WorkspaceAvatar({ name, size = "md" }) {
   return /* @__PURE__ */ jsx33(
@@ -3528,7 +3530,7 @@ function DateRangePicker({
         className: chipTriggerClass(),
         children: [
           /* @__PURE__ */ jsxs32("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
-            /* @__PURE__ */ jsx36("span", { className: "text-[10px] text-text-tertiary", children: spanLabel(value, end) }),
+            /* @__PURE__ */ jsx36("span", { className: "text-control-caption text-text-tertiary", children: spanLabel(value, end) }),
             /* @__PURE__ */ jsx36("span", { className: "text-[12px] font-medium text-text-primary", children: value })
           ] }),
           /* @__PURE__ */ jsx36(ChevronDown10, { size: 14, "aria-hidden": "true", className: cn("shrink-0 text-text-secondary transition-transform", open && "rotate-180") })