@mediaradar/design-components 0.9.0 → 0.10.0

package/dist/index.d.cts

@@ -1312,22 +1312,49 @@ interface NameListModalProps {
     initialName: string;
     submitLabel: string;
     onCancel: () => void;
-    onSubmit: (name: string) => void;
+    /**
+     * Called with the trimmed name, and the state of `options` when any were
+     * given. A handler that only takes the name stays valid -- TypeScript lets
+     * a function ignore trailing parameters -- so existing callers are
+     * unaffected.
+     */
+    onSubmit: (name: string, checked: Record<string, boolean>) => void;
+    /**
+     * Relabels the name field, for dialogs that name something other than a
+     * list (e.g. "View name").
+     */
+    fieldLabel?: string;
+    /** Placeholder for the name field, paired with `fieldLabel`. */
+    placeholder?: string;
+    /**
+     * Optional checkboxes below the name field -- e.g. "Set as default" or
+     * "Enable email alerts". Their state is handed to `onSubmit` as the second
+     * argument, keyed by `key`. `initial` sets the starting state.
+     */
+    options?: {
+        key: string;
+        label: string;
+        initial?: boolean;
+    }[];
 }
 /**
  * @pattern NameListModal
- * @description Minimal create/rename dialog — just the list name. Shared by
- * the Account Lists table and the list detail page so create/rename look
- * identical.
+ * @description Create/rename dialog — a name field, and optionally a few
+ * checkboxes under it. Shared by the Account Lists table and the list detail
+ * page so create/rename look identical; `fieldLabel`/`placeholder` relabel it
+ * for dialogs that name something other than a list.
  * @tokens rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, rounded-control, bg-input, focus:border-brand-primaryAction
  * @behavior Escape closes the dialog via `onCancel`, same as clicking the
  * scrim backdrop. Submit is disabled until the name is non-empty (trimmed).
+ * When `options` are given they render as CheckBox rows below the field, and
+ * their state comes back as `onSubmit`'s second argument -- a handler that
+ * only takes the name stays valid.
  * @usage
  * ```tsx
  * <NameListModal title="Rename list" initialName={list.name} submitLabel="Save" onCancel={close} onSubmit={rename} />
  * ```
  */
-declare function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit }: NameListModalProps): react.ReactPortal;
+declare function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit, fieldLabel, placeholder, options, }: NameListModalProps): react.ReactPortal;
 
 /**
  * Which stroke a chip trigger carries.
@@ -1352,6 +1379,10 @@ interface ChipContentProps {
  * @description Shared foundation for filter-bar chip triggers — pairs
  * `chipTriggerClass` with `ChipContent` for the caption/value/icon layout, so
  * every dropdown chip across the app matches.
+ * @props
+ * caption: string -- small uppercase label above the value
+ * value: ReactNode -- the current selection, shown below the caption
+ * icon?: ReactNode -- optional leading icon rendered before the caption/value stack
  * @tokens rounded-control, bg-input, border-border-default, border-border-strong, text-text-secondary, text-text-tertiary, text-text-primary, hover:bg-subtle, focus-visible:outline-border-focus, hover:text-text-primary
  * @behavior `chipTriggerClass` takes a `ChipVariant`: `box` (default, the
  * boxed two-line chip on the default border) or `inline` (same fill, darker
@@ -1564,11 +1595,19 @@ declare function TablePagination({ page, perPage, totalItems, onPageChange, onPe
 }): react.JSX.Element;
 type TablePaginationProps = Parameters<typeof TablePagination>[0];
 
+/** What the Custom Range From/To selects pick. */
+type DateGranularity = 'month' | 'quarter' | 'year';
 /** Resolve a label to its actual [start, end] span, ending at `today`. */
 declare function resolveRange(label: string, today?: Date): [Date, Date];
