@mediaradar/design-components 0.6.0 → 0.7.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,387 @@ 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")
+    }
+  );
+}
 export {
   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,
@@ -2577,9 +2942,15 @@ export {
   SelectFilter,
   SelectedSection,
   SelectionPicker,
+  SortButton,
   StackedColumnPlaceholder,
   Tooltip,
+  WorkspaceAvatar,
   WorkspaceSelectedCard,
-  noResultsBody
+  buttonVariants,
+  chipTriggerClass,
+  cycleSort,
+  noResultsBody,
+  sortProp
 };
 //# sourceMappingURL=index.js.map