@mediaradar/design-components 0.6.0 → 0.8.0

package/dist/index.js

@@ -1545,7 +1545,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
       )),
@@ -1618,7 +1618,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",
@@ -1630,7 +1630,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",
@@ -1647,7 +1647,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}`
@@ -1663,7 +1663,7 @@ function PieChartPlaceholder({ height = 220, legendRows = 8 }) {
   const r = 45;
   return /* @__PURE__ */ jsxs14("div", { className: "flex w-full items-center gap-3", style: { height }, role: "presentation", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsx16("div", { className: "flex h-full items-center justify-center", style: { width: "60%" }, children: /* @__PURE__ */ jsxs14("svg", { viewBox: "0 0 100 100", className: "h-full", style: { aspectRatio: "1 / 1" }, children: [
-      /* @__PURE__ */ jsx16("circle", { cx: "50", cy: "50", r, fill: "var(--color-subtle)" }),
+      /* @__PURE__ */ jsx16("circle", { cx: "50", cy: "50", r, fill: "var(--mr-color-subtle)" }),
       PIE_SEAMS.map((deg) => {
         const rad = (deg - 90) * Math.PI / 180;
         return /* @__PURE__ */ jsx16(
@@ -1673,7 +1673,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
@@ -1705,7 +1705,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
@@ -2552,22 +2552,996 @@ function PublisherBreakdownList({ rows, defaultVisibleCount = 10, padded = true,
     ] }))
   ] });
 }
+
+// src/Button.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { Loader2 as Loader22 } from "lucide-react";
+
+// src/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/Button.tsx
+import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+var buttonVariants = 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 = forwardRef2(
+  ({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsxs22(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        disabled: disabled || loading,
+        "aria-busy": loading || void 0,
+        ...props,
+        children: [
+          loading && /* @__PURE__ */ jsx24(Loader22, { className: "size-4 shrink-0 animate-spin", "aria-hidden": "true" }),
+          children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/FilterDropdownFooter.tsx
+import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
+function FilterDropdownFooter({
+  onClear,
+  onApply,
+  clearLabel = "Clear all",
+  applyLabel = "Apply"
+}) {
+  return /* @__PURE__ */ jsxs23(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 border-t border-border-default p-2",
+        onClear ? "justify-between" : "justify-end"
+      ),
+      children: [
+        onClear && /* @__PURE__ */ jsx25(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClear, children: clearLabel }),
+        /* @__PURE__ */ jsx25(Button, { type: "button", variant: "primary", size: "sm", onClick: onApply, children: applyLabel })
+      ]
+    }
+  );
+}
+
+// src/NameListModal.tsx
+import { useEffect as useEffect10, useState as useState11 } from "react";
+import { createPortal as createPortal5 } from "react-dom";
+import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
+function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit }) {
+  const [name, setName] = useState11(initialName);
+  useEffect10(() => {
+    const onKey = (e) => e.key === "Escape" && onCancel();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onCancel]);
+  return createPortal5(
+    // 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__ */ jsx26(
+      "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__ */ jsxs24(
+          "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__ */ jsx26("h2", { className: "text-[16px] font-semibold text-text-primary", children: title }),
+              /* @__PURE__ */ jsxs24("div", { className: "mt-4 flex flex-col gap-1.5", children: [
+                /* @__PURE__ */ jsx26("label", { htmlFor: "account-list-name", className: "text-[12px] font-medium text-text-secondary", children: "List name" }),
+                /* @__PURE__ */ jsx26(
+                  "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__ */ jsxs24("div", { className: "mt-5 flex items-center justify-end gap-2", children: [
+                /* @__PURE__ */ jsx26(Button, { variant: "secondary", onClick: onCancel, children: "Cancel" }),
+                /* @__PURE__ */ jsx26(Button, { disabled: !name.trim(), onClick: () => onSubmit(name.trim()), children: submitLabel })
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/ChipTrigger.tsx
+import { jsx as jsx27, jsxs as jsxs25 } from "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__ */ jsxs25("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
+    /* @__PURE__ */ jsx27("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
+    /* @__PURE__ */ jsx27("span", { className: "text-[12px] font-medium text-text-primary", children: value })
+  ] });
+  if (icon) {
+    return /* @__PURE__ */ jsxs25("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx27("span", { className: "shrink-0 text-text-tertiary", children: icon }),
+      stack
+    ] });
+  }
+  return stack;
+}
+
+// src/FilterChipBar.tsx
+import { CircleSlash, X as X3 } from "lucide-react";
+import { jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
+function FilterChipBar({ chips, onRemove, onClearAll, parkedKeys }) {
+  if (chips.length === 0) return null;
+  return /* @__PURE__ */ jsxs26("div", { className: "flex flex-wrap items-center gap-1.5 border-t border-border-default pt-2.5", children: [
+    chips.map((c) => /* @__PURE__ */ jsx28(
+      Chip,
+      {
+        label: c.label,
+        groupLabel: c.groupLabel,
+        parked: !!parkedKeys?.has(c.key),
+        onRemove: () => onRemove(c)
+      },
+      c.key
+    )),
+    /* @__PURE__ */ jsx28("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__ */ jsxs26("span", { className: "group relative inline-flex", children: [
+    /* @__PURE__ */ jsxs26(
+      "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__ */ jsx28(CircleSlash, { size: 11, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }),
+          label,
+          /* @__PURE__ */ jsx28(
+            "button",
+            {
+              type: "button",
+              onClick: onRemove,
+              "aria-label": `Remove ${groupLabel}: ${label}`,
+              className: "text-text-tertiary transition-colors hover:text-text-primary",
+              children: /* @__PURE__ */ jsx28(X3, { size: 12 })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx28(
+      "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
+import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
+import { jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
+function SortButton({ label, sortKey, sort, onSort, disabled = false }) {
+  const active = !disabled && sort.key === sortKey;
+  return /* @__PURE__ */ jsxs27(
+    "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__ */ jsx29(ArrowUp, { size: 12, className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ jsx29(ArrowDown, { size: 12, className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ jsx29(
+          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
+import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight4 } from "lucide-react";
+import { jsx as jsx30, jsxs as jsxs28 } from "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__ */ jsxs28("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsx30(
+      "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__ */ jsx30(ChevronLeft3, { size: 16 })
+      }
+    ),
+    pageWindow(page, totalPages).map(
+      (p) => typeof p === "string" ? /* @__PURE__ */ jsx30("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ jsx30(
+        "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__ */ jsx30(
+      "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__ */ jsx30(ChevronRight4, { size: 16 })
+      }
+    )
+  ] });
+}
+
+// src/WorkspaceAvatar.tsx
+import { jsx as jsx31 } from "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__ */ jsx31(
+    "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")
+    }
+  );
+}
+
+// src/Tag.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+function Tag({ children, className }) {
+  return /* @__PURE__ */ jsx32(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center whitespace-nowrap rounded-full bg-subtle px-2 py-0.5 text-[11px] font-medium text-text-secondary",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/TablePagination.tsx
+import { ChevronDown as ChevronDown9, ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft4, ChevronRight as ChevronRight5 } from "lucide-react";
+import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
+function TablePagination({
+  page,
+  perPage,
+  totalItems,
+  onPageChange,
+  onPerPageChange,
+  perPageOptions = [25, 50, 100],
+  itemLabel = "results",
+  className
+}) {
+  const totalPages = Math.max(1, Math.ceil(totalItems / perPage));
+  const current = Math.min(page, totalPages);
+  const rangeStart = totalItems === 0 ? 0 : (current - 1) * perPage + 1;
+  const rangeEnd = Math.min(current * perPage, totalItems);
+  const btn = "flex h-8 min-w-8 items-center justify-center rounded-control px-2 text-[13px] transition-colors";
+  const stepBtn = cn(
+    btn,
+    "text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"
+  );
+  return /* @__PURE__ */ jsxs29("div", { className: cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2", className), children: [
+    /* @__PURE__ */ jsxs29("label", { className: "flex items-center gap-2 text-[13px] text-text-secondary", children: [
+      /* @__PURE__ */ jsxs29("span", { className: "relative", children: [
+        /* @__PURE__ */ jsx33(
+          "select",
+          {
+            value: perPage,
+            onChange: (e) => onPerPageChange(Number(e.target.value)),
+            "aria-label": "Items 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",
+            children: perPageOptions.map((n) => /* @__PURE__ */ jsx33("option", { value: n, children: n }, n))
+          }
+        ),
+        /* @__PURE__ */ jsx33(
+          ChevronDown9,
+          {
+            size: 13,
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-text-secondary"
+          }
+        )
+      ] }),
+      "items per page"
+    ] }),
+    /* @__PURE__ */ jsxs29("nav", { className: "flex items-center gap-1", "aria-label": "Pagination", children: [
+      /* @__PURE__ */ jsx33(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPageChange(1),
+          disabled: current === 1,
+          "aria-label": "First page",
+          className: stepBtn,
+          children: /* @__PURE__ */ jsx33(ChevronFirst, { size: 16, "aria-hidden": "true" })
+        }
+      ),
+      /* @__PURE__ */ jsx33(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPageChange(current - 1),
+          disabled: current === 1,
+          "aria-label": "Previous page",
+          className: stepBtn,
+          children: /* @__PURE__ */ jsx33(ChevronLeft4, { size: 16, "aria-hidden": "true" })
+        }
+      ),
+      pageWindow(current, totalPages).map(
+        (p) => typeof p === "string" ? /* @__PURE__ */ jsx33("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ jsx33(
+          "button",
+          {
+            type: "button",
+            onClick: () => onPageChange(p),
+            "aria-current": p === current ? "page" : void 0,
+            className: cn(
+              btn,
+              p === current ? "bg-brand-primaryAction font-semibold text-brand-onprimary" : "text-text-secondary hover:bg-subtle hover:text-text-primary"
+            ),
+            children: p
+          },
+          p
+        )
+      ),
+      /* @__PURE__ */ jsx33(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPageChange(current + 1),
+          disabled: current === totalPages,
+          "aria-label": "Next page",
+          className: stepBtn,
+          children: /* @__PURE__ */ jsx33(ChevronRight5, { size: 16, "aria-hidden": "true" })
+        }
+      ),
+      /* @__PURE__ */ jsx33(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPageChange(totalPages),
+          disabled: current === totalPages,
+          "aria-label": "Last page",
+          className: stepBtn,
+          children: /* @__PURE__ */ jsx33(ChevronLast, { size: 16, "aria-hidden": "true" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs29("span", { className: "text-[13px] text-text-tertiary tabular-nums", children: [
+      rangeStart.toLocaleString(),
+      " \u2013 ",
+      rangeEnd.toLocaleString(),
+      " of ",
+      totalItems.toLocaleString(),
+      " ",
+      itemLabel
+    ] })
+  ] });
+}
+
+// src/DateRangePicker.tsx
+import { useEffect as useEffect11, useMemo as useMemo4, useRef as useRef11, useState as useState12 } from "react";
+import { ChevronDown as ChevronDown10 } from "lucide-react";
+import { jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
+var MONTH_ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var PRESETS = ["Rolling 3 months", "Rolling 6 months", "Rolling 12 months"];
+var startOfToday = () => {
+  const d = /* @__PURE__ */ new Date();
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+};
+var fmtDate = (d) => d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+function resolveRange(label, today = startOfToday()) {
+  const end = today;
+  const mMonths = label.match(/Rolling (\d+) months/);
+  if (mMonths) {
+    return [new Date(end.getFullYear(), end.getMonth() - Number(mMonths[1]), 1), end];
+  }
+  const mQuarters = label.match(/Rolling (\d+) quarters/);
+  if (mQuarters) {
+    return [new Date(end.getFullYear(), end.getMonth() - Number(mQuarters[1]) * 3, 1), end];
+  }
+  const mYears = label.match(/Rolling (\d+) years/);
+  if (mYears) {
+    return [new Date(end.getFullYear() - Number(mYears[1]), end.getMonth(), 1), end];
+  }
+  const mCustom = label.match(/([A-Za-z]{3})\s+(\d{4}).*?([A-Za-z]{3})\s+(\d{4})/);
+  if (mCustom) {
+    const s = new Date(Number(mCustom[2]), MONTH_ABBR.indexOf(mCustom[1]), 1);
+    const e = new Date(Number(mCustom[4]), MONTH_ABBR.indexOf(mCustom[3]) + 1, 0);
+    return [s, e];
+  }
+  return [new Date(end.getFullYear(), end.getMonth() - 6, 1), end];
+}
+function spanLabel(label, today) {
+  const [s, e] = resolveRange(label, today);
+  return `${fmtDate(s)} \u2013 ${fmtDate(e)}`;
+}
+function MiniSelect({ value, onChange, options }) {
+  return /* @__PURE__ */ jsx34(
+    "select",
+    {
+      value: String(value),
+      onChange: (e) => {
+        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",
+      children: options.map((o) => /* @__PURE__ */ jsx34("option", { value: String(o.value), children: o.label }, String(o.value)))
+    }
+  );
+}
+function DateRangePicker({
+  defaultValue = "Rolling 6 months",
+  align = "left",
+  presets = PRESETS,
+  onChange,
+  onRangeChange,
+  showFooter = false,
+  today,
+  years
+}) {
+  const end = useMemo4(() => today ?? startOfToday(), [today]);
+  const yearOptions = years ?? [3, 2, 1, 0].map((n) => end.getFullYear() - n);
+  const [open, setOpen] = useState12(false);
+  const [value, setValue] = useState12(defaultValue);
+  const [draft, setDraft] = useState12(defaultValue);
+  const ref = useRef11(null);
+  const [fromMo, setFromMo] = useState12(end.getMonth());
+  const [fromYr, setFromYr] = useState12(end.getFullYear() - 1);
+  const [toMo, setToMo] = useState12(end.getMonth());
+  const [toYr, setToYr] = useState12(end.getFullYear());
+  useEffect11(() => {
+    const [s, e] = resolveRange(value, end);
+    onRangeChange?.(s, e);
+  }, [value]);
+  const toggleOpen = () => {
+    if (!open) setDraft(value);
+    setOpen((o) => !o);
+  };
+  useEffect11(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    window.addEventListener("mousedown", onDown);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("mousedown", onDown);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const commit = (label) => {
+    setValue(label);
+    onChange?.(label);
+    setOpen(false);
+  };
+  const span = toYr * 12 + toMo - (fromYr * 12 + fromMo) + 1;
+  const valid = span >= 1;
+  const applyCustom = () => {
+    if (!valid) return;
+    const label = `${MONTH_ABBR[fromMo]} ${fromYr} \u2013 ${MONTH_ABBR[toMo]} ${toYr}`;
+    if (showFooter) setDraft(label);
+    else commit(label);
+  };
+  return /* @__PURE__ */ jsxs30("div", { className: "relative", ref, children: [
+    /* @__PURE__ */ jsxs30(
+      "button",
+      {
+        type: "button",
+        onClick: toggleOpen,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        className: chipTriggerClass(),
+        children: [
+          /* @__PURE__ */ jsxs30("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
+            /* @__PURE__ */ jsx34("span", { className: "text-[10px] text-text-tertiary", children: spanLabel(value, end) }),
+            /* @__PURE__ */ jsx34("span", { className: "text-[12px] font-medium text-text-primary", children: value })
+          ] }),
+          /* @__PURE__ */ jsx34(ChevronDown10, { size: 14, "aria-hidden": "true", className: cn("shrink-0 text-text-secondary transition-transform", open && "rotate-180") })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs30("div", { className: cn("absolute top-[calc(100%+8px)] z-30 w-[280px] overflow-hidden rounded-card border border-border-default bg-surface py-1 shadow-overlay", align === "right" ? "right-0" : "left-0"), children: [
+      presets.map((p) => /* @__PURE__ */ jsx34(
+        "button",
+        {
+          type: "button",
+          onClick: () => showFooter ? setDraft(p) : commit(p),
+          className: cn("block w-full px-3 py-2 text-left text-[13px] transition-colors hover:bg-subtle", (showFooter ? draft : value) === p ? "font-semibold text-brand-primaryAction" : "text-text-secondary"),
+          children: p
+        },
+        p
+      )),
+      /* @__PURE__ */ jsxs30("div", { className: "mt-1 border-t border-border-default px-3 pb-2 pt-2", children: [
+        /* @__PURE__ */ jsx34("div", { className: "text-[13px] font-semibold text-text-primary", children: "Custom Range" }),
+        /* @__PURE__ */ jsxs30("div", { className: "mt-2 flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs30("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
+            "From",
+            /* @__PURE__ */ jsxs30("span", { className: "flex gap-1", children: [
+              /* @__PURE__ */ jsx34(MiniSelect, { value: fromMo, onChange: setFromMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
+              /* @__PURE__ */ jsx34(MiniSelect, { value: fromYr, onChange: setFromYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs30("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
+            "To",
+            /* @__PURE__ */ jsxs30("span", { className: "flex gap-1", children: [
+              /* @__PURE__ */ jsx34(MiniSelect, { value: toMo, onChange: setToMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
+              /* @__PURE__ */ jsx34(MiniSelect, { value: toYr, onChange: setToYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx34(
+            "button",
+            {
+              type: "button",
+              onClick: applyCustom,
+              disabled: !valid,
+              className: "self-start text-[13px] font-semibold text-brand-primaryAction transition-opacity hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-40",
+              children: showFooter ? "Use custom range" : "Apply"
+            }
+          )
+        ] })
+      ] }),
+      showFooter && /* @__PURE__ */ jsx34(FilterDropdownFooter, { onApply: () => commit(draft) })
+    ] })
+  ] });
+}
+
+// src/MultiSelectFilter.tsx
+import { useCallback as useCallback4, useEffect as useEffect12, useRef as useRef12, useState as useState13 } from "react";
+import { ChevronDown as ChevronDown11, Check as Check7, Minus as Minus2, Search as Search5, X as X4 } from "lucide-react";
+import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
+function MultiSelectFilter({
+  caption,
+  options = [],
+  groups,
+  selected,
+  onChange,
+  allLabel = "All",
+  searchable = false,
+  searchPlaceholder,
+  align = "left",
+  fullIsAll = false,
+  min = 0,
+  icon,
+  showFooter = false,
+  clearValue = [],
+  menuWidthClass = "w-60",
+  plainParent = false,
+  fullWidth = false
+}) {
+  const groupLeaves = (g) => g.children.length ? g.children : [{ id: g.id, label: g.label }];
+  const leafOptions = groups ? groups.flatMap(groupLeaves) : options;
+  const [open, setOpen] = useState13(false);
+  const [q, setQ] = useState13("");
+  const [draft, setDraft] = useState13(selected);
+  const ref = useRef12(null);
+  const close = useCallback4(() => {
+    setOpen(false);
+    setQ("");
+    if (showFooter) return;
+    if (draft.length !== selected.length || draft.some((id) => !selected.includes(id))) {
+      onChange(draft);
+    }
+  }, [draft, selected, onChange, showFooter]);
+  const openTray = () => {
+    setDraft(selected);
+    setOpen(true);
+  };
+  const apply = () => {
+    onChange(draft);
+    setOpen(false);
+    setQ("");
+  };
+  useEffect12(() => {
+    if (!open) return;
+    const onKey = (e) => e.key === "Escape" && close();
+    const onClick = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) close();
+    };
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("mousedown", onClick);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("mousedown", onClick);
+    };
+  }, [open, close]);
+  const toggle = (id) => setDraft((cur) => {
+    const next = cur.includes(id) ? cur.filter((x) => x !== id) : [...cur, id];
+    if (next.length < min) return cur;
+    return next;
+  });
+  const toggleGroup = (g) => setDraft((cur) => {
+    const ids = groupLeaves(g).map((c) => c.id);
+    const allSel = ids.every((id) => cur.includes(id));
+    const next = allSel ? cur.filter((id) => !ids.includes(id)) : [.../* @__PURE__ */ new Set([...cur, ...ids])];
+    if (next.length < min) return cur;
+    return next;
+  });
+  const groupState = (g) => {
+    const ids = groupLeaves(g).map((c) => c.id);
+    const sel = ids.filter((id) => draft.includes(id)).length;
+    return sel === 0 ? "none" : sel === ids.length ? "all" : "some";
+  };
+  const shown = open && !showFooter ? draft : selected;
+  const isAll = shown.length === 0 || fullIsAll && shown.length === leafOptions.length;
+  const value = isAll ? allLabel : shown.length === 1 ? leafOptions.find((o) => o.id === shown[0])?.label ?? `${shown.length} selected` : `${shown.length} selected`;
+  const ql = q.trim().toLowerCase();
+  const items = options.filter((o) => !ql || o.label.toLowerCase().includes(ql));
+  const visibleGroups = groups ? groups.map((g) => {
+    if (!ql || g.label.toLowerCase().includes(ql)) return g;
+    const kids = g.children.filter((c) => c.label.toLowerCase().includes(ql));
+    return kids.length ? { ...g, children: kids } : null;
+  }).filter((g) => g !== null) : [];
+  return /* @__PURE__ */ jsxs31("div", { className: cn("relative", fullWidth && "w-full"), ref, children: [
+    /* @__PURE__ */ jsxs31(
+      "button",
+      {
+        type: "button",
+        onClick: () => open ? close() : openTray(),
+        "aria-expanded": open,
+        className: cn(chipTriggerClass(), fullWidth && "w-full justify-between"),
+        children: [
+          /* @__PURE__ */ jsx35(ChipContent, { caption, value, icon }),
+          /* @__PURE__ */ jsx35(
+            ChevronDown11,
+            {
+              size: 14,
+              "aria-hidden": "true",
+              className: cn("shrink-0 text-text-secondary transition-transform", open && "rotate-180")
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs31(
+      "div",
+      {
+        className: cn(
+          "absolute top-[calc(100%+8px)] z-30 flex flex-col overflow-hidden rounded-card border border-border-default bg-surface shadow-overlay",
+          menuWidthClass,
+          align === "right" ? "right-0" : "left-0"
+        ),
+        role: "dialog",
+        "aria-label": caption,
+        children: [
+          searchable && /* @__PURE__ */ jsx35("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ jsxs31("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-default bg-input px-2.5", children: [
+            /* @__PURE__ */ jsx35(Search5, { size: 14, className: "text-text-secondary", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx35(
+              "input",
+              {
+                type: "text",
+                value: q,
+                onChange: (e) => setQ(e.target.value),
+                placeholder: searchPlaceholder ?? `Search ${caption.toLowerCase()}`,
+                className: "h-full flex-1 bg-transparent text-[13px] outline-hidden placeholder:text-text-tertiary"
+              }
+            ),
+            q && /* @__PURE__ */ jsx35("button", { type: "button", onClick: () => setQ(""), "aria-label": "Clear search", className: "text-text-tertiary hover:text-text-primary", children: /* @__PURE__ */ jsx35(X4, { size: 13 }) })
+          ] }) }),
+          /* @__PURE__ */ jsxs31("div", { className: "max-h-[280px] overflow-y-auto p-1", children: [
+            groups ? visibleGroups.map((g) => {
+              const state = groupState(g);
+              return /* @__PURE__ */ jsxs31("div", { children: [
+                /* @__PURE__ */ jsxs31(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => toggleGroup(g),
+                    className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
+                    children: [
+                      /* @__PURE__ */ jsx35(TriCheck, { state }),
+                      /* @__PURE__ */ jsx35("span", { className: cn("flex-1 text-[14px] text-text-primary", !plainParent && "font-semibold"), children: g.label })
+                    ]
+                  }
+                ),
+                g.children.map((c) => {
+                  const checked = draft.includes(c.id);
+                  return /* @__PURE__ */ jsxs31(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => toggle(c.id),
+                      className: "flex w-full items-center gap-2.5 rounded-control py-2 pl-9 pr-2 text-left transition-colors hover:bg-subtle",
+                      children: [
+                        /* @__PURE__ */ jsx35(TriCheck, { state: checked ? "all" : "none" }),
+                        /* @__PURE__ */ jsx35("span", { className: "flex-1 text-[14px] text-text-primary", children: c.label })
+                      ]
+                    },
+                    c.id
+                  );
+                })
+              ] }, g.id);
+            }) : items.map((o) => {
+              const checked = draft.includes(o.id);
+              return /* @__PURE__ */ jsxs31(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => toggle(o.id),
+                  className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
+                  children: [
+                    /* @__PURE__ */ jsx35(
+                      "span",
+                      {
+                        className: cn(
+                          "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
+                          checked ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
+                        ),
+                        children: checked && /* @__PURE__ */ jsx35(Check7, { size: 13, strokeWidth: 3 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx35("span", { className: "flex-1 text-[14px] text-text-primary", children: o.label })
+                  ]
+                },
+                o.id
+              );
+            }),
+            (groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */ jsx35("div", { className: "py-6 text-center text-[13px] text-text-tertiary", children: "No matches." })
+          ] }),
+          showFooter ? /* @__PURE__ */ jsx35(FilterDropdownFooter, { onClear: () => setDraft(clearValue), onApply: apply }) : min === 0 && draft.length > 0 && /* @__PURE__ */ jsx35("div", { className: "border-t border-border-default p-2", children: /* @__PURE__ */ jsxs31(
+            "button",
+            {
+              type: "button",
+              onClick: () => setDraft([]),
+              className: "text-[12px] font-medium text-text-link hover:underline",
+              children: [
+                "Clear ",
+                caption.toLowerCase()
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function TriCheck({ state }) {
+  const filled = state !== "none";
+  return /* @__PURE__ */ jsxs31(
+    "span",
+    {
+      className: cn(
+        "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
+        filled ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
+      ),
+      children: [
+        state === "all" && /* @__PURE__ */ jsx35(Check7, { size: 13, strokeWidth: 3 }),
+        state === "some" && /* @__PURE__ */ jsx35(Minus2, { size: 13, strokeWidth: 3 })
+      ]
+    }
+  );
+}
+
+// src/Toggle.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
+var SIZES2 = {
+  sm: { track: "h-5 w-9", knob: "h-4 w-4", on: "translate-x-[18px]" },
+  md: { track: "h-6 w-11", knob: "h-5 w-5", on: "translate-x-[22px]" }
+};
+function Toggle({ checked, onChange, label, size = "md", disabled, className }) {
+  const s = SIZES2[size];
+  return /* @__PURE__ */ jsx36(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": label,
+      disabled,
+      onClick: () => onChange(!checked),
+      className: cn(
+        "relative inline-flex shrink-0 items-center rounded-full transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+        s.track,
+        checked ? "bg-brand-primaryAction" : "bg-border-interactive",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      children: /* @__PURE__ */ jsx36(
+        "span",
+        {
+          className: cn(
+            "inline-block transform rounded-full bg-surface shadow-raised transition-transform",
+            s.knob,
+            checked ? s.on : "translate-x-0.5"
+          )
+        }
+      )
+    }
+  );
+}
+
+// src/AISpark.tsx
+import { useId as useId2 } from "react";
+import { Sparkles } from "lucide-react";
+import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
+function AISpark({ size = 16, className }) {
+  const id = useId2();
+  return /* @__PURE__ */ jsxs32(Fragment5, { children: [
+    /* @__PURE__ */ jsx37("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ jsx37("defs", { children: /* @__PURE__ */ jsxs32("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+      /* @__PURE__ */ jsx37("stop", { offset: "0%", stopColor: "var(--mr-color-brand-primary)" }),
+      /* @__PURE__ */ jsx37("stop", { offset: "100%", className: "[stop-color:#9474ff] in-data-[theme=dark]:[stop-color:#a488ff]" })
+    ] }) }) }),
+    /* @__PURE__ */ jsx37(Sparkles, { size, stroke: `url(#${id})`, className, "aria-hidden": "true" })
+  ] });
+}
+
+// src/Freshness.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+var dotColor = {
+  fresh: "bg-status-success",
+  recent: "bg-status-warning",
+  stale: "bg-text-tertiary"
+};
+var srLabel = {
+  fresh: "Fresh (under 4 hours)",
+  recent: "Recent (today)",
+  stale: "Older than a day"
+};
+function Freshness({ level }) {
+  return /* @__PURE__ */ jsx38(
+    "span",
+    {
+      className: cn("inline-block h-1.5 w-1.5 shrink-0 rounded-full", dotColor[level]),
+      role: "img",
+      "aria-label": srLabel[level]
+    }
+  );
+}
 export {
+  AISpark,
   AdvertiserNoResults,
   AdvertiserQuickFilter,
   AdvertiserSearchPrompt,
   BarChartPlaceholder,
+  Button,
   Card,
   CheckBox,
+  ChipContent,
   DEFAULT_SEARCH_MATCH,
   DataScopeFilter,
   DateRangeFilter,
+  DateRangePicker,
+  FilterChipBar,
+  FilterDropdownFooter,
+  Freshness,
   InfoTip,
   LineChartPlaceholder,
+  MultiSelectFilter,
   NO_RESULTS_BODY,
   NO_RESULTS_TITLE,
+  NameListModal,
   NoResultsEmptyState,
   PRIMARY_ACTION_CLASS,
+  Pager,
   PieChartPlaceholder,
   PublisherBreakdownList,
   QUIET_ACTION_CLASS,
@@ -2577,9 +3551,19 @@ export {
   SelectFilter,
   SelectedSection,
   SelectionPicker,
+  SortButton,
   StackedColumnPlaceholder,
+  TablePagination,
+  Tag,
+  Toggle,
   Tooltip,
+  WorkspaceAvatar,
   WorkspaceSelectedCard,
-  noResultsBody
+  buttonVariants,
+  chipTriggerClass,
+  cycleSort,
+  noResultsBody,
+  resolveRange,
+  sortProp
 };
 //# sourceMappingURL=index.js.map