-declare function DateRangePicker({ defaultValue, align, presets, onChange, onRangeChange, showFooter, today, years, }: {
+declare function DateRangePicker({ defaultValue, granularity, align, presets, onChange, onRangeChange, showFooter, today, years, }: {
     defaultValue?: string;
     align?: 'left' | 'right';
+    /**
+     * What the Custom Range From/To selects pick. `month` shows month + year
+     * selects, `quarter` shows quarter + year, `year` shows year alone -- and
+     * the applied label follows suit. Pair it with matching `presets`.
+     */
+    granularity?: DateGranularity;
     /** Rolling presets shown above Custom Range. Defaults to 3/6/12 months. */
     presets?: string[];
     onChange?: (label: string) => void;
@@ -1602,7 +1641,14 @@ interface MultiSelectGroup {
  * Advertiser filters that share state with the filter tray.
  * @tokens rounded-control, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary, text-text-link, border-border-interactive, bg-brand-primaryAction, bg-input, hover:bg-subtle, hover:text-text-primary, placeholder:text-text-tertiary, text-brand-onprimary
  * @dependencies lucide-react
- * @behavior Same draft/commit-on-close pattern as AdvertiserQuickFilter — the
+ * @behavior `variant` picks the trigger's chip stroke: `box` (default, the
+ * boxed two-line chip on the default border) or `inline` (same fill,
+ * darker stroke, for chips sitting directly on the canvas). Left out of
+ * the catalog's variant list deliberately: check-prop-drift can't resolve
+ * the imported ChipVariant alias through this component's inline prop
+ * type, so such a tag would be unvalidated -- and this exact component
+ * has had stale ones stripped before.
+ * Same draft/commit-on-close pattern as AdvertiserQuickFilter — the
  * draft resyncs from `selected` every time the tray opens, and (without
  * showFooter) any close path commits it, while showFooter mode requires the
  * Apply button and discards the draft on every other close. `min` enforces a
@@ -1614,8 +1660,17 @@ interface MultiSelectGroup {
  * <MultiSelectFilter caption="Media" options={mediaOptions} selected={selected} onChange={setSelected} />
  * ```
  */
-declare function MultiSelectFilter({ caption, options, groups, selected, onChange, allLabel, searchable, searchPlaceholder, align, fullIsAll, min, icon, showFooter, clearValue, menuWidthClass, plainParent, fullWidth, }: {
+declare function MultiSelectFilter({ caption, options, groups, counts, variant, selected, onChange, allLabel, searchable, searchPlaceholder, align, fullIsAll, min, icon, showFooter, clearValue, menuWidthClass, plainParent, fullWidth, }: {
     caption: string;
+    /**
+     * Live option-id -> result count. Supplying it makes the menu faceted:
+     * every label gets a "(n)" suffix and options with nothing behind them
+     * drop out. A selected option is always kept, or there would be no way to
+     * undo it.
+     */
+    counts?: Record<string, number>;
+    /** Chip stroke for the trigger. See ChipVariant. */
+    variant?: ChipVariant;
     options?: {
         id: string;
         label: string;
@@ -1742,4 +1797,4 @@ interface FreshnessProps {
  */
 declare function Freshness({ level }: FreshnessProps): react.JSX.Element;
 
-export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, BarChartPlaceholder, type BarChartPlaceholderProps, Button, type ButtonProps, Card, type CardProps, CheckBox, CheckBoxBox, type CheckBoxBoxProps, type CheckBoxProps, ChipContent, type ChipContentProps, type ChipVariant, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, Freshness, type FreshnessLevel, type FreshnessProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, MultiSelectFilter, type MultiSelectFilterProps, type MultiSelectGroup, NO_RESULTS_BODY, NO_RESULTS_TITLE, NameListModal, type NameListModalProps, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, Pager, type PagerProps, type PickerColumn, type PickerFilter, type PickerRow, PieChartPlaceholder, type PieChartPlaceholderProps, type PubBreak, PublisherBreakdownList, type PublisherBreakdownListProps, QUIET_ACTION_CLASS, SearchBar, type SearchBarProps, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionRail, type SectionRailProps, SelectAllVisible, type SelectAllVisibleProps, SelectFilter, type SelectFilterProps, SelectedSection, type SelectedSectionProps, SelectionPicker, type SelectionPickerAccountList, type SelectionPickerProps, SortButton, type SortButtonProps, type SortDir, type SortState, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, TablePagination, type TablePaginationProps, Tag, type TagProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };
+export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, BarChartPlaceholder, type BarChartPlaceholderProps, Button, type ButtonProps, Card, type CardProps, CheckBox, CheckBoxBox, type CheckBoxBoxProps, type CheckBoxProps, ChipContent, type ChipContentProps, type ChipVariant, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, type DateGranularity, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, Freshness, type FreshnessLevel, type FreshnessProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, MultiSelectFilter, type MultiSelectFilterProps, type MultiSelectGroup, NO_RESULTS_BODY, NO_RESULTS_TITLE, NameListModal, type NameListModalProps, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, Pager, type PagerProps, type PickerColumn, type PickerFilter, type PickerRow, PieChartPlaceholder, type PieChartPlaceholderProps, type PubBreak, PublisherBreakdownList, type PublisherBreakdownListProps, QUIET_ACTION_CLASS, SearchBar, type SearchBarProps, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionRail, type SectionRailProps, SelectAllVisible, type SelectAllVisibleProps, SelectFilter, type SelectFilterProps, SelectedSection, type SelectedSectionProps, SelectionPicker, type SelectionPickerAccountList, type SelectionPickerProps, SortButton, type SortButtonProps, type SortDir, type SortState, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, TablePagination, type TablePaginationProps, Tag, type TagProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };

package/dist/index.d.ts

@@ -1312,22 +1312,49 @@ interface NameListModalProps {
     initialName: string;
     submitLabel: string;
     onCancel: () => void;
-    onSubmit: (name: string) => void;
+    /**
+     * Called with the trimmed name, and the state of `options` when any were
+     * given. A handler that only takes the name stays valid -- TypeScript lets
+     * a function ignore trailing parameters -- so existing callers are
+     * unaffected.
+     */
+    onSubmit: (name: string, checked: Record<string, boolean>) => void;
+    /**
+     * Relabels the name field, for dialogs that name something other than a
+     * list (e.g. "View name").
+     */
+    fieldLabel?: string;
+    /** Placeholder for the name field, paired with `fieldLabel`. */
+    placeholder?: string;
+    /**
+     * Optional checkboxes below the name field -- e.g. "Set as default" or
+     * "Enable email alerts". Their state is handed to `onSubmit` as the second
+     * argument, keyed by `key`. `initial` sets the starting state.
+     */
+    options?: {
+        key: string;
+        label: string;
+        initial?: boolean;
+    }[];
 }
 /**
  * @pattern NameListModal
- * @description Minimal create/rename dialog — just the list name. Shared by
- * the Account Lists table and the list detail page so create/rename look
- * identical.
+ * @description Create/rename dialog — a name field, and optionally a few
+ * checkboxes under it. Shared by the Account Lists table and the list detail
+ * page so create/rename look identical; `fieldLabel`/`placeholder` relabel it
+ * for dialogs that name something other than a list.
  * @tokens rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, rounded-control, bg-input, focus:border-brand-primaryAction
  * @behavior Escape closes the dialog via `onCancel`, same as clicking the
  * scrim backdrop. Submit is disabled until the name is non-empty (trimmed).
+ * When `options` are given they render as CheckBox rows below the field, and
+ * their state comes back as `onSubmit`'s second argument -- a handler that
+ * only takes the name stays valid.
  * @usage
  * ```tsx
  * <NameListModal title="Rename list" initialName={list.name} submitLabel="Save" onCancel={close} onSubmit={rename} />
  * ```
  */
-declare function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit }: NameListModalProps): react.ReactPortal;
+declare function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit, fieldLabel, placeholder, options, }: NameListModalProps): react.ReactPortal;
 
 /**
  * Which stroke a chip trigger carries.
@@ -1352,6 +1379,10 @@ interface ChipContentProps {
  * @description Shared foundation for filter-bar chip triggers — pairs
  * `chipTriggerClass` with `ChipContent` for the caption/value/icon layout, so
  * every dropdown chip across the app matches.
+ * @props
+ * caption: string -- small uppercase label above the value
+ * value: ReactNode -- the current selection, shown below the caption
+ * icon?: ReactNode -- optional leading icon rendered before the caption/value stack
  * @tokens rounded-control, bg-input, border-border-default, border-border-strong, text-text-secondary, text-text-tertiary, text-text-primary, hover:bg-subtle, focus-visible:outline-border-focus, hover:text-text-primary
  * @behavior `chipTriggerClass` takes a `ChipVariant`: `box` (default, the
  * boxed two-line chip on the default border) or `inline` (same fill, darker
@@ -1564,11 +1595,19 @@ declare function TablePagination({ page, perPage, totalItems, onPageChange, onPe
 }): react.JSX.Element;
 type TablePaginationProps = Parameters<typeof TablePagination>[0];
 
+/** What the Custom Range From/To selects pick. */
+type DateGranularity = 'month' | 'quarter' | 'year';
 /** Resolve a label to its actual [start, end] span, ending at `today`. */
 declare function resolveRange(label: string, today?: Date): [Date, Date];
-declare function DateRangePicker({ defaultValue, align, presets, onChange, onRangeChange, showFooter, today, years, }: {
+declare function DateRangePicker({ defaultValue, granularity, align, presets, onChange, onRangeChange, showFooter, today, years, }: {
     defaultValue?: string;
     align?: 'left' | 'right';
+    /**
+     * What the Custom Range From/To selects pick. `month` shows month + year
+     * selects, `quarter` shows quarter + year, `year` shows year alone -- and
+     * the applied label follows suit. Pair it with matching `presets`.
+     */
+    granularity?: DateGranularity;
     /** Rolling presets shown above Custom Range. Defaults to 3/6/12 months. */
     presets?: string[];
     onChange?: (label: string) => void;
@@ -1602,7 +1641,14 @@ interface MultiSelectGroup {
  * Advertiser filters that share state with the filter tray.
  * @tokens rounded-control, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary, text-text-link, border-border-interactive, bg-brand-primaryAction, bg-input, hover:bg-subtle, hover:text-text-primary, placeholder:text-text-tertiary, text-brand-onprimary
  * @dependencies lucide-react
- * @behavior Same draft/commit-on-close pattern as AdvertiserQuickFilter — the
+ * @behavior `variant` picks the trigger's chip stroke: `box` (default, the
+ * boxed two-line chip on the default border) or `inline` (same fill,
+ * darker stroke, for chips sitting directly on the canvas). Left out of
+ * the catalog's variant list deliberately: check-prop-drift can't resolve
+ * the imported ChipVariant alias through this component's inline prop
+ * type, so such a tag would be unvalidated -- and this exact component
+ * has had stale ones stripped before.
+ * Same draft/commit-on-close pattern as AdvertiserQuickFilter — the
  * draft resyncs from `selected` every time the tray opens, and (without
  * showFooter) any close path commits it, while showFooter mode requires the
  * Apply button and discards the draft on every other close. `min` enforces a
@@ -1614,8 +1660,17 @@ interface MultiSelectGroup {
  * <MultiSelectFilter caption="Media" options={mediaOptions} selected={selected} onChange={setSelected} />
  * ```
  */
-declare function MultiSelectFilter({ caption, options, groups, selected, onChange, allLabel, searchable, searchPlaceholder, align, fullIsAll, min, icon, showFooter, clearValue, menuWidthClass, plainParent, fullWidth, }: {
+declare function MultiSelectFilter({ caption, options, groups, counts, variant, selected, onChange, allLabel, searchable, searchPlaceholder, align, fullIsAll, min, icon, showFooter, clearValue, menuWidthClass, plainParent, fullWidth, }: {
     caption: string;
+    /**
+     * Live option-id -> result count. Supplying it makes the menu faceted:
+     * every label gets a "(n)" suffix and options with nothing behind them
+     * drop out. A selected option is always kept, or there would be no way to
+     * undo it.
+     */
+    counts?: Record<string, number>;
+    /** Chip stroke for the trigger. See ChipVariant. */
+    variant?: ChipVariant;
     options?: {
         id: string;
         label: string;
@@ -1742,4 +1797,4 @@ interface FreshnessProps {
  */
 declare function Freshness({ level }: FreshnessProps): react.JSX.Element;
 
-export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, BarChartPlaceholder, type BarChartPlaceholderProps, Button, type ButtonProps, Card, type CardProps, CheckBox, CheckBoxBox, type CheckBoxBoxProps, type CheckBoxProps, ChipContent, type ChipContentProps, type ChipVariant, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, Freshness, type FreshnessLevel, type FreshnessProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, MultiSelectFilter, type MultiSelectFilterProps, type MultiSelectGroup, NO_RESULTS_BODY, NO_RESULTS_TITLE, NameListModal, type NameListModalProps, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, Pager, type PagerProps, type PickerColumn, type PickerFilter, type PickerRow, PieChartPlaceholder, type PieChartPlaceholderProps, type PubBreak, PublisherBreakdownList, type PublisherBreakdownListProps, QUIET_ACTION_CLASS, SearchBar, type SearchBarProps, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionRail, type SectionRailProps, SelectAllVisible, type SelectAllVisibleProps, SelectFilter, type SelectFilterProps, SelectedSection, type SelectedSectionProps, SelectionPicker, type SelectionPickerAccountList, type SelectionPickerProps, SortButton, type SortButtonProps, type SortDir, type SortState, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, TablePagination, type TablePaginationProps, Tag, type TagProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };
+export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, BarChartPlaceholder, type BarChartPlaceholderProps, Button, type ButtonProps, Card, type CardProps, CheckBox, CheckBoxBox, type CheckBoxBoxProps, type CheckBoxProps, ChipContent, type ChipContentProps, type ChipVariant, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, type DateGranularity, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, Freshness, type FreshnessLevel, type FreshnessProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, MultiSelectFilter, type MultiSelectFilterProps, type MultiSelectGroup, NO_RESULTS_BODY, NO_RESULTS_TITLE, NameListModal, type NameListModalProps, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, Pager, type PagerProps, type PickerColumn, type PickerFilter, type PickerRow, PieChartPlaceholder, type PieChartPlaceholderProps, type PubBreak, PublisherBreakdownList, type PublisherBreakdownListProps, QUIET_ACTION_CLASS, SearchBar, type SearchBarProps, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionRail, type SectionRailProps, SelectAllVisible, type SelectAllVisibleProps, SelectFilter, type SelectFilterProps, SelectedSection, type SelectedSectionProps, SelectionPicker, type SelectionPickerAccountList, type SelectionPickerProps, SortButton, type SortButtonProps, type SortDir, type SortState, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, TablePagination, type TablePaginationProps, Tag, type TagProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };

package/dist/index.js

@@ -2662,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);
@@ -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";