@mediaradar/design-components 0.19.0 → 0.21.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, RefObject, ButtonHTMLAttributes } from 'react';
+import { ReactNode, RefObject, ButtonHTMLAttributes, MouseEventHandler, InputHTMLAttributes } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 
@@ -25,6 +25,11 @@ import { VariantProps } from 'class-variance-authority';
  * portaled to the end of the page and appears only after a click, so it is
  * aria-hidden rather than described-by.) Escape dismisses it. `label` names
  * the button; the text describes it.
+ * @use to explain a metric, a column or a page in a sentence or two, behind
+ * the small info glyph.
+ * @use `trigger="hover"` when the explanation should also open on keyboard focus.
+ * @avoid putting anything needed to finish a task in it -- people miss it.
+ * @avoid more than two sentences; longer help belongs on the page.
  * @usage
  * ```tsx
  * <InfoTip text="Trims time periods to data that has finalized across the selected media formats." />
@@ -315,6 +320,15 @@ declare function Delta({ value, suffix, arrow, period, className }: DeltaProps):
  * the control, use CheckBoxBox inside your own <button role="checkbox">
  * instead: a <button> inside a <button> is invalid markup, and a <div
  * onClick> wrapper is not keyboard-reachable at all.
+ * @use for choosing any number of items from a list, and in filter panels
+ * where picks take effect on Apply.
+ * @use indeterminate only on a parent row whose children are partly selected.
+ * @avoid wrapping it in a clickable <div> or another <button> -- it is a
+ * button itself. When the whole row must be the control, use CheckBoxBox
+ * inside your own <button role="checkbox">.
+ * @avoid ticking and disabling a row that is already added; drop the box and
+ * say "Already added" instead.
+ * @avoid it for an on/off setting that takes effect at once -- that's Toggle.
  * @usage
  * ```tsx
  * <CheckBox checked={selected} ariaLabel="Select row" onChange={toggle} />
