@mediaradar/design-components 0.8.1 → 0.10.0

package/dist/index.d.cts

@@ -145,7 +145,8 @@ declare function AdvertiserSearchPrompt({ label }: AdvertiserSearchPromptProps):
  * `<input type="checkbox">`), so it can carry an indeterminate "some but not
  * all" state without the native element's limited styling hooks. Designed to
  * be dropped into a row that already has its own click-to-toggle handler
- * (a common list/table pattern) without double-firing.
+ * (a common list/table pattern) without double-firing. Where the row itself
+ * is the control, use `CheckBoxBox` instead.
  * @tokens bg-brand-primaryAction, border-border-interactive, bg-input,
  * hover:border-brand-primaryAction, focus-visible:outline-border-focus
  * @dependencies lucide-react
@@ -155,8 +156,9 @@ declare function AdvertiserSearchPrompt({ label }: AdvertiserSearchPromptProps):
  * unchecked state previews the brand action color on hover, matching the
  * color the box fills with once checked -- the hover state is a preview of
  * the click's effect, not an unrelated highlight. `onClick` calls
- * `stopPropagation` before firing `onChange`, so nesting this inside a row
- * that toggles on its own click can't fire the toggle twice.
+ * `stopPropagation` before firing `onChange` by default, so nesting this
+ * inside a row that toggles on its own click can't fire the toggle twice;
+ * pass `stopPropagation={false}` where the row should also see the click.
  * @usage
  * ```tsx
  * <CheckBox checked={selected} ariaLabel="Select row" onChange={toggle} />
@@ -174,14 +176,22 @@ interface CheckBoxProps {
      */
     indeterminate?: boolean;
     /**
-     * Called on click with no argument -- flip `checked` yourself. The click
-     * doesn't bubble, so a row that toggles on its own click won't fire twice.
+     * Called on click with no argument -- flip `checked` yourself. By default
+     * the click doesn't bubble, so a row that toggles on its own click won't
+     * fire twice.
      */
     onChange: () => void;
     /** Accessible label -- required since the control carries no visible text of its own. */
     ariaLabel: string;
     /** Blocks clicks, dims the box to 50% opacity, and cancels its hover preview. */
     disabled?: boolean;
+    /**
+     * Whether the click stops bubbling to an ancestor. Defaults to `true`,
+     * which is what a row that toggles on its own click needs. Set `false`
+     * when the ancestor should also see the click -- e.g. a row that both
+     * selects and opens a detail panel.
+     */
+    stopPropagation?: boolean;
     /** Forwarded as `data-testid`, for Playwright/test selectors. */
     testId?: string;
     /**
@@ -190,8 +200,46 @@ interface CheckBoxProps {
      * be on any other disabled control.
      */
     title?: string;
+    /** Extra classes merged onto the box -- e.g. a cursor or margin override. */
+    className?: string;
+}
+declare function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, stopPropagation, testId, title, className, }: CheckBoxProps): react.JSX.Element;
+/**
+ * @pattern CheckBoxBox
+ * @description Presentational checkbox -- draws the same box as `CheckBox`
+ * and nothing else. Use it when an ancestor already carries the interaction
+ * and the checkbox semantics (a clickable option row, a `<label>`), since a
+ * `<button>` inside a `<button>` is invalid markup and a second focus stop on
+ * the same control is worse for keyboard users, not better. The owning
+ * element supplies `role="checkbox"` and `aria-checked`; this is
+ * `aria-hidden` so the state isn't announced twice.
+ * @tokens bg-brand-primaryAction, border-border-interactive, bg-input
+ * @dependencies lucide-react
+ * @behavior Renders through the same `boxClass` as `CheckBox`, so geometry
+ * and fill can't drift. Takes neither the focus ring nor the hover border,
+ * because the row around it owns both. Without this, a row that is itself
+ * the control has no correct option: nesting the interactive `CheckBox`
+ * produces a button inside a button, and dropping to a `<div>` with a click
+ * handler loses keyboard access entirely.
+ * @usage
+ * ```tsx
+ * <button type="button" role="checkbox" aria-checked={on} onClick={toggle}>
+ *   <CheckBoxBox checked={on} />
+ *   <span>Cable TV</span>
+ * </button>
+ * ```
+ */
+interface CheckBoxBoxProps {
+    /** Whether the box is checked. The owning element reports this to AT. */
+    checked: boolean;
+    /** Some-but-not-all state -- shows a dash instead of a check. */
+    indeterminate?: boolean;
+    /** Dims the box to 50% opacity, matching `CheckBox`'s disabled treatment. */
+    disabled?: boolean;
+    /** Extra classes merged onto the box. */
+    className?: string;
 }
-declare function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testId, title }: CheckBoxProps): react.JSX.Element;
+declare function CheckBoxBox({ checked, indeterminate, disabled, className }: CheckBoxBoxProps): react.JSX.Element;
 
 /**
  * @pattern DateRangeFilter
@@ -1264,25 +1312,60 @@ 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.
+ *   - `box`    : the boxed two-line chip (caption over value), on the default
+ *                border. The common filter-bar chip.
+ *   - `inline` : the same white fill with a darker stroke, for chips sitting
+ *                directly on the warm canvas with no boxed shell around them.
+ */
+type ChipVariant = "box" | "inline";
 /** Shared styling for filter-bar chip triggers, so every dropdown chip matches. */
-declare function chipTriggerClass(): string;
+declare function chipTriggerClass(variant?: ChipVariant): string;
 interface ChipContentProps {
     /** Small uppercase label above the value. */
     caption: string;
@@ -1296,14 +1379,22 @@ 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.
- * @tokens rounded-control, bg-input, 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 Provides only the shared `focus-visible:outline-2` keyboard-focus
+ * @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
+ * stroke, for chips sitting directly on the canvas). It is an argument to
+ * that function, not a prop on `ChipContent`.
+ * Provides only the shared `focus-visible:outline-2` keyboard-focus
  * treatment every dropdown trigger depends on — open/close, Escape, and
  * outside-click dismissal all live in each consumer, not here. A new dropdown
  * built on `chipTriggerClass` has to implement its own dismissal handling.
  * @usage
  * ```tsx
