@mediaradar/design-components 0.18.7 → 0.19.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
@@ -2118,10 +2126,12 @@ interface ToggleProps {
  * Rendered as a `<button role="switch">` so the on/off state is announced as a
  * switch rather than a checkbox, and so the track and knob can carry the brand
  * fill without fighting a native input's styling hooks.
- * @tokens bg-brand-primaryAction, bg-border-interactive, bg-surface, shadow-raised, outline-border-focus
+ * @tokens bg-brand-primaryAction, bg-surface, shadow-raised, outline-border-focus
  * @behavior The knob is positioned by `translate-x`, not by flex alignment, so
- * the slide animates. Off uses `bg-border-interactive` rather than a grey
- * literal, which keeps the track visible against `bg-surface` in dark mode.
+ * the slide animates. Off is `border-interactive` mixed 70/30 with
+ * `text-secondary` (an inline style), so the track and the knob on it are at
+ * least 3:1 against the surface in both themes (WCAG 1.4.11). The two tokens
+ * are the same colour in light mode, so light is unchanged.
  * Pair it with a label and any InfoTip in the surrounding row: this component
  * draws only the switch, so rows stay free to lay the label out however they
  * need (usually label left, switch pushed right).
@@ -2176,4 +2186,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, 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
@@ -2118,10 +2126,12 @@ interface ToggleProps {
  * Rendered as a `<button role="switch">` so the on/off state is announced as a
  * switch rather than a checkbox, and so the track and knob can carry the brand
  * fill without fighting a native input's styling hooks.
- * @tokens bg-brand-primaryAction, bg-border-interactive, bg-surface, shadow-raised, outline-border-focus
+ * @tokens bg-brand-primaryAction, bg-surface, shadow-raised, outline-border-focus
  * @behavior The knob is positioned by `translate-x`, not by flex alignment, so
- * the slide animates. Off uses `bg-border-interactive` rather than a grey
- * literal, which keeps the track visible against `bg-surface` in dark mode.
+ * the slide animates. Off is `border-interactive` mixed 70/30 with
+ * `text-secondary` (an inline style), so the track and the knob on it are at
+ * least 3:1 against the surface in both themes (WCAG 1.4.11). The two tokens
+ * are the same colour in light mode, so light is unchanged.
  * Pair it with a label and any InfoTip in the surrounding row: this component
  * draws only the switch, so rows stay free to lay the label out however they
  * need (usually label left, switch pushed right).
@@ -2176,4 +2186,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, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, ariaSortFor, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };

package/dist/index.js

@@ -583,7 +583,7 @@ function CheckBoxBox({ checked, indeterminate, disabled, className }) {
 }
 
 // src/DateRangeFilter.tsx
-import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect3, useLayoutEffect, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
 import { ChevronDown as ChevronDown2, ChevronLeft, ChevronRight } from "lucide-react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var DEFAULT_SHORTCUTS = [
@@ -707,6 +707,7 @@ function DateRangeFilter({
   value: controlledValue,
   range: controlledRange,
   align = "left",
+  placement = "below",
   onChange,
   onRangeChange,
   showDates = false,
@@ -791,6 +792,13 @@ function DateRangeFilter({
     onRangeChange?.(s, e);
     setOpen(false);
   };
+  const popRef = useRef3(null);
+  const [flipBelow, setFlipBelow] = useState3(false);
+  useLayoutEffect(() => {
+    if (!open || placement !== "above" || !ref.current || !popRef.current) return;
+    setFlipBelow(ref.current.getBoundingClientRect().top < popRef.current.offsetHeight + 16);
+  }, [open, placement]);
+  const above = placement === "above" && !flipBelow;
   return /* @__PURE__ */ jsxs6("div", { className: "relative", ref, children: [
     /* @__PURE__ */ jsxs6(
       "button",
@@ -814,7 +822,8 @@ function DateRangeFilter({
       "div",
       {
         "data-testid": testIdPrefix && `${testIdPrefix}-popover`,
-        className: `absolute top-[calc(100%+8px)] z-30 flex overflow-hidden rounded-card border border-border-default bg-surface shadow-overlay ${align === "right" ? "right-0" : "left-0"}`,
+        ref: popRef,
+        className: `absolute z-30 flex overflow-hidden rounded-card border border-border-default bg-surface shadow-overlay ${placement === "right" ? "bottom-0 left-full ml-2" : `${above ? "bottom-full mb-2" : "top-[calc(100%+8px)]"} ${align === "right" ? "right-0" : "left-0"}`}`,
         role: "dialog",
         "aria-label": "Select date range",
         children: [
@@ -1375,7 +1384,7 @@ function Option({
 }
 
 // src/SelectFilter.tsx
-import { useCallback as useCallback2, useEffect as useEffect6, useLayoutEffect, useRef as useRef7, useState as useState6 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useRef as useRef7, useState as useState6 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { Check as Check5, ChevronDown as ChevronDown5 } from "lucide-react";
 import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
@@ -1405,7 +1414,7 @@ function SelectFilter({
     const r = ref.current.getBoundingClientRect();
     setPos({ top: r.bottom + 8, left: align === "right" ? r.right - r.width : r.left, width: r.width });
   }, [align]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!open) return;
     reposition();
   }, [open, reposition]);
@@ -1878,7 +1887,7 @@ function StackedColumnPlaceholder({
 }
 
 // src/Tooltip.tsx
-import { useEffect as useEffect8, useId as useId3, useLayoutEffect as useLayoutEffect2, useRef as useRef9, useState as useState8 } from "react";
+import { useEffect as useEffect8, useId as useId3, useLayoutEffect as useLayoutEffect3, useRef as useRef9, useState as useState8 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function cx6(...parts) {
@@ -2044,7 +2053,7 @@ function Tooltip({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [anchor]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!anchor) return;
     const el = boxRef.current;
     if (!el) return;
@@ -2185,7 +2194,7 @@ function SelectedSection({ count, open, onToggle, children, testIdPrefix }) {
 }
 
 // src/SelectionPicker.tsx
-import { useCallback as useCallback3, useEffect as useEffect9, useLayoutEffect as useLayoutEffect3, useMemo as useMemo3, useRef as useRef10, useState as useState9 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect9, useLayoutEffect as useLayoutEffect4, useMemo as useMemo3, useRef as useRef10, useState as useState9 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { Search as Search4, Plus, Info as Info2, ChevronRight as ChevronRight3, ChevronDown as ChevronDown8, Check as Check6, List, Loader2 } from "lucide-react";
 import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -2590,7 +2599,7 @@ function FilterDropdown({
   const [pos, setPos] = useState9(null);
   const searchable = filter.options.length > 8;
   const shownOptions = searchable && q.trim() ? filter.options.filter((o) => o.toLowerCase().includes(q.trim().toLowerCase())) : filter.options;
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     if (!open || !btnRef.current) return;
     const r = btnRef.current.getBoundingClientRect();
     setPos({ top: r.bottom + 6, left: r.left });
@@ -3833,6 +3842,7 @@ var SIZES2 = {
   sm: { track: "h-5 w-9", knob: "h-4 w-4", on: "translate-x-[18px]" },
   md: { track: "h-6 w-11", knob: "h-5 w-5", on: "translate-x-[22px]" }
 };
+var OFF_TRACK = "color-mix(in srgb, var(--mr-color-border-interactive) 70%, var(--mr-color-text-secondary))";
 function Toggle({ checked, onChange, label, size = "md", disabled, className, testIdPrefix }) {
   const s = SIZES2[size];
   return /* @__PURE__ */ jsx38(
@@ -3845,10 +3855,11 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className, te
       disabled,
       "data-testid": testIdPrefix && `${testIdPrefix}-toggle`,
       onClick: () => onChange(!checked),
+      style: checked ? void 0 : { backgroundColor: OFF_TRACK },
       className: cn(
         "relative inline-flex shrink-0 items-center rounded-full transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
         s.track,
-        checked ? "bg-brand-primaryAction" : "bg-border-interactive",
+        checked && "bg-brand-primaryAction",
         disabled && "cursor-not-allowed opacity-50",
         className
       ),
@@ -3903,6 +3914,30 @@ function Freshness({ level }) {
     }
   );
 }
+
+// src/SectionHeading.tsx
+import { jsx as jsx41, jsxs as jsxs35 } from "react/jsx-runtime";
+function SectionHeading({ title, description, actions, as: Tag2 = "h2", id, className }) {
+  return /* @__PURE__ */ jsxs35("div", { className: cn("flex flex-wrap items-end justify-between gap-x-4 gap-y-2", className), children: [
+    /* @__PURE__ */ jsxs35("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx41(Tag2, { id, className: "text-base font-semibold text-text-primary", children: title }),
+      description && /* @__PURE__ */ jsx41("p", { className: "mt-0.5 text-dense text-text-secondary", children: description })
+    ] }),
+    actions && /* @__PURE__ */ jsx41("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+  ] });
+}
+
+// src/PageHeader.tsx
+import { jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
+function PageHeader({ title, description, actions, className }) {
+  return /* @__PURE__ */ jsxs36("header", { className: cn("flex flex-wrap items-center justify-between gap-x-6 gap-y-3", className), children: [
+    /* @__PURE__ */ jsxs36("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx42("h1", { className: "text-xl font-semibold tracking-tight text-text-primary", children: title }),
+      description && /* @__PURE__ */ jsx42("p", { className: "mt-0.5 max-w-2xl text-sm text-text-secondary", children: description })
+    ] }),
+    actions && /* @__PURE__ */ jsx42("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+  ] });
+}
 export {
   AISpark,
   AdvertiserNoResults,
@@ -3931,11 +3966,13 @@ export {
   NameListModal,
   NoResultsEmptyState,
   PRIMARY_ACTION_CLASS,
+  PageHeader,
   Pager,
   PieChartPlaceholder,
   PublisherBreakdownList,
   QUIET_ACTION_CLASS,
   SearchBar,
+  SectionHeading,
   SectionRail,
   SelectAllVisible,
   SelectFilter,