@@ -381,6 +395,8 @@ declare function CheckBox({ checked, indeterminate, onChange, ariaLabel, disable
  * ancestor owns role="checkbox", aria-checked, the accessible name and the
  * click. Use it exactly when that ancestor is itself the control; use
  * CheckBox when the box is the control.
+ * @use only inside a control that is already the button, to draw the box.
+ * @avoid it on its own as a checkbox -- it has no behavior; use CheckBox.
  * @usage
  * ```tsx
  * <button type="button" role="checkbox" aria-checked={on} onClick={toggle}>
@@ -481,7 +497,11 @@ declare function DateRangeFilter({ caption, defaultValue, value: controlledValue
  * bordered control, mirroring the legacy Creative Intel search + match-type
  * modal (Any Word/Exact Match/Contextual/Ad Code), including the Or/And
  * sub-choice nested under Any Word.
- * @tokens text-badge, rounded-control, border-border-strong, bg-input, text-text-primary,
+ * Three heights on the one control scale -- sm 32, md 40, lg 44 (default) --
+ * so it lines up with the Buttons and dropdowns beside it. A × clears the
+ * text once something is typed.
+ * @tokens text-dense, text-badge, focus-within:outline-border-focus, focus-within:outline-2,
+ * focus-within:outline-offset-1, rounded-control, border-border-strong, bg-input, text-text-primary,
  * text-text-tertiary, hover:bg-subtle, bg-brand-primaryAction, bg-subtle,
  * bg-surface, border-brand-primaryAction, border-border-default,
  * border-border-interactive, focus-visible:outline-border-focus,
@@ -498,12 +518,18 @@ declare function DateRangeFilter({ caption, defaultValue, value: controlledValue
  * Or/And sub-choice under Any Word and its own click-to-toggle info tooltip.
  * The text input carries an `aria-label` derived from `placeholder` — the
  * wrapping `<label>` has no visible text content (just an icon and the
- * input), so it grants the input no accessible name on its own.
+ * input), so it grants the input no accessible name on its own. The clear
+ * × shows only when there's text and `onChange` is given; it empties the
+ * field and puts focus back in it.
  * @a11y The <input> takes its accessible name from `ariaLabel`. The match-mode
  * popover is a radio group (role="radio" + aria-checked) and its trigger
  * reports aria-expanded. Escape closes the popover only, leaving focus in
  * the field -- a consumer nesting this inside another dismissible layer
  * must sequence the two dismissals itself.
+ * @use for every search field: in a filter row (lg), a form (md), a toolbar or
+ * dropdown (sm).
+ * @use the size of the controls beside it.
+ * @avoid a hand-built search input or a borderless one -- one look everywhere.
  * @usage
  * ```tsx
  * <SearchBar value={query} onChange={setQuery} />
@@ -511,6 +537,8 @@ declare function DateRangeFilter({ caption, defaultValue, value: controlledValue
  * ```
  */
 type SearchBarVariant = "default" | "filterable";
+/** sm 32 in toolbars and dropdowns, md 40 in forms, lg 44 in a filter row. */
+type SearchBarSize = "sm" | "md" | "lg";
 type SearchMatchMode = "anyWord" | "exactMatch" | "contextual" | "adCode";
 interface SearchMatchValue {
     mode: SearchMatchMode;
@@ -525,6 +553,8 @@ interface SearchBarProps {
     onChange?: (v: string) => void;
     /** 'default' is a plain keyword input; 'filterable' adds the match-type dropdown. */
     variant?: SearchBarVariant;
+    /** sm 32 in toolbars and dropdowns, md 40 in forms, lg 44 (default) in a filter row -- match the controls beside it. */
+    size?: SearchBarSize;
     /** The 'filterable' variant's dropdown state. */
     matchValue?: SearchMatchValue;
     onMatchChange?: (v: SearchMatchValue) => void;
@@ -541,7 +571,7 @@ interface SearchBarProps {
      */
     testIdPrefix?: string;
 }
-declare function SearchBar({ placeholder, value, onChange, variant, matchValue, onMatchChange, className, testIdPrefix, }: SearchBarProps): react.JSX.Element;
+declare function SearchBar({ placeholder, value, onChange, variant, size, matchValue, onMatchChange, className, testIdPrefix, }: SearchBarProps): react.JSX.Element;
 
 /**
  * @pattern SectionRail
@@ -656,6 +686,11 @@ declare function DataScopeFilter({ value, onChange, align }: DataScopeFilterProp
  * the caption. The popover is not a focus trap and does not move focus on
  * open, so keyboard users tab into it; a consumer rendering it inside
  * another dismissible layer has to sequence the two dismissals itself.
+ * @use for picking one value from a short list in a filter row or a form --
+ * the caption-over-value chip is the one dropdown trigger.
+ * @use the caption everywhere except tight spots where the field is obvious.
+ * @avoid a native <select> or a hand-built dropdown.
+ * @avoid it for several values at once -- that's MultiSelectFilter.
  * @usage
  * ```tsx
  * <SelectFilter caption="Rank" value={rankFilter} onChange={setRankFilter} options={['All', 'VP / Director', 'Manager', 'Coordinator']} />
@@ -717,6 +752,12 @@ declare function SelectFilter({ caption, value, options, onChange, align, fullWi
  * shadow on hover signals it responds to the cursor.
  * @variant static - Set `staticCard`. Non-clickable content -- no hover
  * treatment.
+ * @use to group related content on a surface: a stat tile, a chart, a content panel.
+ * @use `staticCard` on any card that is only read; the hover lift means the
+ * whole card is a link.
+ * @avoid setting a width on the card -- the parent grid or row decides it.
+ * @avoid a hairline rule between sections of cards; use spacing.
+ * @avoid the gradient top edge except on a workflow card that starts a task.
  * @usage
  * ```tsx
  * <Card>
@@ -1384,7 +1425,7 @@ interface SelectionPickerProps<T extends PickerRow> {
  * filtered client-side (the default), or externally-computed `results` for a
  * caller whose search is server-side/async, with `loading`/`error`/
  * `hasMore`/`onLoadMore` covering that mode's states.
- * @tokens border-border-strong, rounded-control, rounded-card, border-border-default, bg-input,
+ * @tokens border-border-strong, rounded-control, rounded-card, border-border-default, bg-input, focus-within:outline-border-focus,
  * bg-canvas, bg-surface, shadow-raised, shadow-overlay, text-text-primary,
  * text-text-secondary, text-text-tertiary, text-text-link,
  * text-brand-primaryAction, border-brand-primaryAction, bg-brand-primaryAction,
@@ -1506,7 +1547,7 @@ declare function PublisherBreakdownList({ rows, defaultVisibleCount, padded, vie
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "danger" | "primary" | "secondary" | "ghost" | "dangerGhost" | null | undefined;
-    size?: "xs" | "sm" | "md" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
     iconOnly?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -1532,8 +1573,9 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
  * @pattern Button
  * @description The one control for every clickable action, from the main call
  * to action on a screen down to a quiet toolbar utility. Six variants
- * (primary, secondary, ghost, danger, dangerGhost, link) across three sizes
- * (xs, sm, md), labelled or icon-only.
+ * (primary, secondary, ghost, danger, dangerGhost, link) across four sizes
+ * (xs 24, sm 32, md 40, lg 44), labelled or icon-only. sm, md and lg are the
+ * one control scale TextField, SearchBar and the filter dropdowns share.
  * 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
@@ -1654,7 +1696,7 @@ interface NameListModalProps {
  * checkboxes under it. Shared by the Account Lists table and the list detail
  * page so create/rename look identical; `fieldLabel`/`placeholder` relabel it
  * for dialogs that name something other than a list.
- * @tokens border-border-strong, bg-scrim, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, rounded-control, bg-input, focus:border-brand-primaryAction
+ * @tokens border-border-strong, bg-scrim, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, rounded-control, bg-input, focus-visible:outline-border-focus, text-dense, z-modal
  * @behavior Escape closes the dialog via `onCancel`, same as clicking the
  * scrim backdrop. Submit is disabled until the name is non-empty (trimmed).
  * When `options` are given they render as CheckBox rows below the field, and
@@ -1888,6 +1930,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;
@@ -2013,7 +2145,7 @@ interface MultiSelectGroup {
  * button shape (two-line caption + value with a chevron) and opens a
  * searchable checkbox popover. Used for the page-level Media Type /
  * Advertiser filters that share state with the filter tray.
- * @tokens border-border-strong, rounded-control, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary, text-text-link, border-border-interactive, bg-brand-primaryAction, bg-input, hover:bg-subtle, hover:text-text-primary, placeholder:text-text-tertiary, text-brand-onprimary
+ * @tokens border-border-strong, rounded-control, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary, text-text-link, border-border-interactive, bg-brand-primaryAction, bg-input, hover:bg-subtle, hover:text-text-primary, placeholder:text-text-tertiary, text-brand-onprimary, focus-within:outline-border-focus
  * @dependencies lucide-react
  * @behavior `variant` picks the trigger's chip stroke: `box` (default, the
  * boxed two-line chip on the default border) or `inline` (same fill,
@@ -2244,6 +2376,16 @@ interface PageHeaderProps {
     description?: ReactNode;
     /** The page's main actions, right-aligned -- usually one primary Button. */
     actions?: ReactNode;
+    /**
+     * The way back up, above the title: an arrow and the parent section's name,
+     * "Competitive intel". Give `href`; add `onClick` to route client-side
+     * (call `preventDefault()` and navigate).
+     */
+    back?: {
+        label: ReactNode;
+        href?: string;
+        onClick?: MouseEventHandler<HTMLAnchorElement>;
+    };
     className?: string;
 }
 /**
@@ -2257,8 +2399,11 @@ interface PageHeaderProps {
  * 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
+ * @tokens text-micro, uppercase, tracking-wider, text-text-tertiary,
+ * hover:text-text-primary, focus-visible:outline-border-focus, rounded-control, 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 `back` on any page one level below a section, naming the section the
+ * arrow goes back to. This is the breadcrumb: no full path.
  * @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
@@ -2267,7 +2412,9 @@ interface PageHeaderProps {
  * @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.
+ * @dependencies lucide-react
+ * @a11y Renders the page's h1. `back` is a real link, read as its label
+ * ("Competitive intel"); the arrow is hidden from screen readers. Use `SectionHeading` (h2) for the sections below it.
  * @usage
  * ```tsx
  * <PageHeader
@@ -2277,6 +2424,251 @@ interface PageHeaderProps {
  * />
  * ```
  */
-declare function PageHeader({ title, description, actions, className }: PageHeaderProps): react.JSX.Element;
+declare function PageHeader({ title, description, actions, back, className }: PageHeaderProps): react.JSX.Element;
+
+type ModalSize = "sm" | "md" | "lg";
+interface ModalProps {
+    /** Whether the dialog is showing. */
+    open: boolean;
+    /** Called on Escape, a click on the dimmed background, or the close button. */
+    onClose: () => void;
+    /** The dialog's title -- a short Title Case name, "Export options". */
+    title: ReactNode;
+    /** One line under the title, when the title alone doesn't say enough. */
+    description?: ReactNode;
+    /** sm 440 for a confirm, md 640 for a form, lg 880 for a table or a list. */
+    size?: ModalSize;
+    /** The buttons along the bottom, right-aligned -- primary last. */
+    footer?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * @pattern Modal
+ * @description A dialog over a dimmed page: title, optional one-line
+ * description, content, and a footer of buttons. Three widths -- sm 440 for a
+ * confirm, md 640 for a form, lg 880 for a table or a list -- over the warm
+ * scrim, which flips with dark mode.
+ * @variant sm - 440px. A confirm: one question, two buttons.
+ * @variant md - 640px. Default. A form.
+ * @variant lg - 880px. A table, a long list, a preview.
+ * @tokens bg-scrim, z-modal, rounded-card, border-border-default, bg-surface,
+ * shadow-overlay, text-base, font-semibold, text-text-primary, text-sm,
+ * text-text-secondary, text-text-tertiary, hover:bg-subtle,
+ * hover:text-text-primary, rounded-control, border-t,
+ * focus-visible:outline-border-focus
+ * @dependencies lucide-react, react-dom
+ * @behavior Portals to <body>. Escape, a click on the background and the ×
+ * all call `onClose`. Focus moves to the first field (else the first footer
+ * button) on open, Tab stays inside
+ * it, and focus goes back to whatever opened it on close. The page behind
+ * stops scrolling while it's open.
+ * @a11y role="dialog" with aria-modal, named by its title and described by
+ * `description`. The close button is labelled "Close".
+ * @use for a task the user has to finish or cancel before going back to the
+ * page: confirm a delete, name a list, pick export options.
+ * @use `sm` for confirms, `md` for forms, `lg` for tables -- pick by content,
+ * never a custom width.
+ * @use one primary Button, last in `footer`, with a secondary "Cancel" before it.
+ * @avoid a modal for a message that needs no answer -- use Toast.
+ * @avoid a modal opened from another modal.
+ * @avoid a `className` width override; if none of the three fit, raise it as
+ * a design question.
+ * @usage
+ * ```tsx
+ * <Modal
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   size="sm"
+ *   title="Delete this list?"
+ *   description="The 12 accounts in it stay in your workspace."
+ *   footer={<><Button variant="secondary" onClick={close}>Cancel</Button><Button variant="danger">Delete</Button></>}
+ * />
+ * ```
+ */
+declare function Modal({ open, onClose, title, description, size, footer, children, className }: ModalProps): react.ReactPortal | null;
+
+type EmptyStateSize = "sm" | "md";
+interface EmptyStateProps {
+    /** A lucide icon, about 20px -- `<SearchX size={20} />`. Optional but expected. */
+    icon?: ReactNode;
+    /** What's empty, in plain words -- "No brands match". */
+    title: ReactNode;
+    /** One line on what to do next -- "Try a shorter search or clear a filter." */
+    description?: ReactNode;
+    /** One way out -- a Button, usually `variant="secondary"` or `"link"`. */
+    action?: ReactNode;
+    /** sm inside a table, a card or a dropdown; md when it fills a page or a panel. */
+    size?: EmptyStateSize;
+    className?: string;
+}
+/**
+ * @pattern EmptyState
+ * @description What shows where content would be: an icon, a title saying
+ * what's empty, one line on what to do next, and one action. Two sizes -- sm
+ * inside a table, card or dropdown; md when it fills a page or a panel.
+ * @variant sm - Default. Inside a table, a card or a dropdown.
+ * @variant md - Fills a page or a large panel.
+ * @tokens text-text-tertiary, text-text-primary, text-text-secondary,
+ * font-semibold, text-sm, text-base, text-xs, bg-subtle, rounded-full
+ * @use whenever a list, table, search or chart has nothing to show.
+ * @use a title that names what's missing ("No brands match"), and a line that
+ * says how to get some ("Try a shorter search or clear a filter.").
+ * @use one action at most, the one that most likely fixes it.
+ * @avoid "No data" or "Nothing here" -- say what's missing.
+ * @avoid an error message in an empty state; a failed load is an error, not
+ * an empty result.
+ * @usage
+ * ```tsx
+ * <EmptyState
+ *   icon={<SearchX size={20} />}
+ *   title="No brands match"
+ *   description="Try a shorter search or clear a filter."
+ *   action={<Button variant="secondary" size="sm" onClick={clear}>Clear filters</Button>}
+ * />
+ * ```
+ */
+declare function EmptyState({ icon, title, description, action, size, className }: EmptyStateProps): react.JSX.Element;
+
+interface TabItem<T extends string = string> {
+    value: T;
+    label: ReactNode;
+    /** A count after the label -- "Contacts 12". */
+    count?: number;
+    disabled?: boolean;
+}
+interface TabsProps<T extends string = string> {
+    items: TabItem<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    /** Names the tab list for screen readers -- "Advertiser sections". */
+    "aria-label": string;
+    /**
+     * Prefix for each tab's id and its panel's id. Tab `x` gets
+     * `${idPrefix}-tab-x` and points at `${idPrefix}-panel-x` -- give the panel
+     * that id, role="tabpanel" and aria-labelledby the tab's id.
+     */
+    idPrefix?: string;
+    className?: string;
+}
+/**
+ * @pattern Tabs
+ * @description Underline tabs that switch between the sections of one page --
+ * Overview, Creative, Contacts. The selected tab is semibold with a brand
+ * underline; the row sits on a hairline. For switching how the same data is
+ * shown (Spend / Share, Chart / Table), use SegmentedControl instead.
+ * @tokens border-b, border-border-default, text-sm, text-text-secondary,
+ * hover:text-text-primary, font-semibold, text-text-primary,
+ * border-brand-primaryAction, text-text-tertiary, text-xs,
+ * focus-visible:outline-border-focus, rounded-control
+ * @behavior Controlled: `value` and `onChange`. The arrow keys, Home and End
+ * move between tabs and select as they go; only the selected tab is in the
+ * Tab order.
+ * @a11y role="tablist" with an aria-label, each tab role="tab" with
+ * aria-selected and aria-controls. Give each panel role="tabpanel" and the
+ * ids from `idPrefix`.
+ * @use to switch between sections of one page that hold different content.
+ * @use short nouns for labels, 2 to 6 tabs.
+ * @avoid tabs to switch views of the same data -- that's SegmentedControl.
+ * @avoid tabs as page navigation; going to a different page is a link.
+ * @usage
+ * ```tsx
+ * <Tabs
+ *   aria-label="Advertiser sections"
+ *   items={[{ value: "overview", label: "Overview" }, { value: "contacts", label: "Contacts", count: 12 }]}
+ *   value={tab}
+ *   onChange={setTab}
+ * />
+ * ```
+ */
+declare function Tabs<T extends string>({ items, value, onChange, idPrefix, className, ...rest }: TabsProps<T>): react.JSX.Element;
+type SegmentedControlSize = "sm" | "md";
+interface SegmentedOption<T extends string = string> {
+    value: T;
+    label: ReactNode;
+}
+interface SegmentedControlProps<T extends string = string> {
+    options: SegmentedOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    /** Names the choice for screen readers -- "Show as". */
+    "aria-label": string;
+    /** sm 32 in toolbars and card headers; md 40 beside md controls. */
+    size?: SegmentedControlSize;
+    className?: string;
+}
+/**
+ * @pattern SegmentedControl
+ * @description A pill of 2 to 4 options that switches how the same data is
+ * shown -- Spend / Share, Chart / Table, Weekly / Monthly. The selected option
+ * is a raised white pill. Heights match the control scale: sm 32, md 40. For
+ * switching between sections with different content, use Tabs instead.
+ * @variant sm - 32px. Default. Toolbars and card headers.
+ * @variant md - 40px. Next to md controls in a filter row.
+ * @tokens rounded-full, bg-subtle, text-xs, text-sm, text-text-secondary,
+ * hover:text-text-primary, bg-surface, font-semibold, text-text-primary,
+ * shadow-raised, focus-visible:outline-border-focus
+ * @behavior Controlled: `value` and `onChange`. The arrow keys, Home and End
+ * move and select; only the selected option is in the Tab order.
+ * @a11y role="radiogroup" with an aria-label; each option is role="radio"
+ * with aria-checked.
+ * @use to switch views of the same data: a measure, a chart type, a period.
+ * @use 2 to 4 short options.
+ * @avoid it for sections of a page with different content -- that's Tabs.
+ * @avoid it for a filter that narrows the data -- that's a filter dropdown or chip.
+ * @usage
+ * ```tsx
+ * <SegmentedControl
+ *   aria-label="Show as"
+ *   options={[{ value: "spend", label: "Spend" }, { value: "share", label: "Share" }]}
+ *   value={measure}
+ *   onChange={setMeasure}
+ * />
+ * ```
+ */
+declare function SegmentedControl<T extends string>({ options, value, onChange, size, className, ...rest }: SegmentedControlProps<T>): react.JSX.Element;
+
+type TextFieldSize = "sm" | "md" | "lg";
+interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** The visible label above the field. Leave it out only when something else on screen names the field, and pass `aria-label`. */
+    label?: ReactNode;
+    /** One line under the field -- a format, a limit. Replaced by `error` when there is one. */
+    hint?: ReactNode;
+    /** What's wrong, in a sentence. Turns the border red and is announced with the field. */
+    error?: ReactNode;
+    /** sm 32 in toolbars and dropdowns, md 40 in forms, lg 44 in a filter row. */
+    size?: TextFieldSize;
+    /** An icon inside the field on the left, about 15px. */
+    icon?: ReactNode;
+}
+/**
+ * @pattern TextField
+ * @description A single-line text input with an optional label, hint and
+ * error. Same heights as Button -- sm 32, md 40, lg 44 -- so a field and a
+ * button side by side line up. 13px text, the strong border every control you
+ * type into uses, and the blue focus ring.
+ * @variant sm - 32px. Toolbars, dropdown panels, table cells.
+ * @variant md - 40px. Default. Forms and modals.
+ * @variant lg - 44px. A filter row, next to the filter dropdowns.
+ * @tokens text-xs, font-medium, text-text-secondary, rounded-control, border,
+ * border-border-strong, bg-input, text-dense, text-text-primary,
+ * placeholder:text-text-tertiary, text-text-tertiary, border-status-danger,
+ * text-text-danger, focus-within:outline-2, focus-within:outline-offset-1,
+ * focus-within:outline-border-focus, opacity-50
+ * @behavior Every native input prop passes through to the <input>; the ref
+ * points at it too.
+ * @a11y The label is a real <label> tied to the input. `hint` and `error` are
+ * linked with aria-describedby, and `error` sets aria-invalid.
+ * @use for any free-text entry: a name, an email, a number.
+ * @use the size of the Button next to it.
+ * @avoid it for search -- SearchBar has the icon and the clear ×.
+ * @avoid a placeholder as the only label; it disappears on typing.
+ * @usage
+ * ```tsx
+ * <TextField label="List name" value={name} onChange={(e) => setName(e.target.value)} />
+ * <TextField size="sm" aria-label="Rows per page" />
+ * ```
+ */
+declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
 
-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 };
+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, EmptyState, type EmptyStateProps, type EmptyStateSize, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, Freshness, type FreshnessLevel, type FreshnessProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, Modal, type ModalProps, type ModalSize, 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 SearchBarSize, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionHeading, type SectionHeadingProps, SectionRail, type SectionRailProps, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, type SegmentedOption, 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, type TabItem, TablePagination, type TablePaginationProps, Tabs, type TabsProps, Tag, type TagProps, TextField, type TextFieldProps, type TextFieldSize, Toast, type ToastProps, type ToastTone, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, ariaSortFor, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };