@mediaradar/design-components 0.8.1 → 0.10.0

package/dist/index.cjs

@@ -28,6 +28,7 @@ __export(index_exports, {
   Button: () => Button,
   Card: () => Card,
   CheckBox: () => CheckBox,
+  CheckBoxBox: () => CheckBoxBox,
   ChipContent: () => ChipContent,
   DEFAULT_SEARCH_MATCH: () => DEFAULT_SEARCH_MATCH,
   DataScopeFilter: () => DataScopeFilter,
@@ -463,9 +464,39 @@ function OptionRow({
 
 // src/CheckBox.tsx
 var import_lucide_react4 = require("lucide-react");
+
+// src/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/CheckBox.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testId, title }) {
-  const on = checked || indeterminate;
+function boxClass(on, disabled) {
+  return cn(
+    "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
+    on ? "border-transparent bg-brand-primaryAction text-white" : "border-border-interactive bg-input",
+    disabled && "cursor-not-allowed opacity-50"
+  );
+}
+function Glyph({ checked, indeterminate }) {
+  if (indeterminate) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react4.Minus, { size: 13, strokeWidth: 3 });
+  return checked ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react4.Check, { size: 13, strokeWidth: 3 }) : null;
+}
+function CheckBox({
+  checked,
+  indeterminate,
+  onChange,
+  ariaLabel,
+  disabled,
+  stopPropagation = true,
+  testId,
+  title,
+  className
+}) {
+  const on = checked || !!indeterminate;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "button",
     {
@@ -477,25 +508,26 @@ function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testI
       disabled,
       "data-testid": testId,
       onClick: (e) => {
-        e.stopPropagation();
+        if (stopPropagation) e.stopPropagation();
         onChange();
       },
-      className: [
-        "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
+      className: cn(
+        boxClass(on, disabled),
         "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
-        on ? "border-transparent bg-brand-primaryAction text-white" : "border-border-interactive bg-input hover:border-brand-primaryAction",
+        !on && "hover:border-brand-primaryAction",
         // Cancels the unchecked hover-border preview when disabled -- without
         // this, a disabled box still visually previews the "you can click
         // this" affordance on hover even though the click does nothing.
-        // Found empirically reconciling this against insights-studio-
-        // prototype's own (more complete) local CheckBox during its
-        // migration -- that version already had this guard.
-        disabled && "cursor-not-allowed opacity-50 hover:border-border-interactive"
-      ].filter(Boolean).join(" "),
-      children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react4.Minus, { size: 13, strokeWidth: 3 }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react4.Check, { size: 13, strokeWidth: 3 }) : null
+        disabled && "hover:border-border-interactive",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Glyph, { checked, indeterminate })
     }
   );
 }
+function CheckBoxBox({ checked, indeterminate, disabled, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", className: cn(boxClass(checked || !!indeterminate, disabled), className), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Glyph, { checked, indeterminate }) });
+}
 
 // src/DateRangeFilter.tsx
 var import_react3 = require("react");
@@ -2631,15 +2663,6 @@ var import_react13 = require("react");
 var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
 var import_lucide_react15 = require("lucide-react");
-
-// src/cn.ts
-var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
-function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
-}
-
-// src/Button.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control font-medium transition-all duration-(--mr-motion-duration-interactive) ease-interactive disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-hidden focus-visible:ring-0",
@@ -2713,8 +2736,21 @@ function FilterDropdownFooter({
 var import_react14 = require("react");
 var import_react_dom5 = require("react-dom");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit }) {
+function NameListModal({
+  title,
+  initialName,
+  submitLabel,
+  onCancel,
+  onSubmit,
+  fieldLabel = "List name",
+  placeholder = "e.g. Q4 prospecting targets",
+  options
+}) {
   const [name, setName] = (0, import_react14.useState)(initialName);
+  const [checked, setChecked] = (0, import_react14.useState)(
+    () => Object.fromEntries((options ?? []).map((o) => [o.key, !!o.initial]))
+  );
+  const toggle = (key) => setChecked((c) => ({ ...c, [key]: !c[key] }));
   (0, import_react14.useEffect)(() => {
     const onKey = (e) => e.key === "Escape" && onCancel();
     window.addEventListener("keydown", onKey);
@@ -2739,7 +2775,7 @@ function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit })
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h2", { className: "text-[16px] font-semibold text-text-primary", children: title }),
               /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mt-4 flex flex-col gap-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("label", { htmlFor: "account-list-name", className: "text-[12px] font-medium text-text-secondary", children: "List name" }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("label", { htmlFor: "account-list-name", className: "text-[12px] font-medium text-text-secondary", children: fieldLabel }),
                 /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   "input",
                   {
@@ -2747,14 +2783,18 @@ function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit })
                     autoFocus: true,
                     value: name,
                     onChange: (e) => setName(e.target.value),
-                    placeholder: "e.g. Q4 prospecting targets",
+                    placeholder,
                     className: "h-10 rounded-control border border-border-default bg-input px-3 text-sm outline-hidden focus:border-brand-primaryAction"
                   }
                 )
               ] }),
