@mediaradar/design-components 0.5.1 → 0.7.0

package/README.md

@@ -5,9 +5,8 @@ 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.
+Published to npm and consumed by `insights-studio-prototype`. See
+`CHANGELOG.md` for what each version contains.
 
 ---
 
@@ -24,6 +23,16 @@ 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.
 
+**Exception: generic design-system primitives** (decided 2026-09-25).
+Basic building blocks like `Button`, `Toggle`, `AISpark` and `Freshness`
+belong here even without an `mr-clientapps` duplicate. Two reasons: shared
+components are built on them (`FilterDropdownFooter` and `NameListModal`
+can't move without `Button`), and the component catalog and style guide
+are moving to read from this package alone, so a primitive left behind
+would drop out of both. Page- or data-specific components with no
+duplicate (`EmbeddedFrame`, `ParkedSection`) still stay in their app, and
+out of the catalog.
+
 **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 —
@@ -78,3 +87,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

@@ -24,17 +24,23 @@ __export(index_exports, {
   AdvertiserQuickFilter: () => AdvertiserQuickFilter,
   AdvertiserSearchPrompt: () => AdvertiserSearchPrompt,
   BarChartPlaceholder: () => BarChartPlaceholder,
+  Button: () => Button,
   Card: () => Card,
   CheckBox: () => CheckBox,
+  ChipContent: () => ChipContent,
   DEFAULT_SEARCH_MATCH: () => DEFAULT_SEARCH_MATCH,
   DataScopeFilter: () => DataScopeFilter,
   DateRangeFilter: () => DateRangeFilter,
+  FilterChipBar: () => FilterChipBar,
+  FilterDropdownFooter: () => FilterDropdownFooter,
   InfoTip: () => InfoTip,
   LineChartPlaceholder: () => LineChartPlaceholder,
   NO_RESULTS_BODY: () => NO_RESULTS_BODY,
   NO_RESULTS_TITLE: () => NO_RESULTS_TITLE,
+  NameListModal: () => NameListModal,
   NoResultsEmptyState: () => NoResultsEmptyState,
   PRIMARY_ACTION_CLASS: () => PRIMARY_ACTION_CLASS,
+  Pager: () => Pager,
   PieChartPlaceholder: () => PieChartPlaceholder,
   PublisherBreakdownList: () => PublisherBreakdownList,
   QUIET_ACTION_CLASS: () => QUIET_ACTION_CLASS,
@@ -44,10 +50,16 @@ __export(index_exports, {
   SelectFilter: () => SelectFilter,
   SelectedSection: () => SelectedSection,
   SelectionPicker: () => SelectionPicker,
+  SortButton: () => SortButton,
   StackedColumnPlaceholder: () => StackedColumnPlaceholder,
   Tooltip: () => Tooltip,
+  WorkspaceAvatar: () => WorkspaceAvatar,
   WorkspaceSelectedCard: () => WorkspaceSelectedCard,
-  noResultsBody: () => noResultsBody
+  buttonVariants: () => buttonVariants,
+  chipTriggerClass: () => chipTriggerClass,
+  cycleSort: () => cycleSort,
+  noResultsBody: () => noResultsBody,
+  sortProp: () => sortProp
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -115,7 +127,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
         }
       ),
@@ -1137,7 +1149,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 })
           }
         ),
@@ -1147,7 +1159,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 })
           }
         )
@@ -1498,7 +1510,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,
@@ -1543,7 +1555,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 }),
@@ -1598,7 +1610,7 @@ function AxisFrame({
         "div",
         {
           className: "absolute inset-x-0 border-t border-dashed",
-          style: { top: `${pct}%`, borderColor: "var(--color-border-default)" }
+          style: { top: `${pct}%`, borderColor: "var(--mr-color-border-default)" }
         },
         pct
       )),
