@mediaradar/design-components 0.9.0 → 0.11.0

package/dist/index.js

@@ -2662,21 +2662,34 @@ 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);
     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.
+    // bg-scrim, not a literal: design-tokens gained a scrim token in 2.5.0.
+    // No in-data-[theme=dark] override needed any more -- the token redefines
+    // itself under that attribute in dark.css, so one class covers both themes.
     /* @__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",
+        className: "fixed inset-0 z-70 flex items-center justify-center bg-scrim px-4",
         onMouseDown: (e) => e.target === e.currentTarget && onCancel(),
         children: /* @__PURE__ */ jsxs24(
           "div",
@@ -2688,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",
                   {
@@ -2696,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 })
               ] })
             ]
           }
@@ -3075,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();
@@ -3123,6 +3141,7 @@ function MiniSelect({ value, onChange, options }) {
 }
 function DateRangePicker({
   defaultValue = "Rolling 6 months",
+  granularity = "month",
   align = "left",
   presets = PRESETS,
   onChange,
@@ -3141,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);
@@ -3167,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);
   };
@@ -3210,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 })) })
             ] })
           ] }),
@@ -3246,6 +3269,8 @@ function MultiSelectFilter({
   caption,
   options = [],
   groups,
+  counts,
+  variant = "box",
   selected,
   onChange,
   allLabel = "All",
@@ -3303,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";
   };
@@ -3318,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: [
@@ -3331,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(
@@ -3382,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) })
                     ]
                   }
                 ),
@@ -3396,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
@@ -3422,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
@@ -3463,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";