@mediaradar/design-components 0.18.8 → 0.20.0

package/dist/index.d.cts

@@ -424,6 +424,7 @@ declare function CheckBoxBox({ checked, indeterminate, disabled, className }: Ch
  * @usage
  * ```tsx
  * <DateRangeFilter caption="Date Range" defaultValue="Rolling 6 months" onChange={setRange} />
+ * <DateRangeFilter caption="Dates" showDates shortDates placement="right" />
  * <DateRangeFilter presetSet="creativeIntel" defaultValue="Last 7 days" onChange={setRange} />
  * <DateRangeFilter presetSet="creativeIntel" value={preset} range={[start, end]} onChange={setPreset} onRangeChange={(s, e) => setRange({ start: s, end: e })} />
  * ```
@@ -449,6 +450,13 @@ interface DateRangeFilterProps {
     range?: [Date, Date];
     /** Which edge of the trigger the popup aligns to. */
     align?: "left" | "right";
+    /**
+     * Where the popup opens. 'below' (default) under the chip; 'above' over it,
+     * falling back to below when there is no room at the top of the window;
+     * 'right' beside it with bottoms aligned -- for a chip low on the page or
+     * in a narrow column, where opening below would push the popup off screen.
+     */
+    placement?: "below" | "above" | "right";
     /** Fired on Apply with the chip's new display value. */
     onChange?: (value: string) => void;
     /** Fired on Apply (and once on mount, uncontrolled only) with the resolved start/end dates -- e.g. to drive dependent table columns. */
@@ -464,7 +472,7 @@ interface DateRangeFilterProps {
     /** Prefix for data-testid attributes on the trigger, popover, each preset option, and Cancel/Apply. Omit for no test-id wiring. */
     testIdPrefix?: string;
 }
-declare function DateRangeFilter({ caption, defaultValue, value: controlledValue, range: controlledRange, align, onChange, onRangeChange, showDates, shortDates, icon, presetSet, testIdPrefix, }: DateRangeFilterProps): react.JSX.Element;
+declare function DateRangeFilter({ caption, defaultValue, value: controlledValue, range: controlledRange, align, placement, onChange, onRangeChange, showDates, shortDates, icon, presetSet, testIdPrefix, }: DateRangeFilterProps): react.JSX.Element;
 
 /**
  * @pattern SearchBar
@@ -1880,6 +1888,96 @@ interface WorkspaceAvatarProps {
  */
 declare function WorkspaceAvatar({ name, size }: WorkspaceAvatarProps): react.JSX.Element;
 
+type ToastTone = "neutral" | "success" | "warning";
+interface ToastProps {
+    /** What happened, in a short sentence. Past tense: "12 accounts removed". */
+    message: ReactNode;
+    /**
+     * One follow-up, usually Undo. Giving a toast an action extends how long it
+     * stays, since the reader now has to notice it, read it, decide and reach.
+     */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Called when the toast has dismissed itself, or the action closed it. */
+    onClose: () => void;
+    /**
+     * Carried by a leading icon, never by the surface. The surface stays the
+     * same on every toast on purpose -- see @behavior.
+     */
+    tone?: ToastTone;
+    /**
+     * Override the duration. The defaults are 5s, or 10s when there is an
+     * action; both pause while hovered or focused. Set deliberately or not at
+     * all -- a one-off number here is how the product ended up with six.
+     */
+    duration?: number;
+    className?: string;
+}
+/**
+ * @pattern Toast
+ * @description Transient feedback about the page or the task: "12 accounts
+ * removed", "Export started". Floats at the bottom of the window so it never
+ * pushes the page around, dismisses itself, and may carry one action.
+ *
+ * It is one of three shapes of feedback, and the shape is the first decision:
+ * feedback about the control you just used stays ON it (a copy button's icon
+ * becoming a tick); feedback about the page or task floats, which is this;
+ * and feedback you have to act on before continuing stays inline where the
+ * action is, and does not dismiss.
+ * @props
+ * message: ReactNode
+ * action?: { label: string; onClick: () => void }
+ * onClose: () => void
+ * tone?: 'neutral' | 'success' | 'warning' (default 'neutral')
+ * duration?: number -- ms; defaults to 5000, or 10000 with an action
+ * @tokens bg-inverseSurface, text-text-inverse, text-text-inverseSuccess,
+ * text-text-inverseWarning, rounded-control, shadow-overlay,
+ * z-toast, duration-(--mr-motion-duration-interactive), ease-interactive,
+ * focus-visible:outline-border-focus
+ * @dependencies lucide-react
+ * @behavior The surface is the same on every toast. Tone is a leading icon in
+ * green or amber, not a colour wash: a toast already has the reader's attention because it
+ * appeared, so colouring the whole surface adds nothing and makes a failure
+ * read as an alarm. It also keeps one object rather than one per mood -- the
+ * product had a dark pill, a light pill and a green pill doing the same job.
+ *
+ * Timing is tied to whether there is an action, not set per call site. 5s
+ * reads comfortably; 10s is what an Undo needs, because the reader has to
+ * notice the toast, read it, decide and then reach for it. Both pause on
+ * hover and on keyboard focus, which is the real fix for the two toasts that
+ * previously never dismissed at all -- they were held open so an Undo could
+ * be caught, at the cost of a message that never left.
+ * @a11y role="status" with aria-live="polite", so it is announced without
+ * interrupting. The action is a real button inside the live region, reachable
+ * by keyboard; focusing it pauses the timer, so a keyboard user is never
+ * racing the dismissal. The icon is decorative -- the message carries the
+ * meaning, since tone shown only as an icon cannot be the sole signal.
+ * @variant neutral - Something happened. The default, and most toasts.
+ * @variant success - A thing completed that the reader was waiting on.
+ * @variant warning - It completed with something worth knowing. Not for failure -- a failure the reader must act on belongs inline, not in a message that leaves.
+ * @use when reporting something that already happened, that the reader does
+ * not have to act on.
+ * @use with an action when the thing is reversible and reversing it is cheap
+ * -- an Undo on a bulk delete.
+ * @avoid when the reader must act before continuing. A toast leaves; anything
+ * load-bearing belongs inline, next to what it is about.
+ * @avoid when the feedback is about the control just used. A copy button's
+ * tick belongs on the button, where the reader is already looking.
+ * @avoid for errors that lose work. An error that leaves after ten seconds is
+ * an error nobody can act on.
+ * @avoid stacking several at once. Toasts queue; two at the same time means
+ * the second is read and the first is not.
+ * @usage
+ * ```tsx
+ * <Toast message="Export started" onClose={clear} />
+ * <Toast message="12 accounts removed" action={{ label: 'Undo', onClick: undo }} onClose={clear} />
+ * <Toast tone="success" message="Account created" onClose={clear} />
+ * ```
+ */
+declare function Toast({ message, action, onClose, tone, duration, className }: ToastProps): react.ReactPortal;
+
 interface TagProps {
     /** The tag's text, e.g. "Digital". Keep it short: the chip doesn't wrap or truncate. */
     children: ReactNode;
@@ -2178,4 +2276,97 @@ interface FreshnessProps {
  */
 declare function Freshness({ level }: FreshnessProps): react.JSX.Element;
 
-export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, Badge, type BadgeKind, type BadgeProps, type BadgeTone, 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, Delta, type DeltaProps, 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, ariaSortFor, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };
+interface SectionHeadingProps {
+    /** The section's name, in sentence case -- "Saved reports". */
+    title: ReactNode;
+    /** One line under the title saying what the section is or how it works. */
+    description?: ReactNode;
+    /** Controls that act on the whole section -- a search box, a button. Sit right, aligned to the bottom. */
+    actions?: ReactNode;
+    /** Heading level. Defaults to h2, the level under a page's own h1 title. */
+    as?: "h2" | "h3";
+    /** Id for the heading, so the section can be `aria-labelledby` it. */
+    id?: string;
+    className?: string;
+}
+/**
+ * @pattern SectionHeading
+ * @description The title of a section within a page -- "Start from a template",
+ * "Saved reports". One size everywhere (16px semibold), so every page's sections
+ * read at the same level under the page title. Optional one-line description
+ * under it, optional actions on the right.
+ * @props
+ * title: ReactNode -- the section's name, sentence case
+ * description?: ReactNode -- one line under the title
+ * actions?: ReactNode -- section-wide controls on the right (search, a button)
+ * as?: 'h2' | 'h3' (default 'h2') -- heading level
+ * id?: string -- for the section's aria-labelledby
+ * @tokens text-base, font-semibold, text-text-primary, text-dense, text-text-secondary
+ * @use for every titled section of a page, below the page title.
+ * @use `description` for the one thing a reader must know before using the
+ * section -- it sits above the content, where a long list cannot push it out
+ * of view.
+ * @avoid for a card's own title, or a field label inside a form. Those are
+ * smaller and belong to the card or the field.
+ * @avoid writing a paragraph into `description`. One line; anything longer is
+ * help text and belongs elsewhere.
+ * @a11y Renders a real heading (h2 by default) so screen-reader users can jump
+ * between sections. Pass `id` and point the section's `aria-labelledby` at it.
+ * @usage
+ * ```tsx
+ * <section aria-labelledby="saved-title">
+ *   <SectionHeading
+ *     id="saved-title"
+ *     title="Saved reports"
+ *     description="A saved report is its setup, with no data in it."
+ *     actions={<SearchBar placeholder="Search saved reports" value={q} onChange={setQ} />}
+ *   />
+ *   ...
+ * </section>
+ * ```
+ */
+declare function SectionHeading({ title, description, actions, as: Tag, id, className }: SectionHeadingProps): react.JSX.Element;
+
+interface PageHeaderProps {
+    /** The page's name -- "Report Builder". Title Case for a feature name. */
+    title: ReactNode;
+    /** One line under the title saying what the user can do on this page. */
+    description?: ReactNode;
+    /** The page's main actions, right-aligned -- usually one primary Button. */
+    actions?: ReactNode;
+    className?: string;
+}
+/**
+ * @pattern PageHeader
+ * @description The top of a page: its title (the page's only h1), an optional
+ * one-line description under it, and the page's main actions on the right.
+ * Title 20px over a 14px description, 2px apart, so the two read as one unit;
+ * the actions centre on the pair. Type steps down evenly from there: page
+ * title 20, SectionHeading 16, body 14.
+ * @props
+ * title: ReactNode -- the page's name
+ * description?: ReactNode -- one line, about 70 characters at most, on what the user can do here
+ * actions?: ReactNode -- primary actions, right-aligned
+ * @tokens text-xl, font-semibold, tracking-tight, text-text-primary, text-sm, text-text-secondary, max-w-2xl
+ * @use at the top of every top-level page.
+ * @use `description` to say what the page is for, in one sentence a first-time
+ * user can act on ("Build your own tables from MediaRadar data...").
+ * @avoid putting the description to the right of the title. It competes with
+ * the actions and wraps unpredictably on narrow screens.
+ * @avoid more than one primary action in `actions`.
+ * @avoid a description on every page by habit. Use one only where a first-time
+ * user would not know what the page is for; a pipe-separated subtitle beside
+ * the title is the pattern this replaces.
+ * @a11y Renders the page's h1. Use `SectionHeading` (h2) for the sections below it.
+ * @usage
+ * ```tsx
+ * <PageHeader
+ *   title="Report Builder"
+ *   description="Build tables from MediaRadar data and export them whenever you need."
+ *   actions={<Button><Plus /> New report</Button>}
+ * />
+ * ```
+ */
+declare function PageHeader({ title, description, actions, className }: PageHeaderProps): react.JSX.Element;
+
+export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, Badge, type BadgeKind, type BadgeProps, type BadgeTone, 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, Delta, type DeltaProps, 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, PageHeader, type PageHeaderProps, 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, SectionHeading, type SectionHeadingProps, 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, Toast, type ToastProps, type ToastTone, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, ariaSortFor, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };

package/dist/index.d.ts

@@ -424,6 +424,7 @@ declare function CheckBoxBox({ checked, indeterminate, disabled, className }: Ch
  * @usage
  * ```tsx
  * <DateRangeFilter caption="Date Range" defaultValue="Rolling 6 months" onChange={setRange} />
+ * <DateRangeFilter caption="Dates" showDates shortDates placement="right" />
  * <DateRangeFilter presetSet="creativeIntel" defaultValue="Last 7 days" onChange={setRange} />
  * <DateRangeFilter presetSet="creativeIntel" value={preset} range={[start, end]} onChange={setPreset} onRangeChange={(s, e) => setRange({ start: s, end: e })} />
  * ```
@@ -449,6 +450,13 @@ interface DateRangeFilterProps {
     range?: [Date, Date];
     /** Which edge of the trigger the popup aligns to. */
     align?: "left" | "right";
+    /**
+     * Where the popup opens. 'below' (default) under the chip; 'above' over it,
+     * falling back to below when there is no room at the top of the window;
+     * 'right' beside it with bottoms aligned -- for a chip low on the page or
+     * in a narrow column, where opening below would push the popup off screen.
+     */
+    placement?: "below" | "above" | "right";
     /** Fired on Apply with the chip's new display value. */
     onChange?: (value: string) => void;
     /** Fired on Apply (and once on mount, uncontrolled only) with the resolved start/end dates -- e.g. to drive dependent table columns. */
@@ -464,7 +472,7 @@ interface DateRangeFilterProps {
     /** Prefix for data-testid attributes on the trigger, popover, each preset option, and Cancel/Apply. Omit for no test-id wiring. */
     testIdPrefix?: string;
 }
-declare function DateRangeFilter({ caption, defaultValue, value: controlledValue, range: controlledRange, align, onChange, onRangeChange, showDates, shortDates, icon, presetSet, testIdPrefix, }: DateRangeFilterProps): react.JSX.Element;
+declare function DateRangeFilter({ caption, defaultValue, value: controlledValue, range: controlledRange, align, placement, onChange, onRangeChange, showDates, shortDates, icon, presetSet, testIdPrefix, }: DateRangeFilterProps): react.JSX.Element;
 
 /**
  * @pattern SearchBar
@@ -1880,6 +1888,96 @@ interface WorkspaceAvatarProps {
  */
 declare function WorkspaceAvatar({ name, size }: WorkspaceAvatarProps): react.JSX.Element;
 
+type ToastTone = "neutral" | "success" | "warning";
+interface ToastProps {
+    /** What happened, in a short sentence. Past tense: "12 accounts removed". */
+    message: ReactNode;
+    /**
+     * One follow-up, usually Undo. Giving a toast an action extends how long it
+     * stays, since the reader now has to notice it, read it, decide and reach.
+     */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Called when the toast has dismissed itself, or the action closed it. */
+    onClose: () => void;
+    /**
+     * Carried by a leading icon, never by the surface. The surface stays the
+     * same on every toast on purpose -- see @behavior.
+     */
+    tone?: ToastTone;
+    /**
+     * Override the duration. The defaults are 5s, or 10s when there is an
+     * action; both pause while hovered or focused. Set deliberately or not at
+     * all -- a one-off number here is how the product ended up with six.
+     */
+    duration?: number;
+    className?: string;
+}
+/**
+ * @pattern Toast
+ * @description Transient feedback about the page or the task: "12 accounts
+ * removed", "Export started". Floats at the bottom of the window so it never
+ * pushes the page around, dismisses itself, and may carry one action.
+ *
+ * It is one of three shapes of feedback, and the shape is the first decision:
+ * feedback about the control you just used stays ON it (a copy button's icon
+ * becoming a tick); feedback about the page or task floats, which is this;
+ * and feedback you have to act on before continuing stays inline where the
+ * action is, and does not dismiss.
+ * @props
+ * message: ReactNode
+ * action?: { label: string; onClick: () => void }
+ * onClose: () => void
+ * tone?: 'neutral' | 'success' | 'warning' (default 'neutral')
+ * duration?: number -- ms; defaults to 5000, or 10000 with an action
+ * @tokens bg-inverseSurface, text-text-inverse, text-text-inverseSuccess,
+ * text-text-inverseWarning, rounded-control, shadow-overlay,
+ * z-toast, duration-(--mr-motion-duration-interactive), ease-interactive,
+ * focus-visible:outline-border-focus
+ * @dependencies lucide-react
+ * @behavior The surface is the same on every toast. Tone is a leading icon in
+ * green or amber, not a colour wash: a toast already has the reader's attention because it
+ * appeared, so colouring the whole surface adds nothing and makes a failure
+ * read as an alarm. It also keeps one object rather than one per mood -- the
+ * product had a dark pill, a light pill and a green pill doing the same job.
+ *
+ * Timing is tied to whether there is an action, not set per call site. 5s
+ * reads comfortably; 10s is what an Undo needs, because the reader has to
+ * notice the toast, read it, decide and then reach for it. Both pause on
+ * hover and on keyboard focus, which is the real fix for the two toasts that
+ * previously never dismissed at all -- they were held open so an Undo could
+ * be caught, at the cost of a message that never left.
+ * @a11y role="status" with aria-live="polite", so it is announced without
+ * interrupting. The action is a real button inside the live region, reachable
+ * by keyboard; focusing it pauses the timer, so a keyboard user is never
+ * racing the dismissal. The icon is decorative -- the message carries the
+ * meaning, since tone shown only as an icon cannot be the sole signal.
+ * @variant neutral - Something happened. The default, and most toasts.
+ * @variant success - A thing completed that the reader was waiting on.
+ * @variant warning - It completed with something worth knowing. Not for failure -- a failure the reader must act on belongs inline, not in a message that leaves.
+ * @use when reporting something that already happened, that the reader does
+ * not have to act on.
+ * @use with an action when the thing is reversible and reversing it is cheap
+ * -- an Undo on a bulk delete.
+ * @avoid when the reader must act before continuing. A toast leaves; anything
+ * load-bearing belongs inline, next to what it is about.
+ * @avoid when the feedback is about the control just used. A copy button's
+ * tick belongs on the button, where the reader is already looking.
+ * @avoid for errors that lose work. An error that leaves after ten seconds is
+ * an error nobody can act on.
+ * @avoid stacking several at once. Toasts queue; two at the same time means
+ * the second is read and the first is not.
+ * @usage
+ * ```tsx
+ * <Toast message="Export started" onClose={clear} />
+ * <Toast message="12 accounts removed" action={{ label: 'Undo', onClick: undo }} onClose={clear} />
+ * <Toast tone="success" message="Account created" onClose={clear} />
+ * ```
+ */
+declare function Toast({ message, action, onClose, tone, duration, className }: ToastProps): react.ReactPortal;
+
 interface TagProps {
     /** The tag's text, e.g. "Digital". Keep it short: the chip doesn't wrap or truncate. */
     children: ReactNode;
@@ -2178,4 +2276,97 @@ interface FreshnessProps {
  */
 declare function Freshness({ level }: FreshnessProps): react.JSX.Element;
 
-export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, Badge, type BadgeKind, type BadgeProps, type BadgeTone, 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, Delta, type DeltaProps, 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, ariaSortFor, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };
+interface SectionHeadingProps {
+    /** The section's name, in sentence case -- "Saved reports". */
+    title: ReactNode;
+    /** One line under the title saying what the section is or how it works. */
+    description?: ReactNode;
+    /** Controls that act on the whole section -- a search box, a button. Sit right, aligned to the bottom. */
+    actions?: ReactNode;
+    /** Heading level. Defaults to h2, the level under a page's own h1 title. */
+    as?: "h2" | "h3";
+    /** Id for the heading, so the section can be `aria-labelledby` it. */
+    id?: string;
+    className?: string;
+}
+/**
+ * @pattern SectionHeading
+ * @description The title of a section within a page -- "Start from a template",
+ * "Saved reports". One size everywhere (16px semibold), so every page's sections
+ * read at the same level under the page title. Optional one-line description
+ * under it, optional actions on the right.
+ * @props
+ * title: ReactNode -- the section's name, sentence case
+ * description?: ReactNode -- one line under the title
+ * actions?: ReactNode -- section-wide controls on the right (search, a button)
+ * as?: 'h2' | 'h3' (default 'h2') -- heading level
+ * id?: string -- for the section's aria-labelledby
+ * @tokens text-base, font-semibold, text-text-primary, text-dense, text-text-secondary
+ * @use for every titled section of a page, below the page title.
+ * @use `description` for the one thing a reader must know before using the
+ * section -- it sits above the content, where a long list cannot push it out
+ * of view.
+ * @avoid for a card's own title, or a field label inside a form. Those are
+ * smaller and belong to the card or the field.
+ * @avoid writing a paragraph into `description`. One line; anything longer is
+ * help text and belongs elsewhere.
+ * @a11y Renders a real heading (h2 by default) so screen-reader users can jump
+ * between sections. Pass `id` and point the section's `aria-labelledby` at it.
+ * @usage
+ * ```tsx
+ * <section aria-labelledby="saved-title">
+ *   <SectionHeading
+ *     id="saved-title"
+ *     title="Saved reports"
+ *     description="A saved report is its setup, with no data in it."
+ *     actions={<SearchBar placeholder="Search saved reports" value={q} onChange={setQ} />}
+ *   />
+ *   ...
+ * </section>
+ * ```
+ */
+declare function SectionHeading({ title, description, actions, as: Tag, id, className }: SectionHeadingProps): react.JSX.Element;
+
+interface PageHeaderProps {
+    /** The page's name -- "Report Builder". Title Case for a feature name. */
+    title: ReactNode;
+    /** One line under the title saying what the user can do on this page. */
+    description?: ReactNode;
+    /** The page's main actions, right-aligned -- usually one primary Button. */
+    actions?: ReactNode;
+    className?: string;
+}
+/**
+ * @pattern PageHeader
+ * @description The top of a page: its title (the page's only h1), an optional
+ * one-line description under it, and the page's main actions on the right.
+ * Title 20px over a 14px description, 2px apart, so the two read as one unit;
+ * the actions centre on the pair. Type steps down evenly from there: page
+ * title 20, SectionHeading 16, body 14.
+ * @props
+ * title: ReactNode -- the page's name
+ * description?: ReactNode -- one line, about 70 characters at most, on what the user can do here
+ * actions?: ReactNode -- primary actions, right-aligned
+ * @tokens text-xl, font-semibold, tracking-tight, text-text-primary, text-sm, text-text-secondary, max-w-2xl
+ * @use at the top of every top-level page.
+ * @use `description` to say what the page is for, in one sentence a first-time
+ * user can act on ("Build your own tables from MediaRadar data...").
+ * @avoid putting the description to the right of the title. It competes with
+ * the actions and wraps unpredictably on narrow screens.
+ * @avoid more than one primary action in `actions`.
+ * @avoid a description on every page by habit. Use one only where a first-time
+ * user would not know what the page is for; a pipe-separated subtitle beside
+ * the title is the pattern this replaces.
+ * @a11y Renders the page's h1. Use `SectionHeading` (h2) for the sections below it.
+ * @usage
+ * ```tsx
+ * <PageHeader
+ *   title="Report Builder"
+ *   description="Build tables from MediaRadar data and export them whenever you need."
+ *   actions={<Button><Plus /> New report</Button>}
+ * />
+ * ```
+ */
+declare function PageHeader({ title, description, actions, className }: PageHeaderProps): react.JSX.Element;
+
+export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, Badge, type BadgeKind, type BadgeProps, type BadgeTone, 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, Delta, type DeltaProps, 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, PageHeader, type PageHeaderProps, 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, SectionHeading, type SectionHeadingProps, 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, Toast, type ToastProps, type ToastTone, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, ariaSortFor, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };