@mediaradar/design-components 0.5.1 → 0.7.0

package/dist/index.d.cts

@@ -1,12 +1,14 @@
 import * as react from 'react';
-import { ReactNode, RefObject } from 'react';
+import { ReactNode, RefObject, ButtonHTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
 
 /**
  * @pattern InfoTip
  * @description Info tooltip — a small info glyph that opens a portalled,
  * viewport-clamped bubble. Mirrors the Publisher Intel header affordance so
  * page subtitles can collapse into the eyebrow.
- * @tokens text-text-tertiary, rounded-control, border-border, bg-surface,
+ * @tokens text-text-tertiary, rounded-control, border-border-default, bg-surface,
  * shadow-overlay, text-text-secondary, focus-visible:outline-border-focus,
  * hover:text-text-primary, tracking-normal
  * @dependencies lucide-react
@@ -320,7 +322,7 @@ declare function SearchBar({ placeholder, value, onChange, variant, matchValue,
  * desktop grid exactly, or a variable-length list with no "view all" link
  * at all — both need to keep working without the row assuming a count.
  * @tokens text-text-primary, text-text-secondary, text-text-link,
- * rounded-control, rounded-sm, border-border, focus-visible:outline-solid,
+ * rounded-control, rounded-sm, border-border-default, focus-visible:outline-solid,
  * focus-visible:outline-border-focus, hover:bg-subtle, hover:text-text-primary,
  * tracking-tight, font-serif
  * @dependencies lucide-react
@@ -617,10 +619,10 @@ interface SummaryGroup {
  * naming maps to this package's `shadow-raised`/`shadow-overlay` respectively
  * (raised: a static card like this one; overlay: a floating popover/menu),
  * not a 1:1 name swap.
- * @tokens rounded-card, border-border, bg-surface, shadow-raised,
+ * @tokens rounded-card, border-border-default, bg-surface, shadow-raised,
  * text-text-secondary, text-text-primary, rounded-full, bg-subtle,
  * rounded-control, bg-canvas, hover:bg-subtle, hover:text-text-danger,
- * text-text-link, divide-border
+ * text-text-link, divide-border-default
  * @dependencies lucide-react
  * @behavior A group auto-expands only on the empty-to-nonempty transition
  * (including via a nested sub-group's items) and auto-collapses when
@@ -1183,4 +1185,256 @@ interface PublisherBreakdownListProps {
  */
 declare function PublisherBreakdownList({ rows, defaultVisibleCount, padded, viewAllHref, renderLogo }: PublisherBreakdownListProps): react.JSX.Element;
 
-export { AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, BarChartPlaceholder, type BarChartPlaceholderProps, Card, type CardProps, CheckBox, type CheckBoxProps, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, DateRangeFilter, type DateRangeFilterProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, NO_RESULTS_BODY, NO_RESULTS_TITLE, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, 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, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, Tooltip, type TooltipProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, noResultsBody };
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "primary" | "secondary" | "ghost" | "danger" | null | undefined;
+    size?: "icon" | "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** Render the button styling onto the single child element instead of a `<button>` (e.g. a router `<Link>`). */
+    asChild?: boolean;
+    /** Shows a spinner in place of the leading edge and disables the button. */
+    loading?: boolean;
+}
+/**
+ * @pattern Button
+ * @description Primary interactive control for actions. Five visual variants
+ * (primary, secondary, ghost, danger, link) and four sizes (sm, md, lg, icon).
+ * Supports polymorphic rendering via `asChild` (Radix Slot) to apply button
+ * styling to a different element, e.g. a router `<Link>`. Also exports the
+ * raw `buttonVariants` cva function for consumers composing button styling
+ * onto something other than this component.
+ * @tokens bg-brand-primaryAction, text-brand-onprimary, bg-surface, text-text-primary, border-border-interactive, hover:bg-subtle, bg-status-danger, text-status-onstatus, text-text-link, rounded-control, duration-(--mr-motion-duration-interactive), ease-interactive
+ * @dependencies class-variance-authority, @radix-ui/react-slot, lucide-react
+ * @variant primary - The one primary action on a screen. Solid brand fill.
+ * @variant secondary - Any other real action competing for attention (Cancel, Export). Bordered, neutral fill.
+ * @variant ghost - Low-emphasis action inside a dense toolbar or row where a border would add visual noise.
+ * @variant danger - Destructive/irreversible actions (Delete, Remove). Never pair with `primary` in the same control group.
+ * @variant link - Reads as inline text, not a control. Use inside body copy or where a full button would overpower the surrounding content.
+ * @behavior `disabled` removes pointer events entirely (not just a style
+ * change) and dims to 40% opacity. Focus handling is a deliberate exception:
+ * most interactive components use a visible `focus-visible:outline-2` ring,
+ * but Button suppresses it (`focus-visible:outline-hidden focus-visible:ring-0`)
+ * and relies on its per-variant hover/brightness treatment instead. `loading`
+ * implies `disabled` (and sets `aria-busy`), since a control mid-submit
+ * shouldn't accept another click.
+ * @usage
+ * ```tsx
+ * <Button variant="primary" size="md">Save changes</Button>
+ * <Button variant="secondary" size="sm">Cancel</Button>
+ * <Button variant="danger">Delete</Button>
+ * <Button variant="primary" loading>Saving…</Button>
+ * ```
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface FilterDropdownFooterProps {
+    /** Omit to hide the Clear All action for dropdowns that don't need it. */
+    onClear?: () => void;
+    /** Fires when the primary action is pressed. */
+    onApply: () => void;
+    clearLabel?: string;
+    applyLabel?: string;
+}
+/**
+ * @pattern FilterDropdownFooter
+ * @description Fixed Apply/Clear All footer for quick-filter dropdowns —
+ * pinned below the (independently scrollable) option list so it's always
+ * visible. Shared by the Media/Advertiser/Date/Group By/Time Increment quick
+ * filters on Sports Dashboard, Publisher Intel, and Opportunities.
+ * @tokens border-border-default
+ * @usage
+ * ```tsx
+ * <FilterDropdownFooter onApply={handleApply} onClear={handleClear} />
+ * ```
+ */
+declare function FilterDropdownFooter({ onClear, onApply, clearLabel, applyLabel, }: FilterDropdownFooterProps): react.JSX.Element;
+
+interface NameListModalProps {
+    title: string;
+    initialName: string;
+    submitLabel: string;
+    onCancel: () => void;
+    onSubmit: (name: string) => void;
+}
+/**
+ * @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.
+ * @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).
+ * @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;
+
+/** Shared styling for filter-bar chip triggers, so every dropdown chip matches. */
+declare function chipTriggerClass(): string;
+interface ChipContentProps {
+    /** Small uppercase label above the value. */
+    caption: string;
+    /** The current selection, shown below the caption. */
+    value: ReactNode;
+    /** Optional leading icon rendered before the caption/value stack. */
+    icon?: ReactNode;
+}
+/**
+ * @pattern ChipTrigger
+ * @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
+ * 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()}>
+ *   <ChipContent caption="Media Type" value="All" />
+ * </button>
+ * ```
+ */
+declare function ChipContent({ caption, value, icon }: ChipContentProps): react.JSX.Element;
+
+interface ChipLike {
+    key: string;
+    label: string;
+    groupLabel: string;
+}
+interface FilterChipBarProps<T extends ChipLike> {
+    /** Any `{ key, label, groupLabel }` shape — only those fields are read. */
+    chips: T[];
+    onRemove: (chip: T) => void;
+    onClearAll: () => void;
+    /**
+     * Chip keys that are kept but not applied (e.g. a filter the active
+     * workspace can't resolve). Rendered inactive, still removable.
+     */
+    parkedKeys?: Set<string>;
+}
+/**
+ * @pattern FilterChipBar
+ * @description Applied-filter chips — wrap freely across as many rows as
+ * needed, every chip shown. Each chip reveals its filter category on hover
+ * (tooltip + outline). "Clear all" trails the chips. Generic over the
+ * page's own chip type — only the shared key/label/groupLabel fields are
+ * used.
+ * @tokens rounded-full, bg-subtle, text-text-secondary, text-text-link, text-text-tertiary, bg-text-primary, border-border-default, group-hover:bg-border-default, group-hover:ring-border-interactive, group-hover:text-text-primary, group-hover:text-text-secondary, hover:text-text-primary, shadow-raised, text-surface
+ * @dependencies lucide-react
+ * @behavior A parked chip (key in `parkedKeys`) renders with no fill and a
+ * dashed edge instead of the solid applied style, and its hover tooltip
+ * reads "Not in this workspace" instead of the filter's group label.
+ * @usage
+ * ```tsx
+ * <FilterChipBar chips={activeChips} onRemove={removeChip} onClearAll={clearAll} />
+ * ```
+ */
+declare function FilterChipBar<T extends ChipLike>({ chips, onRemove, onClearAll, parkedKeys }: FilterChipBarProps<T>): react.JSX.Element | null;
+
+type SortDir = "asc" | "desc";
+/** An active column and direction, or `null` for the unsorted state. */
+type SortState<K extends string> = {
+    key: K;
+    dir: SortDir;
+} | null;
+/**
+ * The state after clicking `key`. `firstDir` is what the column opens on,
+ * since the useful first look differs by column: counts and dates want the
+ * largest or newest first, names want A→Z.
+ */
+declare function cycleSort<K extends string>(current: SortState<K>, key: K, firstDir?: SortDir): SortState<K>;
+/**
+ * `SortState` in the shape SortButton takes. SortButton wants a non-null
+ * object and reads `key: null` as "no column active".
+ */
+declare function sortProp<K extends string>(sort: SortState<K>): {
+    key: K | null;
+    dir: SortDir;
+};
+
+interface SortButtonProps<K extends string> {
+    label: string;
+    sortKey: K;
+    /** Current sort; a null `key` renders every SortButton inactive. See `sortProp`. */
+    sort: {
+        key: K | null;
+        dir: SortDir;
+    };
+    onSort: (key: K) => void;
+    /** True when there are no rows to order — hides the arrow, drops the click. */
+    disabled?: boolean;
+}
+/**
+ * @pattern SortButton
+ * @description Design-system rule: every sortable table column header uses
+ * this exact icon/color treatment. Sortable-but-inactive columns show a
+ * neutral ArrowUpDown in text-tertiary at half opacity, coming up to full on
+ * hover so the column reads as clickable; the active column swaps to a
+ * direction arrow (ArrowUp/ArrowDown) colored with the brand action blue.
+ * @tokens text-text-tertiary, text-brand-primaryAction, hover:text-text-primary
+ * @dependencies lucide-react
+ * @behavior Pair with `cycleSort`/`sortProp` (exported alongside) for the
+ * standard three-state cycle — sort, reverse, then unsorted. `disabled` keeps
+ * the column's inherited header color rather than dimming it — the column
+ * isn't unavailable, there's just no data under it.
+ * @usage
+ * ```tsx
+ * const [sort, setSort] = useState<SortState<'spend'>>(null)
+ * <SortButton label="Spend" sortKey="spend" sort={sortProp(sort)} onSort={(k) => setSort(cycleSort(sort, k))} />
+ * ```
+ */
+declare function SortButton<K extends string>({ label, sortKey, sort, onSort, disabled }: SortButtonProps<K>): react.JSX.Element;
+
+interface PagerProps {
+    /** The current page, 1-indexed. */
+    page: number;
+    totalPages: number;
+    onPage: (p: number) => void;
+}
+/**
+ * @pattern Pager
+ * @description Compact prev/next pager with a windowed page-number list —
+ * shows every page up to 7 total, otherwise 1 … current±1 … last with
+ * ellipsis gaps. Shared by My Exports and Account Matcher.
+ * @tokens rounded-control, text-text-secondary, bg-brand-primaryAction, text-brand-onprimary, hover:bg-subtle, hover:text-text-primary, text-text-tertiary
+ * @dependencies lucide-react
+ * @usage
+ * ```tsx
+ * <Pager page={page} totalPages={totalPages} onPage={setPage} />
+ * ```
+ */
+declare function Pager({ page, totalPages, onPage }: PagerProps): react.JSX.Element;
+
+declare const SIZES: {
+    /** Matches a 15px lucide icon exactly, so a workspace name in a menu row
+     *  left-aligns with labels in icon-led rows above and below it. */
+    readonly xs: "h-[15px] w-[15px] rounded-[4px] text-[8px] tracking-tight";
+    readonly sm: "h-6 w-6 text-[10px]";
+    readonly md: "h-7 w-7 text-[11px]";
+    readonly lg: "h-11 w-11 text-[15px]";
+};
+interface WorkspaceAvatarProps {
+    /** Omit for the unscoped "All data workspace". */
+    name?: string;
+    size?: keyof typeof SIZES;
+}
+/**
+ * @pattern WorkspaceAvatar
+ * @description The square tile that identifies a workspace in a switch
+ * list — first 1–2 word initials of the workspace name. Pass no name for
+ * the unscoped "All data workspace", which renders "AD" through the same
+ * rule so the unscoped default reads as a peer of named workspaces rather
+ * than a special case.
+ * @tokens rounded-control, bg-subtle, text-text-secondary
+ * @usage
+ * ```tsx
+ * <WorkspaceAvatar name="Capital One" size="sm" />
+ * ```
+ */
+declare function WorkspaceAvatar({ name, size }: WorkspaceAvatarProps): react.JSX.Element;
+
+export { 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, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, 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, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, sortProp };