+              options && options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mt-4 flex flex-col gap-2.5", children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: "flex cursor-pointer items-center gap-2.5 text-[13px] text-text-primary", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckBox, { checked: !!checked[o.key], onChange: () => toggle(o.key), ariaLabel: o.label }),
+                o.label
+              ] }, o.key)) }),
               /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mt-5 flex items-center justify-end gap-2", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { variant: "secondary", onClick: onCancel, children: "Cancel" }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { disabled: !name.trim(), onClick: () => onSubmit(name.trim()), children: submitLabel })
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { disabled: !name.trim(), onClick: () => onSubmit(name.trim(), checked), children: submitLabel })
               ] })
             ]
           }
@@ -2767,12 +2807,13 @@ function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit })
 
 // src/ChipTrigger.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
-function chipTriggerClass() {
+function chipTriggerClass(variant = "box") {
   return cn(
     "flex h-11 items-center gap-2 rounded-control border bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
-    // Sits on the input fill, with a stroke dark enough to still read as a
-    // control against the warm canvas.
-    "border-border-strong"
+    // Both variants sit on the input fill. `inline` carries the darker stroke
+    // so it still reads as a control against the warm canvas with no boxed
+    // shell behind it.
+    variant === "inline" ? "border-border-strong" : "border-border-default"
   );
 }
 function ChipContent({ caption, value, icon }) {
@@ -3125,6 +3166,7 @@ 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 QUARTER_ABBR = ["Q1", "Q2", "Q3", "Q4"];
 var PRESETS = ["Rolling 3 months", "Rolling 6 months", "Rolling 12 months"];
 var startOfToday = () => {
   const d = /* @__PURE__ */ new Date();
@@ -3173,6 +3215,7 @@ function MiniSelect({ value, onChange, options }) {
 }
 function DateRangePicker({
   defaultValue = "Rolling 6 months",
+  granularity = "month",
   align = "left",
   presets = PRESETS,
   onChange,
@@ -3191,6 +3234,8 @@ function DateRangePicker({
   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());
+  const [fromQ, setFromQ] = (0, import_react15.useState)(Math.floor(end.getMonth() / 3));
+  const [toQ, setToQ] = (0, import_react15.useState)(Math.floor(end.getMonth() / 3));
   (0, import_react15.useEffect)(() => {
     const [s, e] = resolveRange(value, end);
     onRangeChange?.(s, e);
@@ -3217,11 +3262,11 @@ function DateRangePicker({
     onChange?.(label);
     setOpen(false);
   };
-  const span = toYr * 12 + toMo - (fromYr * 12 + fromMo) + 1;
+  const span = granularity === "year" ? toYr - fromYr + 1 : granularity === "quarter" ? toYr * 4 + toQ - (fromYr * 4 + fromQ) + 1 : 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}`;
+    const label = granularity === "year" ? `${fromYr} \u2013 ${toYr}` : granularity === "quarter" ? `${QUARTER_ABBR[fromQ]} ${fromYr} \u2013 ${QUARTER_ABBR[toQ]} ${toYr}` : `${MONTH_ABBR[fromMo]} ${fromYr} \u2013 ${MONTH_ABBR[toMo]} ${toYr}`;
     if (showFooter) setDraft(label);
     else commit(label);
   };
@@ -3260,14 +3305,16 @@ function DateRangePicker({
           /* @__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 })) }),
+              granularity === "month" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MiniSelect, { value: fromMo, onChange: setFromMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
+              granularity === "quarter" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MiniSelect, { value: fromQ, onChange: setFromQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, 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 })) }),
+              granularity === "month" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MiniSelect, { value: toMo, onChange: setToMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
+              granularity === "quarter" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MiniSelect, { value: toQ, onChange: setToQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
               /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MiniSelect, { value: toYr, onChange: setToYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
             ] })
           ] }),
@@ -3296,6 +3343,8 @@ function MultiSelectFilter({
   caption,
   options = [],
   groups,
+  counts,
+  variant = "box",
   selected,
   onChange,
   allLabel = "All",
@@ -3353,14 +3402,18 @@ function MultiSelectFilter({
     return next;
   });
   const toggleGroup = (g) => setDraft((cur) => {
-    const ids = groupLeaves(g).map((c) => c.id);
+    const ids = groupLeaves(g).map((c) => c.id).filter((id) => !counts || (counts[id] ?? 0) > 0 || cur.includes(id));
+    if (!ids.length) return cur;
     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 isAvailable = (id) => !counts || (counts[id] ?? 0) > 0 || draft.includes(id);
+  const countFor = (id) => counts?.[id] ?? 0;
   const groupState = (g) => {
-    const ids = groupLeaves(g).map((c) => c.id);
+    const ids = groupLeaves(g).map((c) => c.id).filter(isAvailable);
+    if (!ids.length) return "none";
     const sel = ids.filter((id) => draft.includes(id)).length;
     return sel === 0 ? "none" : sel === ids.length ? "all" : "some";
   };
@@ -3368,10 +3421,12 @@ function MultiSelectFilter({
   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 items = options.filter((o) => isAvailable(o.id) && (!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));
+    const live = g.children.filter((c) => isAvailable(c.id));
+    if (!live.length && !isAvailable(g.id)) return null;
+    if (!ql || g.label.toLowerCase().includes(ql)) return { ...g, children: live };
+    const kids = live.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: [
@@ -3381,7 +3436,7 @@ function MultiSelectFilter({
         type: "button",
         onClick: () => open ? close() : openTray(),
         "aria-expanded": open,
-        className: cn(chipTriggerClass(), fullWidth && "w-full justify-between"),
+        className: cn(chipTriggerClass(variant), fullWidth && "w-full justify-between"),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChipContent, { caption, value, icon }),
           /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
@@ -3432,7 +3487,8 @@ function MultiSelectFilter({
                     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 })
+                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: cn("flex-1 text-[14px] text-text-primary", !plainParent && "font-semibold"), children: g.label }),
+                      counts && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OptionCount, { n: countFor(g.id) })
                     ]
                   }
                 ),
@@ -3446,7 +3502,8 @@ function MultiSelectFilter({
                       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 })
+                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "flex-1 text-[14px] text-text-primary", children: c.label }),
+                        counts && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OptionCount, { n: countFor(c.id) })
                       ]
                     },
                     c.id
@@ -3472,7 +3529,8 @@ function MultiSelectFilter({
                         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 })
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "flex-1 text-[14px] text-text-primary", children: o.label }),
+                    counts && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OptionCount, { n: countFor(o.id) })
                   ]
                 },
                 o.id
@@ -3513,6 +3571,13 @@ function TriCheck({ state }) {
     }
   );
 }
+function OptionCount({ n }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "shrink-0 text-[12px] tabular-nums text-text-tertiary", children: [
+    "(",
+    n.toLocaleString(),
+    ")"
+  ] });
+}
 
 // src/Toggle.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
@@ -3599,6 +3664,7 @@ function Freshness({ level }) {
   Button,
   Card,
   CheckBox,
+  CheckBoxBox,
   ChipContent,
   DEFAULT_SEARCH_MATCH,
   DataScopeFilter,