@mediaradar/design-components 0.7.0 → 0.8.0

package/dist/index.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AISpark: () => AISpark,
   AdvertiserNoResults: () => AdvertiserNoResults,
   AdvertiserQuickFilter: () => AdvertiserQuickFilter,
   AdvertiserSearchPrompt: () => AdvertiserSearchPrompt,
@@ -31,10 +32,13 @@ __export(index_exports, {
   DEFAULT_SEARCH_MATCH: () => DEFAULT_SEARCH_MATCH,
   DataScopeFilter: () => DataScopeFilter,
   DateRangeFilter: () => DateRangeFilter,
+  DateRangePicker: () => DateRangePicker,
   FilterChipBar: () => FilterChipBar,
   FilterDropdownFooter: () => FilterDropdownFooter,
+  Freshness: () => Freshness,
   InfoTip: () => InfoTip,
   LineChartPlaceholder: () => LineChartPlaceholder,
+  MultiSelectFilter: () => MultiSelectFilter,
   NO_RESULTS_BODY: () => NO_RESULTS_BODY,
   NO_RESULTS_TITLE: () => NO_RESULTS_TITLE,
   NameListModal: () => NameListModal,
@@ -52,6 +56,9 @@ __export(index_exports, {
   SelectionPicker: () => SelectionPicker,
   SortButton: () => SortButton,
   StackedColumnPlaceholder: () => StackedColumnPlaceholder,
+  TablePagination: () => TablePagination,
+  Tag: () => Tag,
+  Toggle: () => Toggle,
   Tooltip: () => Tooltip,
   WorkspaceAvatar: () => WorkspaceAvatar,
   WorkspaceSelectedCard: () => WorkspaceSelectedCard,
@@ -59,6 +66,7 @@ __export(index_exports, {
   chipTriggerClass: () => chipTriggerClass,
   cycleSort: () => cycleSort,
   noResultsBody: () => noResultsBody,
+  resolveRange: () => resolveRange,
   sortProp: () => sortProp
 });
 module.exports = __toCommonJS(index_exports);
@@ -2976,8 +2984,614 @@ function WorkspaceAvatar({ name, size = "md" }) {
     }
   );
 }
+
+// src/Tag.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function Tag({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "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
+var import_lucide_react19 = require("lucide-react");
+var import_jsx_runtime33 = require("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__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "flex items-center gap-2 text-[13px] text-text-secondary", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "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__ */ (0, import_jsx_runtime33.jsx)("option", { value: n, children: n }, n))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          import_lucide_react19.ChevronDown,
+          {
+            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__ */ (0, import_jsx_runtime33.jsxs)("nav", { className: "flex items-center gap-1", "aria-label": "Pagination", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPageChange(1),
+          disabled: current === 1,
+          "aria-label": "First page",
+          className: stepBtn,
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react19.ChevronFirst, { size: 16, "aria-hidden": "true" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPageChange(current - 1),
+          disabled: current === 1,
+          "aria-label": "Previous page",
+          className: stepBtn,
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react19.ChevronLeft, { size: 16, "aria-hidden": "true" })
+        }
+      ),
+      pageWindow(current, totalPages).map(
+        (p) => typeof p === "string" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "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__ */ (0, import_jsx_runtime33.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPageChange(current + 1),
+          disabled: current === totalPages,
+          "aria-label": "Next page",
+          className: stepBtn,
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react19.ChevronRight, { size: 16, "aria-hidden": "true" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPageChange(totalPages),
+          disabled: current === totalPages,
+          "aria-label": "Last page",
+          className: stepBtn,
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react19.ChevronLast, { size: 16, "aria-hidden": "true" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "text-[13px] text-text-tertiary tabular-nums", children: [
+      rangeStart.toLocaleString(),
+      " \u2013 ",
+      rangeEnd.toLocaleString(),
+      " of ",
+      totalItems.toLocaleString(),
+      " ",
+      itemLabel
+    ] })
+  ] });
+}
+
+// src/DateRangePicker.tsx
+var import_react15 = require("react");
+var import_lucide_react20 = require("lucide-react");
+var import_jsx_runtime34 = require("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__ */ (0, import_jsx_runtime34.jsx)(
+    "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__ */ (0, import_jsx_runtime34.jsx)("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 = (0, import_react15.useMemo)(() => today ?? startOfToday(), [today]);
+  const yearOptions = years ?? [3, 2, 1, 0].map((n) => end.getFullYear() - n);
+  const [open, setOpen] = (0, import_react15.useState)(false);
+  const [value, setValue] = (0, import_react15.useState)(defaultValue);
+  const [draft, setDraft] = (0, import_react15.useState)(defaultValue);
+  const ref = (0, import_react15.useRef)(null);
+  const [fromMo, setFromMo] = (0, import_react15.useState)(end.getMonth());
+  const [fromYr, setFromYr] = (0, import_react15.useState)(end.getFullYear() - 1);
+  const [toMo, setToMo] = (0, import_react15.useState)(end.getMonth());
+  const [toYr, setToYr] = (0, import_react15.useState)(end.getFullYear());
+  (0, import_react15.useEffect)(() => {
+    const [s, e] = resolveRange(value, end);
+    onRangeChange?.(s, e);
+  }, [value]);
+  const toggleOpen = () => {
+    if (!open) setDraft(value);
+    setOpen((o) => !o);
+  };
+  (0, import_react15.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative", ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: toggleOpen,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        className: chipTriggerClass(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-[10px] text-text-tertiary", children: spanLabel(value, end) }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react20.ChevronDown, { size: 14, "aria-hidden": "true", className: cn("shrink-0 text-text-secondary transition-transform", open && "rotate-180") })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("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__ */ (0, import_jsx_runtime34.jsx)(
+        "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__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mt-1 border-t border-border-default px-3 pb-2 pt-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-[13px] font-semibold text-text-primary", children: "Custom Range" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "mt-2 flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
+            "From",
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "flex gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MiniSelect, { value: fromMo, onChange: setFromMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MiniSelect, { value: fromYr, onChange: setFromYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
+            "To",
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "flex gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MiniSelect, { value: toMo, onChange: setToMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MiniSelect, { value: toYr, onChange: setToYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "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__ */ (0, import_jsx_runtime34.jsx)(FilterDropdownFooter, { onApply: () => commit(draft) })
+    ] })
+  ] });
+}
+
+// src/MultiSelectFilter.tsx
+var import_react16 = require("react");
+var import_lucide_react21 = require("lucide-react");
+var import_jsx_runtime35 = require("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] = (0, import_react16.useState)(false);
+  const [q, setQ] = (0, import_react16.useState)("");
+  const [draft, setDraft] = (0, import_react16.useState)(selected);
+  const ref = (0, import_react16.useRef)(null);
+  const close = (0, import_react16.useCallback)(() => {
+    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("");
+  };
+  (0, import_react16.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("relative", fullWidth && "w-full"), ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => open ? close() : openTray(),
+        "aria-expanded": open,
+        className: cn(chipTriggerClass(), fullWidth && "w-full justify-between"),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChipContent, { caption, value, icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            import_lucide_react21.ChevronDown,
+            {
+              size: 14,
+              "aria-hidden": "true",
+              className: cn("shrink-0 text-text-secondary transition-transform", open && "rotate-180")
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      "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__ */ (0, import_jsx_runtime35.jsx)("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-default bg-input px-2.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react21.Search, { size: 14, className: "text-text-secondary", "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              "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__ */ (0, import_jsx_runtime35.jsx)("button", { type: "button", onClick: () => setQ(""), "aria-label": "Clear search", className: "text-text-tertiary hover:text-text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react21.X, { size: 13 }) })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "max-h-[280px] overflow-y-auto p-1", children: [
+            groups ? visibleGroups.map((g) => {
+              const state = groupState(g);
+              return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                  "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__ */ (0, import_jsx_runtime35.jsx)(TriCheck, { state }),
+                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("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__ */ (0, import_jsx_runtime35.jsxs)(
+                    "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__ */ (0, import_jsx_runtime35.jsx)(TriCheck, { state: checked ? "all" : "none" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("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__ */ (0, import_jsx_runtime35.jsxs)(
+                "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__ */ (0, import_jsx_runtime35.jsx)(
+                      "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__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react21.Check, { size: 13, strokeWidth: 3 })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "flex-1 text-[14px] text-text-primary", children: o.label })
+                  ]
+                },
+                o.id
+              );
+            }),
+            (groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "py-6 text-center text-[13px] text-text-tertiary", children: "No matches." })
+          ] }),
+          showFooter ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(FilterDropdownFooter, { onClear: () => setDraft(clearValue), onApply: apply }) : min === 0 && draft.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "border-t border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+            "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__ */ (0, import_jsx_runtime35.jsxs)(
+    "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__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react21.Check, { size: 13, strokeWidth: 3 }),
+        state === "some" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react21.Minus, { size: 13, strokeWidth: 3 })
+      ]
+    }
+  );
+}
+
+// src/Toggle.tsx
+var import_jsx_runtime36 = require("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__ */ (0, import_jsx_runtime36.jsx)(
+    "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__ */ (0, import_jsx_runtime36.jsx)(
+        "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
+var import_react17 = require("react");
+var import_lucide_react22 = require("lucide-react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function AISpark({ size = 16, className }) {
+  const id = (0, import_react17.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("stop", { offset: "0%", stopColor: "var(--mr-color-brand-primary)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("stop", { offset: "100%", className: "[stop-color:#9474ff] in-data-[theme=dark]:[stop-color:#a488ff]" })
+    ] }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.Sparkles, { size, stroke: `url(#${id})`, className, "aria-hidden": "true" })
+  ] });
+}
+
+// src/Freshness.tsx
+var import_jsx_runtime38 = require("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__ */ (0, import_jsx_runtime38.jsx)(
+    "span",
+    {
+      className: cn("inline-block h-1.5 w-1.5 shrink-0 rounded-full", dotColor[level]),
+      role: "img",
+      "aria-label": srLabel[level]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AISpark,
   AdvertiserNoResults,
   AdvertiserQuickFilter,
   AdvertiserSearchPrompt,
@@ -2989,10 +3603,13 @@ function WorkspaceAvatar({ name, size = "md" }) {
   DEFAULT_SEARCH_MATCH,
   DataScopeFilter,
   DateRangeFilter,
+  DateRangePicker,
   FilterChipBar,
   FilterDropdownFooter,
+  Freshness,
   InfoTip,
   LineChartPlaceholder,
+  MultiSelectFilter,
   NO_RESULTS_BODY,
   NO_RESULTS_TITLE,
   NameListModal,
@@ -3010,6 +3627,9 @@ function WorkspaceAvatar({ name, size = "md" }) {
   SelectionPicker,
   SortButton,
   StackedColumnPlaceholder,
+  TablePagination,
+  Tag,
+  Toggle,
   Tooltip,
   WorkspaceAvatar,
   WorkspaceSelectedCard,
@@ -3017,6 +3637,7 @@ function WorkspaceAvatar({ name, size = "md" }) {
   chipTriggerClass,
   cycleSort,
   noResultsBody,
+  resolveRange,
   sortProp
 });
 //# sourceMappingURL=index.cjs.map