@@ -1671,7 +1683,7 @@ function LineChartPlaceholder({ height = 280 }) {
         {
           points: toPath(pts, 0, LINE_FORECAST_FROM + 1),
           fill: "none",
-          stroke: "var(--color-border-strong)",
+          stroke: "var(--mr-color-border-strong)",
           strokeWidth: "2",
           vectorEffect: "non-scaling-stroke",
           strokeLinecap: "round",
@@ -1683,7 +1695,7 @@ function LineChartPlaceholder({ height = 280 }) {
         {
           points: toPath(pts, LINE_FORECAST_FROM, pts.length),
           fill: "none",
-          stroke: "var(--color-border-strong)",
+          stroke: "var(--mr-color-border-strong)",
           strokeWidth: "2",
           strokeDasharray: "5 4",
           vectorEffect: "non-scaling-stroke",
@@ -1700,7 +1712,7 @@ function LineChartPlaceholder({ height = 280 }) {
           style: {
             left: `${i / (pts.length - 1) * 100}%`,
             top: `${y}%`,
-            backgroundColor: "var(--color-border-strong)"
+            backgroundColor: "var(--mr-color-border-strong)"
           }
         },
         `${s}-${i}`
@@ -1716,7 +1728,7 @@ function PieChartPlaceholder({ height = 220, legendRows = 8 }) {
   const r = 45;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex w-full items-center gap-3", style: { height }, role: "presentation", "aria-hidden": "true", children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex h-full items-center justify-center", style: { width: "60%" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { viewBox: "0 0 100 100", className: "h-full", style: { aspectRatio: "1 / 1" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "50", cy: "50", r, fill: "var(--color-subtle)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "50", cy: "50", r, fill: "var(--mr-color-subtle)" }),
       PIE_SEAMS.map((deg) => {
         const rad = (deg - 90) * Math.PI / 180;
         return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -1726,7 +1738,7 @@ function PieChartPlaceholder({ height = 220, legendRows = 8 }) {
             y1: "50",
             x2: 50 + r * Math.cos(rad),
             y2: 50 + r * Math.sin(rad),
-            stroke: "var(--color-border-default)",
+            stroke: "var(--mr-color-border-default)",
             strokeWidth: "1"
           },
           deg
@@ -1758,7 +1770,7 @@ function StackedColumnPlaceholder({
         height: `${pct}%`,
         /* border-strong, not border-default: on a subtle fill the softer
            seam disappears and the stack reads as one undivided block. */
-        borderTop: i === 0 ? void 0 : "1px solid var(--color-border-strong)"
+        borderTop: i === 0 ? void 0 : "1px solid var(--mr-color-border-strong)"
       }
     },
     i
@@ -2605,23 +2617,388 @@ function PublisherBreakdownList({ rows, defaultVisibleCount = 10, padded = true,
     ] }))
   ] });
 }
+
+// src/Button.tsx
+var import_react13 = require("react");
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var import_lucide_react15 = require("lucide-react");
+
+// src/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/Button.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control font-medium transition-all duration-(--mr-motion-duration-interactive) ease-interactive disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-hidden focus-visible:ring-0",
+  {
+    variants: {
+      variant: {
+        primary: "bg-brand-primaryAction text-brand-onprimary hover:brightness-110",
+        secondary: "bg-surface text-text-primary border border-border-interactive hover:bg-subtle",
+        ghost: "text-text-primary hover:bg-subtle",
+        danger: "bg-status-danger text-status-onstatus hover:brightness-110",
+        link: "text-text-link underline-offset-4 hover:underline px-0"
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-sm",
+        lg: "h-11 px-6 text-sm",
+        icon: "h-9 w-9 p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var Button = (0, import_react13.forwardRef)(
+  ({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }, ref) => {
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        disabled: disabled || loading,
+        "aria-busy": loading || void 0,
+        ...props,
+        children: [
+          loading && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Loader2, { className: "size-4 shrink-0 animate-spin", "aria-hidden": "true" }),
+          children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/FilterDropdownFooter.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function FilterDropdownFooter({
+  onClear,
+  onApply,
+  clearLabel = "Clear all",
+  applyLabel = "Apply"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 border-t border-border-default p-2",
+        onClear ? "justify-between" : "justify-end"
+      ),
+      children: [
+        onClear && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClear, children: clearLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { type: "button", variant: "primary", size: "sm", onClick: onApply, children: applyLabel })
+      ]
+    }
+  );
+}
+
+// src/NameListModal.tsx
+var import_react14 = require("react");
+var import_react_dom5 = require("react-dom");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit }) {
+  const [name, setName] = (0, import_react14.useState)(initialName);
+  (0, import_react14.useEffect)(() => {
+    const onKey = (e) => e.key === "Escape" && onCancel();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onCancel]);
+  return (0, import_react_dom5.createPortal)(
+    // The scrim is a literal: @mediaradar/design-tokens has no scrim token yet.
+    // Same light/dark values as insights-studio-prototype's local --color-scrim;
+    // the dark one keys off data-theme, the attribute design-tokens' dark.css uses.
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      "div",
+      {
+        className: "fixed inset-0 z-70 flex items-center justify-center bg-[rgba(20,17,13,0.55)] in-data-[theme=dark]:bg-[rgba(0,0,0,0.65)] px-4",
+        onMouseDown: (e) => e.target === e.currentTarget && onCancel(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+          "div",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": title,
+            className: "w-full max-w-[420px] rounded-card border border-border-default bg-surface p-5 shadow-overlay",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h2", { className: "text-[16px] font-semibold text-text-primary", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mt-4 flex flex-col gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("label", { htmlFor: "account-list-name", className: "text-[12px] font-medium text-text-secondary", children: "List name" }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  "input",
+                  {
+                    id: "account-list-name",
+                    autoFocus: true,
+                    value: name,
+                    onChange: (e) => setName(e.target.value),
+                    placeholder: "e.g. Q4 prospecting targets",
+                    className: "h-10 rounded-control border border-border-default bg-input px-3 text-sm outline-hidden focus:border-brand-primaryAction"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mt-5 flex items-center justify-end gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { variant: "secondary", onClick: onCancel, children: "Cancel" }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { disabled: !name.trim(), onClick: () => onSubmit(name.trim()), children: submitLabel })
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/ChipTrigger.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function chipTriggerClass() {
+  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",
+    // Sits on the input fill, with a stroke dark enough to still read as a
+    // control against the warm canvas.
+    "border-border-strong"
+  );
+}
+function ChipContent({ caption, value, icon }) {
+  const stack = /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
+  ] });
+  if (icon) {
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "shrink-0 text-text-tertiary", children: icon }),
+      stack
+    ] });
+  }
+  return stack;
+}
+
+// src/FilterChipBar.tsx
+var import_lucide_react16 = require("lucide-react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function FilterChipBar({ chips, onRemove, onClearAll, parkedKeys }) {
+  if (chips.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5 border-t border-border-default pt-2.5", children: [
+    chips.map((c) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      Chip,
+      {
+        label: c.label,
+        groupLabel: c.groupLabel,
+        parked: !!parkedKeys?.has(c.key),
+        onRemove: () => onRemove(c)
+      },
+      c.key
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { type: "button", onClick: onClearAll, className: "ml-1 text-[12px] font-medium text-text-link hover:underline", children: "Clear all" })
+  ] });
+}
+function Chip({
+  label,
+  groupLabel,
+  parked,
+  onRemove
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "group relative inline-flex", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      "span",
+      {
+        className: cn(
+          "flex items-center gap-1 rounded-full px-2.5 py-1 text-[12px] font-medium ring-1 transition-colors",
+          parked ? (
+            // No fill, dashed edge, muted label: reads as "held, not acting on
+            // anything" against the solid applied chips beside it.
+            "border border-dashed border-border-default bg-transparent text-text-tertiary ring-transparent group-hover:text-text-secondary"
+          ) : "bg-subtle text-text-secondary ring-transparent group-hover:bg-border-default group-hover:text-text-primary group-hover:ring-border-interactive"
+        ),
+        children: [
+          parked && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.CircleSlash, { size: 11, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }),
+          label,
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onRemove,
+              "aria-label": `Remove ${groupLabel}: ${label}`,
+              className: "text-text-tertiary transition-colors hover:text-text-primary",
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.X, { size: 12 })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "span",
+      {
+        role: "tooltip",
+        className: "pointer-events-none absolute bottom-full left-1/2 z-20 mb-1.5 -translate-x-1/2 whitespace-nowrap rounded-md bg-text-primary px-2 py-1 text-[11px] font-medium text-surface opacity-0 shadow-raised transition-opacity duration-150 group-hover:opacity-100",
+        children: parked ? "Not in this workspace" : groupLabel
+      }
+    )
+  ] });
+}
+
+// src/SortButton.tsx
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function SortButton({ label, sortKey, sort, onSort, disabled = false }) {
+  const active = !disabled && sort.key === sortKey;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "button",
+    {
+      type: "button",
+      disabled,
+      onClick: () => onSort(sortKey),
+      "aria-sort": active ? sort.dir === "asc" ? "ascending" : "descending" : "none",
+      className: cn(
+        // text-left overrides the UA default on <button>, which would centre a
+        // label that wraps onto two lines, out of step with the column under it.
+        "group inline-flex items-center gap-1 text-left uppercase tracking-wide transition-colors",
+        !disabled && "hover:text-text-primary"
+      ),
+      children: [
+        label,
+        !disabled && (active ? sort.dir === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react17.ArrowUp, { size: 12, className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react17.ArrowDown, { size: 12, className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          import_lucide_react17.ArrowUpDown,
+          {
+            size: 12,
+            className: "shrink-0 text-text-tertiary opacity-50 transition-opacity group-hover:opacity-100"
+          }
+        ))
+      ]
+    }
+  );
+}
+
+// src/tableSort.ts
+function cycleSort(current, key, firstDir = "desc") {
+  if (!current || current.key !== key) return { key, dir: firstDir };
+  if (current.dir === firstDir) return { key, dir: firstDir === "desc" ? "asc" : "desc" };
+  return null;
+}
+function sortProp(sort) {
+  return sort ?? { key: null, dir: "desc" };
+}
+
+// src/Pager.tsx
+var import_lucide_react18 = require("lucide-react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function pageWindow(current, total) {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const keep = /* @__PURE__ */ new Set([1, total, current, current - 1, current + 1]);
+  const pages = [...keep].filter((p) => p >= 1 && p <= total).sort((a, b) => a - b);
+  const out = [];
+  let prev = 0;
+  for (const p of pages) {
+    if (p - prev > 1) out.push(`gap-${p}`);
+    out.push(p);
+    prev = p;
+  }
+  return out;
+}
+function Pager({ page, totalPages, onPage }) {
+  const btn = "flex h-8 min-w-8 items-center justify-center rounded-control px-2 text-[13px] transition-colors";
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => onPage(page - 1),
+        disabled: page === 1,
+        "aria-label": "Previous page",
+        className: cn(btn, "text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react18.ChevronLeft, { size: 16 })
+      }
+    ),
+    pageWindow(page, totalPages).map(
+      (p) => typeof p === "string" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPage(p),
+          "aria-current": p === page ? "page" : void 0,
+          className: cn(
+            btn,
+            p === page ? "bg-brand-primaryAction font-semibold text-brand-onprimary" : "text-text-secondary hover:bg-subtle hover:text-text-primary"
+          ),
+          children: p
+        },
+        p
+      )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => onPage(page + 1),
+        disabled: page === totalPages,
+        "aria-label": "Next page",
+        className: cn(btn, "text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react18.ChevronRight, { size: 16 })
+      }
+    )
+  ] });
+}
+
+// src/WorkspaceAvatar.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function workspaceInitials(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return "\xB7";
+  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
+  return (words[0][0] + words[1][0]).toUpperCase();
+}
+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",
+  sm: "h-6 w-6 text-[10px]",
+  md: "h-7 w-7 text-[11px]",
+  lg: "h-11 w-11 text-[15px]"
+};
+function WorkspaceAvatar({ name, size = "md" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "flex shrink-0 items-center justify-center rounded-control bg-subtle font-semibold leading-none text-text-secondary",
+        SIZES[size]
+      ),
+      children: workspaceInitials(name ?? "All data")
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AdvertiserNoResults,
   AdvertiserQuickFilter,
   AdvertiserSearchPrompt,
   BarChartPlaceholder,
+  Button,
   Card,
   CheckBox,
+  ChipContent,
   DEFAULT_SEARCH_MATCH,
   DataScopeFilter,
   DateRangeFilter,
+  FilterChipBar,
+  FilterDropdownFooter,
   InfoTip,
   LineChartPlaceholder,
   NO_RESULTS_BODY,
   NO_RESULTS_TITLE,
+  NameListModal,
   NoResultsEmptyState,
   PRIMARY_ACTION_CLASS,
+  Pager,
   PieChartPlaceholder,
   PublisherBreakdownList,
   QUIET_ACTION_CLASS,
@@ -2631,9 +3008,15 @@ function PublisherBreakdownList({ rows, defaultVisibleCount = 10, padded = true,
   SelectFilter,
   SelectedSection,
   SelectionPicker,
+  SortButton,
   StackedColumnPlaceholder,
   Tooltip,
+  WorkspaceAvatar,
   WorkspaceSelectedCard,
-  noResultsBody
+  buttonVariants,
+  chipTriggerClass,
+  cycleSort,
+  noResultsBody,
+  sortProp
 });
 //# sourceMappingURL=index.cjs.map