@mediaradar/design-components 0.18.5 → 0.18.7

package/dist/index.cjs

@@ -77,7 +77,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // <define:__FONT_SIZE_KEYS__>
-var define_FONT_SIZE_KEYS_default = ["control-caption", "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
 var import_react = require("react");
@@ -284,7 +284,7 @@ function AdvertiserQuickFilter({
         children: [
           icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "shrink-0 text-text-tertiary", children: icon }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-control-caption uppercase tracking-wide text-text-tertiary", children: caption }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -309,7 +309,7 @@ function AdvertiserQuickFilter({
         "aria-label": caption,
         "data-testid": testIdPrefix && `${testIdPrefix}-popover`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-default bg-input px-2.5 focus-within:border-border-focus focus-within:ring-2 focus-within:ring-border-focus/30", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 focus-within:border-border-focus focus-within:ring-2 focus-within:ring-border-focus/30", children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react3.Search, { size: 14, className: "shrink-0 text-text-secondary", "aria-hidden": "true" }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "input",
@@ -879,7 +879,7 @@ function DateRangeFilter({
         children: [
           icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "shrink-0 text-text-tertiary", children: icon }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: showDates ? "text-[11px] text-text-tertiary" : "text-[10px] uppercase tracking-wide text-text-tertiary", children: showDates ? displayDatesLine : caption }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: showDates ? "text-[11px] text-text-tertiary" : "text-control-caption uppercase tracking-wide text-text-tertiary", children: showDates ? displayDatesLine : caption }),
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: displayValue })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.ChevronDown, { size: 14, "aria-hidden": "true", className: `shrink-0 text-text-secondary transition-transform ${open ? "rotate-180" : ""}` })
@@ -968,7 +968,7 @@ function DateRangeFilter({
 function Field({ label, value }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[12px] font-medium text-text-secondary", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex h-10 min-w-[140px] items-center rounded-control border border-border-default bg-input px-3 text-[14px] font-medium text-text-primary", children: value })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex h-10 min-w-[140px] items-center rounded-control border border-border-strong bg-input px-3 text-[14px] font-medium text-text-primary", children: value })
   ] });
 }
 function NavBtn({ children, onClick, ...rest }) {
@@ -1191,7 +1191,7 @@ function ModeRow({
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[14px] font-semibold text-text-primary", children: title }),
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RowInfoTip, { text: infoText })
             ] }),
