@mediaradar/design-components 0.8.1 → 0.10.0

package/dist/index.js

@@ -390,9 +390,39 @@ function OptionRow({
 
 // src/CheckBox.tsx
 import { Check as Check2, Minus } from "lucide-react";
+
+// src/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/CheckBox.tsx
 import { jsx as jsx4 } from "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__ */ jsx4(Minus, { size: 13, strokeWidth: 3 });
+  return checked ? /* @__PURE__ */ jsx4(Check2, { size: 13, strokeWidth: 3 }) : null;
+}
+function CheckBox({
+  checked,
+  indeterminate,
+  onChange,
+  ariaLabel,
+  disabled,
+  stopPropagation = true,
+  testId,
+  title,
+  className
+}) {
+  const on = checked || !!indeterminate;
   return /* @__PURE__ */ jsx4(
     "button",
     {
@@ -404,25 +434,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__ */ jsx4(Minus, { size: 13, strokeWidth: 3 }) : checked ? /* @__PURE__ */ jsx4(Check2, { size: 13, strokeWidth: 3 }) : null
+        disabled && "hover:border-border-interactive",
+        className
+      ),
+      children: /* @__PURE__ */ jsx4(Glyph, { checked, indeterminate })
     }
   );
 }
+function CheckBoxBox({ checked, indeterminate, disabled, className }) {
+  return /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", className: cn(boxClass(checked || !!indeterminate, disabled), className), children: /* @__PURE__ */ jsx4(Glyph, { checked, indeterminate }) });
+}
 
 // src/DateRangeFilter.tsx
 import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
@@ -2558,15 +2589,6 @@ 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",
@@ -2640,8 +2662,21 @@ function FilterDropdownFooter({
 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 }) {
+function NameListModal({
+  title,
+  initialName,
+  submitLabel,
+  onCancel,
+  onSubmit,
+  fieldLabel = "List name",
+  placeholder = "e.g. Q4 prospecting targets",
+  options
+}) {
   const [name, setName] = useState11(initialName);
+  const [checked, setChecked] = useState11(
+    () => Object.fromEntries((options ?? []).map((o) => [o.key, !!o.initial]))
+  );
+  const toggle = (key) => setChecked((c) => ({ ...c, [key]: !c[key] }));
   useEffect10(() => {
     const onKey = (e) => e.key === "Escape" && onCancel();
     window.addEventListener("keydown", onKey);
@@ -2666,7 +2701,7 @@ function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit })
             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("label", { htmlFor: "account-list-name", className: "text-[12px] font-medium text-text-secondary", children: fieldLabel }),
                 /* @__PURE__ */ jsx26(
                   "input",
                   {
@@ -2674,14 +2709,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__ */ jsx26("div", { className: "mt-4 flex flex-col gap-2.5", children: options.map((o) => /* @__PURE__ */ jsxs24("label", { className: "flex cursor-pointer items-center gap-2.5 text-[13px] text-text-primary", children: [
+                /* @__PURE__ */ jsx26(CheckBox, { checked: !!checked[o.key], onChange: () => toggle(o.key), ariaLabel: o.label }),
+                o.label
+              ] }, o.key)) }),
               /* @__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 })
+                /* @__PURE__ */ jsx26(Button, { disabled: !name.trim(), onClick: () => onSubmit(name.trim(), checked), children: submitLabel })
               ] })
             ]
           }
@@ -2694,12 +2733,13 @@ function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit })
 
 // src/ChipTrigger.tsx
 import { jsx as jsx27, jsxs as jsxs25 } from "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 }) {