- * <button className={chipTriggerClass()}>
+ * <button className={chipTriggerClass("box")}>
  *   <ChipContent caption="Media Type" value="All" />
  * </button>
  * ```
@@ -1504,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;
@@ -1540,9 +1639,16 @@ interface MultiSelectGroup {
  * button shape (two-line caption + value with a chevron) and opens a
  * searchable checkbox popover. Used for the page-level Media Type /
  * 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
+ * @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
@@ -1554,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;
@@ -1682,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, type CheckBoxProps, ChipContent, type ChipContentProps, 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

@@ -145,7 +145,8 @@ declare function AdvertiserSearchPrompt({ label }: AdvertiserSearchPromptProps):
  * `<input type="checkbox">`), so it can carry an indeterminate "some but not
  * all" state without the native element's limited styling hooks. Designed to
  * be dropped into a row that already has its own click-to-toggle handler
- * (a common list/table pattern) without double-firing.
+ * (a common list/table pattern) without double-firing. Where the row itself
+ * is the control, use `CheckBoxBox` instead.
  * @tokens bg-brand-primaryAction, border-border-interactive, bg-input,
  * hover:border-brand-primaryAction, focus-visible:outline-border-focus
  * @dependencies lucide-react
@@ -155,8 +156,9 @@ declare function AdvertiserSearchPrompt({ label }: AdvertiserSearchPromptProps):
  * unchecked state previews the brand action color on hover, matching the
  * color the box fills with once checked -- the hover state is a preview of
  * the click's effect, not an unrelated highlight. `onClick` calls
- * `stopPropagation` before firing `onChange`, so nesting this inside a row
- * that toggles on its own click can't fire the toggle twice.
+ * `stopPropagation` before firing `onChange` by default, so nesting this
+ * inside a row that toggles on its own click can't fire the toggle twice;
+ * pass `stopPropagation={false}` where the row should also see the click.
  * @usage
  * ```tsx
  * <CheckBox checked={selected} ariaLabel="Select row" onChange={toggle} />