package/dist/index.d.ts

@@ -1,12 +1,14 @@
 import * as react from 'react';
-import { ReactNode, RefObject } from 'react';
+import { ReactNode, RefObject, ButtonHTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
 
 /**
  * @pattern InfoTip
  * @description Info tooltip — a small info glyph that opens a portalled,
  * viewport-clamped bubble. Mirrors the Publisher Intel header affordance so
  * page subtitles can collapse into the eyebrow.
- * @tokens text-text-tertiary, rounded-control, border-border, bg-surface,
+ * @tokens text-text-tertiary, rounded-control, border-border-default, bg-surface,
  * shadow-overlay, text-text-secondary, focus-visible:outline-border-focus,
  * hover:text-text-primary, tracking-normal
  * @dependencies lucide-react
@@ -320,7 +322,7 @@ declare function SearchBar({ placeholder, value, onChange, variant, matchValue,
  * desktop grid exactly, or a variable-length list with no "view all" link
  * at all — both need to keep working without the row assuming a count.
  * @tokens text-text-primary, text-text-secondary, text-text-link,
- * rounded-control, rounded-sm, border-border, focus-visible:outline-solid,
+ * rounded-control, rounded-sm, border-border-default, focus-visible:outline-solid,
  * focus-visible:outline-border-focus, hover:bg-subtle, hover:text-text-primary,
  * tracking-tight, font-serif
  * @dependencies lucide-react
@@ -617,10 +619,10 @@ interface SummaryGroup {
  * naming maps to this package's `shadow-raised`/`shadow-overlay` respectively
  * (raised: a static card like this one; overlay: a floating popover/menu),
  * not a 1:1 name swap.
- * @tokens rounded-card, border-border, bg-surface, shadow-raised,
+ * @tokens rounded-card, border-border-default, bg-surface, shadow-raised,
  * text-text-secondary, text-text-primary, rounded-full, bg-subtle,
  * rounded-control, bg-canvas, hover:bg-subtle, hover:text-text-danger,
- * text-text-link, divide-border
+ * text-text-link, divide-border-default
  * @dependencies lucide-react
  * @behavior A group auto-expands only on the empty-to-nonempty transition
  * (including via a nested sub-group's items) and auto-collapses when
@@ -1183,4 +1185,256 @@ interface PublisherBreakdownListProps {
  */
 declare function PublisherBreakdownList({ rows, defaultVisibleCount, padded, viewAllHref, renderLogo }: PublisherBreakdownListProps): react.JSX.Element;
 
-export { AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, BarChartPlaceholder, type BarChartPlaceholderProps, Card, type CardProps, CheckBox, type CheckBoxProps, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, DateRangeFilter, type DateRangeFilterProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, NO_RESULTS_BODY, NO_RESULTS_TITLE, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, 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, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, Tooltip, type TooltipProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, noResultsBody };
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "primary" | "secondary" | "ghost" | "danger" | null | undefined;
+    size?: "icon" | "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** Render the button styling onto the single child element instead of a `<button>` (e.g. a router `<Link>`). */
+    asChild?: boolean;
+    /** Shows a spinner in place of the leading edge and disables the button. */
+    loading?: boolean;
+}
+/**
+ * @pattern Button
+ * @description Primary interactive control for actions. Five visual variants
+ * (primary, secondary, ghost, danger, link) and four sizes (sm, md, lg, icon).
+ * Supports polymorphic rendering via `asChild` (Radix Slot) to apply button
+ * styling to a different element, e.g. a router `<Link>`. Also exports the
+ * raw `buttonVariants` cva function for consumers composing button styling
+ * onto something other than this component.
+ * @tokens bg-brand-primaryAction, text-brand-onprimary, bg-surface, text-text-primary, border-border-interactive, hover:bg-subtle, bg-status-danger, text-status-onstatus, text-text-link, rounded-control, duration-(--mr-motion-duration-interactive), ease-interactive
+ * @dependencies class-variance-authority, @radix-ui/react-slot, lucide-react
+ * @variant primary - The one primary action on a screen. Solid brand fill.
+ * @variant secondary - Any other real action competing for attention (Cancel, Export). Bordered, neutral fill.
+ * @variant ghost - Low-emphasis action inside a dense toolbar or row where a border would add visual noise.
+ * @variant danger - Destructive/irreversible actions (Delete, Remove). Never pair with `primary` in the same control group.
+ * @variant link - Reads as inline text, not a control. Use inside body copy or where a full button would overpower the surrounding content.
+ * @behavior `disabled` removes pointer events entirely (not just a style
+ * change) and dims to 40% opacity. Focus handling is a deliberate exception:
+ * most interactive components use a visible `focus-visible:outline-2` ring,
+ * but Button suppresses it (`focus-visible:outline-hidden focus-visible:ring-0`)
+ * and relies on its per-variant hover/brightness treatment instead. `loading`
+ * implies `disabled` (and sets `aria-busy`), since a control mid-submit
+ * shouldn't accept another click.
+ * @usage
+ * ```tsx
+ * <Button variant="primary" size="md">Save changes</Button>
+ * <Button variant="secondary" size="sm">Cancel</Button>
+ * <Button variant="danger">Delete</Button>
+ * <Button variant="primary" loading>Saving…</Button>
+ * ```
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface FilterDropdownFooterProps {
+    /** Omit to hide the Clear All action for dropdowns that don't need it. */
+    onClear?: () => void;
+    /** Fires when the primary action is pressed. */
+    onApply: () => void;
+    clearLabel?: string;
+    applyLabel?: string;
+}
+/**
+ * @pattern FilterDropdownFooter
+ * @description Fixed Apply/Clear All footer for quick-filter dropdowns —
+ * pinned below the (independently scrollable) option list so it's always
+ * visible. Shared by the Media/Advertiser/Date/Group By/Time Increment quick
+ * filters on Sports Dashboard, Publisher Intel, and Opportunities.
+ * @tokens border-border-default
+ * @usage
+ * ```tsx
+ * <FilterDropdownFooter onApply={handleApply} onClear={handleClear} />
+ * ```
+ */
+declare function FilterDropdownFooter({ onClear, onApply, clearLabel, applyLabel, }: FilterDropdownFooterProps): react.JSX.Element;
+
+interface NameListModalProps {
+    title: string;
+    initialName: string;
+    submitLabel: string;
+    onCancel: () => void;
+    onSubmit: (name: string) => void;
+}
+/**
+ * @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.
+ * @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).
+ * @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;
+
+/** Shared styling for filter-bar chip triggers, so every dropdown chip matches. */
+declare function chipTriggerClass(): string;
+interface ChipContentProps {
+    /** Small uppercase label above the value. */
+    caption: string;
+    /** The current selection, shown below the caption. */
+    value: ReactNode;
+    /** Optional leading icon rendered before the caption/value stack. */
+    icon?: ReactNode;
+}
+/**
+ * @pattern ChipTrigger
+ * @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
+ * 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()}>
+ *   <ChipContent caption="Media Type" value="All" />
+ * </button>
+ * ```
+ */
+declare function ChipContent({ caption, value, icon }: ChipContentProps): react.JSX.Element;
+
+interface ChipLike {
+    key: string;
+    label: string;
+    groupLabel: string;
+}
+interface FilterChipBarProps<T extends ChipLike> {
+    /** Any `{ key, label, groupLabel }` shape — only those fields are read. */
+    chips: T[];
+    onRemove: (chip: T) => void;
+    onClearAll: () => void;
+    /**
+     * Chip keys that are kept but not applied (e.g. a filter the active
+     * workspace can't resolve). Rendered inactive, still removable.
+     */
+    parkedKeys?: Set<string>;
+}
+/**
+ * @pattern FilterChipBar
+ * @description Applied-filter chips — wrap freely across as many rows as
+ * needed, every chip shown. Each chip reveals its filter category on hover
+ * (tooltip + outline). "Clear all" trails the chips. Generic over the
+ * page's own chip type — only the shared key/label/groupLabel fields are
+ * used.
+ * @tokens rounded-full, bg-subtle, text-text-secondary, text-text-link, text-text-tertiary, bg-text-primary, border-border-default, group-hover:bg-border-default, group-hover:ring-border-interactive, group-hover:text-text-primary, group-hover:text-text-secondary, hover:text-text-primary, shadow-raised, text-surface
+ * @dependencies lucide-react
+ * @behavior A parked chip (key in `parkedKeys`) renders with no fill and a
+ * dashed edge instead of the solid applied style, and its hover tooltip
+ * reads "Not in this workspace" instead of the filter's group label.
+ * @usage
+ * ```tsx
+ * <FilterChipBar chips={activeChips} onRemove={removeChip} onClearAll={clearAll} />
+ * ```
+ */
+declare function FilterChipBar<T extends ChipLike>({ chips, onRemove, onClearAll, parkedKeys }: FilterChipBarProps<T>): react.JSX.Element | null;
+
+type SortDir = "asc" | "desc";
+/** An active column and direction, or `null` for the unsorted state. */
+type SortState<K extends string> = {
+    key: K;
+    dir: SortDir;
+} | null;
+/**
+ * The state after clicking `key`. `firstDir` is what the column opens on,
+ * since the useful first look differs by column: counts and dates want the
+ * largest or newest first, names want A→Z.
+ */
+declare function cycleSort<K extends string>(current: SortState<K>, key: K, firstDir?: SortDir): SortState<K>;
+/**
+ * `SortState` in the shape SortButton takes. SortButton wants a non-null
+ * object and reads `key: null` as "no column active".
+ */
+declare function sortProp<K extends string>(sort: SortState<K>): {
+    key: K | null;
+    dir: SortDir;
+};
+
+interface SortButtonProps<K extends string> {
+    label: string;
+    sortKey: K;
+    /** Current sort; a null `key` renders every SortButton inactive. See `sortProp`. */
+    sort: {
+        key: K | null;
+        dir: SortDir;
+    };
+    onSort: (key: K) => void;
+    /** True when there are no rows to order — hides the arrow, drops the click. */
+    disabled?: boolean;
+}
+/**
+ * @pattern SortButton
+ * @description Design-system rule: every sortable table column header uses
+ * this exact icon/color treatment. Sortable-but-inactive columns show a
+ * neutral ArrowUpDown in text-tertiary at half opacity, coming up to full on
+ * hover so the column reads as clickable; the active column swaps to a
+ * direction arrow (ArrowUp/ArrowDown) colored with the brand action blue.
+ * @tokens text-text-tertiary, text-brand-primaryAction, hover:text-text-primary
+ * @dependencies lucide-react
+ * @behavior Pair with `cycleSort`/`sortProp` (exported alongside) for the
+ * standard three-state cycle — sort, reverse, then unsorted. `disabled` keeps
+ * the column's inherited header color rather than dimming it — the column
+ * isn't unavailable, there's just no data under it.
+ * @usage
+ * ```tsx
+ * const [sort, setSort] = useState<SortState<'spend'>>(null)
+ * <SortButton label="Spend" sortKey="spend" sort={sortProp(sort)} onSort={(k) => setSort(cycleSort(sort, k))} />
+ * ```
+ */
+declare function SortButton<K extends string>({ label, sortKey, sort, onSort, disabled }: SortButtonProps<K>): react.JSX.Element;
+
+interface PagerProps {
+    /** The current page, 1-indexed. */
+    page: number;
+    totalPages: number;
+    onPage: (p: number) => void;
+}
+/**
+ * @pattern Pager
+ * @description Compact prev/next pager with a windowed page-number list —
+ * shows every page up to 7 total, otherwise 1 … current±1 … last with
+ * ellipsis gaps. Shared by My Exports and Account Matcher.
+ * @tokens rounded-control, text-text-secondary, bg-brand-primaryAction, text-brand-onprimary, hover:bg-subtle, hover:text-text-primary, text-text-tertiary
+ * @dependencies lucide-react
+ * @usage
+ * ```tsx
+ * <Pager page={page} totalPages={totalPages} onPage={setPage} />
+ * ```
+ */
+declare function Pager({ page, totalPages, onPage }: PagerProps): react.JSX.Element;
+
+declare const SIZES: {
+    /** Matches a 15px lucide icon exactly, so a workspace name in a menu row
+     *  left-aligns with labels in icon-led rows above and below it. */
+    readonly xs: "h-[15px] w-[15px] rounded-[4px] text-[8px] tracking-tight";
+    readonly sm: "h-6 w-6 text-[10px]";
+    readonly md: "h-7 w-7 text-[11px]";
+    readonly lg: "h-11 w-11 text-[15px]";
+};
+interface WorkspaceAvatarProps {
+    /** Omit for the unscoped "All data workspace". */
+    name?: string;
+    size?: keyof typeof SIZES;
+}
+/**
+ * @pattern WorkspaceAvatar
+ * @description The square tile that identifies a workspace in a switch
+ * list — first 1–2 word initials of the workspace name. Pass no name for
+ * the unscoped "All data workspace", which renders "AD" through the same
+ * rule so the unscoped default reads as a peer of named workspaces rather
+ * than a special case.
+ * @tokens rounded-control, bg-subtle, text-text-secondary
+ * @usage
+ * ```tsx
+ * <WorkspaceAvatar name="Capital One" size="sm" />
+ * ```
+ */
+declare function WorkspaceAvatar({ name, size }: WorkspaceAvatarProps): react.JSX.Element;
+
+export { 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, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, 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, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, sortProp };