@@ -3052,6 +3092,7 @@ import { useEffect as useEffect11, useMemo as useMemo4, useRef as useRef11, useS
 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 QUARTER_ABBR = ["Q1", "Q2", "Q3", "Q4"];
 var PRESETS = ["Rolling 3 months", "Rolling 6 months", "Rolling 12 months"];
 var startOfToday = () => {
   const d = /* @__PURE__ */ new Date();
@@ -3100,6 +3141,7 @@ function MiniSelect({ value, onChange, options }) {
 }
 function DateRangePicker({
   defaultValue = "Rolling 6 months",
+  granularity = "month",
   align = "left",
   presets = PRESETS,
   onChange,
@@ -3118,6 +3160,8 @@ function DateRangePicker({
   const [fromYr, setFromYr] = useState12(end.getFullYear() - 1);
   const [toMo, setToMo] = useState12(end.getMonth());
   const [toYr, setToYr] = useState12(end.getFullYear());
+  const [fromQ, setFromQ] = useState12(Math.floor(end.getMonth() / 3));
+  const [toQ, setToQ] = useState12(Math.floor(end.getMonth() / 3));
   useEffect11(() => {
     const [s, e] = resolveRange(value, end);
     onRangeChange?.(s, e);
@@ -3144,11 +3188,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);
   };
@@ -3187,14 +3231,16 @@ function DateRangePicker({
           /* @__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 })) }),
+              granularity === "month" && /* @__PURE__ */ jsx34(MiniSelect, { value: fromMo, onChange: setFromMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
+              granularity === "quarter" && /* @__PURE__ */ jsx34(MiniSelect, { value: fromQ, onChange: setFromQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, 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 })) }),
+              granularity === "month" && /* @__PURE__ */ jsx34(MiniSelect, { value: toMo, onChange: setToMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
+              granularity === "quarter" && /* @__PURE__ */ jsx34(MiniSelect, { value: toQ, onChange: setToQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
               /* @__PURE__ */ jsx34(MiniSelect, { value: toYr, onChange: setToYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
             ] })
           ] }),
@@ -3223,6 +3269,8 @@ function MultiSelectFilter({
   caption,
   options = [],
   groups,
+  counts,
+  variant = "box",
   selected,
   onChange,
   allLabel = "All",
@@ -3280,14 +3328,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";
   };
@@ -3295,10 +3347,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__ */ jsxs31("div", { className: cn("relative", fullWidth && "w-full"), ref, children: [
@@ -3308,7 +3362,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__ */ jsx35(ChipContent, { caption, value, icon }),
           /* @__PURE__ */ jsx35(
@@ -3359,7 +3413,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__ */ jsx35(TriCheck, { state }),
-                      /* @__PURE__ */ jsx35("span", { className: cn("flex-1 text-[14px] text-text-primary", !plainParent && "font-semibold"), children: g.label })
+                      /* @__PURE__ */ jsx35("span", { className: cn("flex-1 text-[14px] text-text-primary", !plainParent && "font-semibold"), children: g.label }),
+                      counts && /* @__PURE__ */ jsx35(OptionCount, { n: countFor(g.id) })
                     ]
                   }
                 ),
@@ -3373,7 +3428,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__ */ jsx35(TriCheck, { state: checked ? "all" : "none" }),
-                        /* @__PURE__ */ jsx35("span", { className: "flex-1 text-[14px] text-text-primary", children: c.label })
+                        /* @__PURE__ */ jsx35("span", { className: "flex-1 text-[14px] text-text-primary", children: c.label }),
+                        counts && /* @__PURE__ */ jsx35(OptionCount, { n: countFor(c.id) })
                       ]
                     },
                     c.id
@@ -3399,7 +3455,8 @@ function MultiSelectFilter({
                         children: checked && /* @__PURE__ */ jsx35(Check7, { size: 13, strokeWidth: 3 })
                       }
                     ),
-                    /* @__PURE__ */ jsx35("span", { className: "flex-1 text-[14px] text-text-primary", children: o.label })
+                    /* @__PURE__ */ jsx35("span", { className: "flex-1 text-[14px] text-text-primary", children: o.label }),
+                    counts && /* @__PURE__ */ jsx35(OptionCount, { n: countFor(o.id) })
                   ]
                 },
                 o.id
@@ -3440,6 +3497,13 @@ function TriCheck({ state }) {
     }
   );
 }
+function OptionCount({ n }) {
+  return /* @__PURE__ */ jsxs31("span", { className: "shrink-0 text-[12px] tabular-nums text-text-tertiary", children: [
+    "(",
+    n.toLocaleString(),
+    ")"
+  ] });
+}
 
 // src/Toggle.tsx
 import { jsx as jsx36 } from "react/jsx-runtime";
@@ -3525,6 +3589,7 @@ export {
   Button,
   Card,
   CheckBox,
+  CheckBoxBox,
   ChipContent,
   DEFAULT_SEARCH_MATCH,
   DataScopeFilter,