-            badge && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react7.Check, { size: 16, strokeWidth: 2.5, "aria-hidden": "true", className: "shrink-0 text-brand-primaryAction" })
@@ -1388,7 +1388,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__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: "Data" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-control-caption uppercase tracking-wide text-text-tertiary", children: "Data" }),
             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: display })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -1520,7 +1520,7 @@ function SelectFilter({
         ),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-control-caption uppercase tracking-wide text-text-tertiary", children: caption }),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -2389,7 +2389,7 @@ function SelectionPicker({
     }) }),
     source === "search" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex h-9 min-w-[200px] flex-1 items-center gap-2 rounded-control border border-border-default bg-input px-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex h-9 min-w-[200px] flex-1 items-center gap-2 rounded-control border border-border-strong bg-input px-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Search, { size: 15, className: "text-text-secondary", "aria-hidden": "true" }),
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "input",
@@ -2703,7 +2703,7 @@ function FilterDropdown({
         onClick: () => setOpen((v) => !v),
         "aria-expanded": open,
         "data-testid": testIdPrefix && `${testIdPrefix}-filter-${filterSlug}`,
-        className: "inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-control border border-border-default bg-input px-3 text-[13px] font-medium text-text-secondary transition-colors hover:bg-subtle",
+        className: "inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-control border border-border-strong bg-input px-3 text-[13px] font-medium text-text-secondary transition-colors hover:bg-subtle",
         children: [
           label,
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.ChevronDown, { size: 13, "aria-hidden": "true", className: cx8("transition-transform", open && "rotate-180") })
@@ -2720,7 +2720,7 @@ function FilterDropdown({
           style: { top: pos.top, left: pos.left },
           className: "fixed z-[80] min-w-[220px] rounded-card border border-border-default bg-surface p-2 shadow-overlay",
           children: [
-            searchable && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "mb-1.5 flex h-8 items-center gap-2 rounded-control border border-border-default bg-input px-2.5", children: [
+            searchable && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "mb-1.5 flex h-8 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5", children: [
               /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Search, { size: 14, className: "shrink-0 text-text-secondary", "aria-hidden": "true" }),
               /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "input",
@@ -2831,7 +2831,7 @@ function MetricCells({ spendN, yoy }) {
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "flex shrink-0 items-center gap-2 pr-1.5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-right text-[12px] font-bold tabular-nums text-text-primary", style: { width: COL_CURRENT }, children: fmtM(spendN) }),
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-right text-[12px] font-normal tabular-nums text-text-primary", style: { width: COL_PREVIOUS }, children: prior ?? "\u2014" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "flex justify-end", style: { width: COL_YOY }, children: yoy === "NEW" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "rounded-full bg-status-warning/15 px-1.5 text-micro font-semibold text-text-warning", children: "NEW" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: cx9("text-right text-[12px] font-semibold tabular-nums", up ? "text-text-success" : "text-text-danger"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "flex justify-end", style: { width: COL_YOY }, children: yoy === "NEW" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "rounded-full bg-status-warning/15 px-1.5 text-badge font-semibold text-text-warning", children: "NEW" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: cx9("text-right text-[12px] font-semibold tabular-nums", up ? "text-text-success" : "text-text-danger"), children: [
       up ? "+" : "\u2212",
       Math.abs(yoy),
       "%"
@@ -3060,7 +3060,7 @@ function NameListModal({
                     value: name,
                     onChange: (e) => setName(e.target.value),
                     placeholder,
-                    className: "h-10 rounded-control border border-border-default bg-input px-3 text-sm outline-hidden focus:border-brand-primaryAction"
+                    className: "h-10 rounded-control border border-border-strong bg-input px-3 text-sm outline-hidden focus:border-brand-primaryAction"
                   }
                 )
               ] }),
@@ -3083,18 +3083,17 @@ function NameListModal({
 
 // src/ChipTrigger.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
-function chipTriggerClass(variant = "box") {
+function chipTriggerClass(_variant = "box") {
   return cn(
-    "flex h-11 items-center gap-2 rounded-control border 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",
-    // Both variants sit on the input fill. `inline` carries the darker stroke
-    // so it still reads as a control against the warm canvas with no boxed
-    // shell behind it.
-    variant === "inline" ? "border-border-strong" : "border-border-default"
+    "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"
+    // One stroke for every trigger: a `box` chip on the lighter default
+    // border sat beside SelectFilter's darker one in the same row and read as
+    // a different kind of control. The variant no longer changes anything.
   );
 }
 function ChipContent({ caption, value, icon }) {
   const stack = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-control-caption uppercase tracking-wide text-text-tertiary", children: caption }),
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
   ] });
   if (icon) {
@@ -3318,9 +3317,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__ */ (0, import_jsx_runtime33.jsx)(
@@ -3390,7 +3391,7 @@ function TablePagination({
             onChange: (e) => onPerPageChange(Number(e.target.value)),
             "aria-label": "Items per page",
             "data-testid": testIdPrefix && `${testIdPrefix}-per-page`,
-            className: "appearance-none rounded-control border border-border-default bg-input py-1 pl-2.5 pr-7 text-[13px] font-medium text-text-primary focus:outline focus:outline-2 focus:outline-border-focus",
+            className: "appearance-none rounded-control border border-border-strong bg-input py-1 pl-2.5 pr-7 text-[13px] font-medium text-text-primary focus:outline focus:outline-2 focus:outline-border-focus",
             children: perPageOptions.map((n) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("option", { value: n, children: n }, n))
           }
         ),
@@ -3531,7 +3532,7 @@ function MiniSelect({ value, onChange, options }) {
         const opt = options.find((o) => String(o.value) === e.target.value);
         if (opt) onChange(opt.value);
       },
-      className: "rounded-control border border-border-default bg-input px-1.5 py-1 text-[12px] text-text-primary outline-hidden focus:border-border-focus",
+      className: "rounded-control border border-border-strong bg-input px-1.5 py-1 text-[12px] text-text-primary outline-hidden focus:border-border-focus",
       children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("option", { value: String(o.value), children: o.label }, String(o.value)))
     }
   );
@@ -3604,7 +3605,7 @@ function DateRangePicker({
         className: chipTriggerClass(),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-[10px] text-text-tertiary", children: spanLabel(value, end) }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-control-caption text-text-tertiary", children: spanLabel(value, end) }),
             /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.ChevronDown, { size: 14, "aria-hidden": "true", className: cn("shrink-0 text-text-secondary transition-transform", open && "rotate-180") })
@@ -3784,7 +3785,7 @@ function MultiSelectFilter({
         role: "dialog",
         "aria-label": caption,
         children: [
-          searchable && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-default bg-input px-2.5", children: [
+          searchable && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5", children: [
             /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.Search, { size: 14, className: "text-text-secondary", "aria-hidden": "true" }),
             /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               "input",