@@ -174,14 +176,22 @@ interface CheckBoxProps {
      */
     indeterminate?: boolean;
     /**
-     * Called on click with no argument -- flip `checked` yourself. The click
-     * doesn't bubble, so a row that toggles on its own click won't fire twice.
+     * Called on click with no argument -- flip `checked` yourself. By default
+     * the click doesn't bubble, so a row that toggles on its own click won't
+     * fire twice.
      */
     onChange: () => void;
     /** Accessible label -- required since the control carries no visible text of its own. */
     ariaLabel: string;
     /** Blocks clicks, dims the box to 50% opacity, and cancels its hover preview. */
     disabled?: boolean;
+    /**
+     * Whether the click stops bubbling to an ancestor. Defaults to `true`,
+     * which is what a row that toggles on its own click needs. Set `false`
+     * when the ancestor should also see the click -- e.g. a row that both
+     * selects and opens a detail panel.
+     */
+    stopPropagation?: boolean;
     /** Forwarded as `data-testid`, for Playwright/test selectors. */
     testId?: string;
     /**
@@ -190,8 +200,46 @@ interface CheckBoxProps {
      * be on any other disabled control.
      */
     title?: string;
+    /** Extra classes merged onto the box -- e.g. a cursor or margin override. */
+    className?: string;
+}
+declare function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, stopPropagation, testId, title, className, }: CheckBoxProps): react.JSX.Element;
+/**
+ * @pattern CheckBoxBox
+ * @description Presentational checkbox -- draws the same box as `CheckBox`
+ * and nothing else. Use it when an ancestor already carries the interaction
+ * and the checkbox semantics (a clickable option row, a `<label>`), since a
+ * `<button>` inside a `<button>` is invalid markup and a second focus stop on
+ * the same control is worse for keyboard users, not better. The owning
+ * element supplies `role="checkbox"` and `aria-checked`; this is
+ * `aria-hidden` so the state isn't announced twice.
+ * @tokens bg-brand-primaryAction, border-border-interactive, bg-input
+ * @dependencies lucide-react
+ * @behavior Renders through the same `boxClass` as `CheckBox`, so geometry
+ * and fill can't drift. Takes neither the focus ring nor the hover border,
+ * because the row around it owns both. Without this, a row that is itself
+ * the control has no correct option: nesting the interactive `CheckBox`
+ * produces a button inside a button, and dropping to a `<div>` with a click
+ * handler loses keyboard access entirely.
+ * @usage
+ * ```tsx
+ * <button type="button" role="checkbox" aria-checked={on} onClick={toggle}>
+ *   <CheckBoxBox checked={on} />
+ *   <span>Cable TV</span>
+ * </button>
+ * ```
+ */
+interface CheckBoxBoxProps {
+    /** Whether the box is checked. The owning element reports this to AT. */
+    checked: boolean;
+    /** Some-but-not-all state -- shows a dash instead of a check. */
+    indeterminate?: boolean;
+    /** Dims the box to 50% opacity, matching `CheckBox`'s disabled treatment. */
+    disabled?: boolean;
+    /** Extra classes merged onto the box. */
+    className?: string;
 }
-declare function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testId, title }: CheckBoxProps): react.JSX.Element;
+declare function CheckBoxBox({ checked, indeterminate, disabled, className }: CheckBoxBoxProps): react.JSX.Element;
 
 /**
  * @pattern DateRangeFilter
@@ -1264,25 +1312,60 @@ 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.
+ *   - `box`    : the boxed two-line chip (caption over value), on the default
+ *                border. The common filter-bar chip.
+ *   - `inline` : the same white fill with a darker stroke, for chips sitting
+ *                directly on the warm canvas with no boxed shell around them.
+ */
+type ChipVariant = "box" | "inline";
 /** Shared styling for filter-bar chip triggers, so every dropdown chip matches. */
-declare function chipTriggerClass(): string;
+declare function chipTriggerClass(variant?: ChipVariant): string;
 interface ChipContentProps {
     /** Small uppercase label above the value. */
     caption: string;
@@ -1296,14 +1379,22 @@ 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.
- * @tokens rounded-control, bg-input, 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 Provides only the shared `focus-visible:outline-2` keyboard-focus
+ * @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
+ * stroke, for chips sitting directly on the canvas). It is an argument to
+ * that function, not a prop on `ChipContent`.
+ * Provides only the shared `focus-visible:outline-2` keyboard-focus
  * treatment every dropdown trigger depends on — open/close, Escape, and
  * outside-click dismissal all live in each consumer, not here. A new dropdown
  * built on `chipTriggerClass` has to implement its own dismissal handling.
  * @usage
  * ```tsx
- * <button className={chipTriggerClass()}>
+ * <button className={chipTriggerClass("box")}>
  *   <ChipContent caption="Media Type" value="All" />
  * </button>
  * ```
@@ -1504,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;
@@ -1540,9 +1639,16 @@ interface MultiSelectGroup {
  * button shape (two-line caption + value with a chevron) and opens a
  * searchable checkbox popover. Used for the page-level Media Type /
  * 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
+ * @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
@@ -1554,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;
@@ -1682,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, type CheckBoxProps, ChipContent, type ChipContentProps, 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 };