@mediaradar/design-components 0.8.0 → 0.9.0

package/dist/index.d.cts

@@ -145,7 +145,8 @@ declare function AdvertiserSearchPrompt({ label }: AdvertiserSearchPromptProps):
  * `<input type="checkbox">`), so it can carry an indeterminate "some but not
  * all" state without the native element's limited styling hooks. Designed to
  * be dropped into a row that already has its own click-to-toggle handler
- * (a common list/table pattern) without double-firing.
+ * (a common list/table pattern) without double-firing. Where the row itself
+ * is the control, use `CheckBoxBox` instead.
  * @tokens bg-brand-primaryAction, border-border-interactive, bg-input,
  * hover:border-brand-primaryAction, focus-visible:outline-border-focus
  * @dependencies lucide-react
@@ -155,8 +156,9 @@ declare function AdvertiserSearchPrompt({ label }: AdvertiserSearchPromptProps):
  * unchecked state previews the brand action color on hover, matching the
  * color the box fills with once checked -- the hover state is a preview of
  * the click's effect, not an unrelated highlight. `onClick` calls
- * `stopPropagation` before firing `onChange`, so nesting this inside a row
- * that toggles on its own click can't fire the toggle twice.
+ * `stopPropagation` before firing `onChange` by default, so nesting this
+ * inside a row that toggles on its own click can't fire the toggle twice;
+ * pass `stopPropagation={false}` where the row should also see the click.
  * @usage
  * ```tsx
  * <CheckBox checked={selected} ariaLabel="Select row" onChange={toggle} />
@@ -165,6 +167,7 @@ declare function AdvertiserSearchPrompt({ label }: AdvertiserSearchPromptProps):
  * ```
  */
 interface CheckBoxProps {
+    /** Whether the box is checked. Controlled: the parent owns this value. */
     checked: boolean;
     /**
      * Some-but-not-all state for a "select all" checkbox -- shows a dash
@@ -172,10 +175,23 @@ interface CheckBoxProps {
      * plain boolean.
      */
     indeterminate?: boolean;
+    /**
+     * Called on click with no argument -- flip `checked` yourself. By default
+     * the click doesn't bubble, so a row that toggles on its own click won't
+     * fire twice.
+     */
     onChange: () => void;
     /** Accessible label -- required since the control carries no visible text of its own. */
     ariaLabel: string;
+    /** Blocks clicks, dims the box to 50% opacity, and cancels its hover preview. */
     disabled?: boolean;
+    /**
+     * Whether the click stops bubbling to an ancestor. Defaults to `true`,
+     * which is what a row that toggles on its own click needs. Set `false`
+     * when the ancestor should also see the click -- e.g. a row that both
+     * selects and opens a detail panel.
+     */
+    stopPropagation?: boolean;
     /** Forwarded as `data-testid`, for Playwright/test selectors. */
     testId?: string;
     /**
@@ -184,8 +200,46 @@ interface CheckBoxProps {
      * be on any other disabled control.
      */
     title?: string;
+    /** Extra classes merged onto the box -- e.g. a cursor or margin override. */
+    className?: string;
 }
-declare function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testId, title }: CheckBoxProps): react.JSX.Element;
+declare function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, stopPropagation, testId, title, className, }: CheckBoxProps): react.JSX.Element;
+/**
+ * @pattern CheckBoxBox
+ * @description Presentational checkbox -- draws the same box as `CheckBox`
+ * and nothing else. Use it when an ancestor already carries the interaction
+ * and the checkbox semantics (a clickable option row, a `<label>`), since a
+ * `<button>` inside a `<button>` is invalid markup and a second focus stop on
+ * the same control is worse for keyboard users, not better. The owning
+ * element supplies `role="checkbox"` and `aria-checked`; this is
+ * `aria-hidden` so the state isn't announced twice.
+ * @tokens bg-brand-primaryAction, border-border-interactive, bg-input
+ * @dependencies lucide-react
+ * @behavior Renders through the same `boxClass` as `CheckBox`, so geometry
+ * and fill can't drift. Takes neither the focus ring nor the hover border,
+ * because the row around it owns both. Without this, a row that is itself
+ * the control has no correct option: nesting the interactive `CheckBox`
+ * produces a button inside a button, and dropping to a `<div>` with a click
+ * handler loses keyboard access entirely.
+ * @usage
+ * ```tsx
+ * <button type="button" role="checkbox" aria-checked={on} onClick={toggle}>
+ *   <CheckBoxBox checked={on} />
+ *   <span>Cable TV</span>
+ * </button>
+ * ```
+ */
+interface CheckBoxBoxProps {
+    /** Whether the box is checked. The owning element reports this to AT. */
+    checked: boolean;
+    /** Some-but-not-all state -- shows a dash instead of a check. */
+    indeterminate?: boolean;
+    /** Dims the box to 50% opacity, matching `CheckBox`'s disabled treatment. */
+    disabled?: boolean;
+    /** Extra classes merged onto the box. */
+    className?: string;
+}
+declare function CheckBoxBox({ checked, indeterminate, disabled, className }: CheckBoxBoxProps): react.JSX.Element;
 
 /**
  * @pattern DateRangeFilter
@@ -493,6 +547,8 @@ interface CardProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
     subtitle?: string;
     /** Trailing header content, e.g. a "View all" link. Ignored without `title`. */
     action?: ReactNode;
+    /** Card body. Rendered edge to edge without `title`; inside the standard padding with it. */
+    children?: ReactNode;
 }
 declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLElement>>;
 
@@ -1194,6 +1250,8 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
     asChild?: boolean;
     /** Shows a spinner in place of the leading edge and disables the button. */
     loading?: boolean;
+    /** Button label and/or icon. With `asChild`, the single element that receives the button styling. */
+    children?: ReactNode;
 }
 /**
  * @pattern Button
@@ -1271,8 +1329,16 @@ interface NameListModalProps {
  */
 declare function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit }: NameListModalProps): react.ReactPortal;
 
+/**
+ * Which stroke a chip trigger carries.
+ *   - `box`    : the boxed two-line chip (caption over value), on the default
+ *                border. The common filter-bar chip.
+ *   - `inline` : the same white fill with a darker stroke, for chips sitting
+ *                directly on the warm canvas with no boxed shell around them.
+ */
+type ChipVariant = "box" | "inline";
 /** Shared styling for filter-bar chip triggers, so every dropdown chip matches. */
-declare function chipTriggerClass(): string;
+declare function chipTriggerClass(variant?: ChipVariant): string;
 interface ChipContentProps {
     /** Small uppercase label above the value. */
     caption: string;
@@ -1286,14 +1352,18 @@ interface ChipContentProps {
  * @description Shared foundation for filter-bar chip triggers — pairs
  * `chipTriggerClass` with `ChipContent` for the caption/value/icon layout, so
  * every dropdown chip across the app matches.
- * @tokens rounded-control, bg-input, border-border-strong, text-text-secondary, text-text-tertiary, text-text-primary, hover:bg-subtle, focus-visible:outline-border-focus, hover:text-text-primary
- * @behavior Provides only the shared `focus-visible:outline-2` keyboard-focus
+ * @tokens rounded-control, bg-input, border-border-default, border-border-strong, text-text-secondary, text-text-tertiary, text-text-primary, hover:bg-subtle, focus-visible:outline-border-focus, hover:text-text-primary
+ * @behavior `chipTriggerClass` takes a `ChipVariant`: `box` (default, the
+ * boxed two-line chip on the default border) or `inline` (same fill, darker
+ * stroke, for chips sitting directly on the canvas). It is an argument to
+ * that function, not a prop on `ChipContent`.
+ * Provides only the shared `focus-visible:outline-2` keyboard-focus
  * treatment every dropdown trigger depends on — open/close, Escape, and
  * outside-click dismissal all live in each consumer, not here. A new dropdown
  * built on `chipTriggerClass` has to implement its own dismissal handling.
  * @usage
  * ```tsx
- * <button className={chipTriggerClass()}>
+ * <button className={chipTriggerClass("box")}>
  *   <ChipContent caption="Media Type" value="All" />
  * </button>
  * ```
@@ -1438,6 +1508,7 @@ interface WorkspaceAvatarProps {
 declare function WorkspaceAvatar({ name, size }: WorkspaceAvatarProps): react.JSX.Element;
 
 interface TagProps {
+    /** The tag's text, e.g. "Digital". Keep it short: the chip doesn't wrap or truncate. */
     children: ReactNode;
     /** Extra classes merged onto the chip. */
     className?: string;
@@ -1529,7 +1600,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 rounded-control, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary, text-text-link, border-border-interactive, bg-brand-primaryAction, bg-input, hover:bg-subtle, hover:text-text-primary, placeholder:text-text-tertiary
+ * @tokens rounded-control, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary, text-text-link, border-border-interactive, bg-brand-primaryAction, bg-input, hover:bg-subtle, hover:text-text-primary, placeholder:text-text-tertiary, text-brand-onprimary
  * @dependencies lucide-react
  * @behavior Same draft/commit-on-close pattern as AdvertiserQuickFilter — the
  * draft resyncs from `selected` every time the tray opens, and (without
@@ -1599,13 +1670,17 @@ declare const SIZES: {
     };
 };
 interface ToggleProps {
+    /** Whether the switch is on. Controlled: the parent owns this value. */
     checked: boolean;
     /** Receives the value being switched TO, not the current one. */
     onChange: (next: boolean) => void;
     /** Accessible name; the visible label lives in the row around it. */
     label: string;
+    /** `md` for settings rows where the switch is the subject; `sm` for dense rows next to 13px text. */
     size?: keyof typeof SIZES;
+    /** Blocks clicks and dims the switch to 50% opacity. */
     disabled?: boolean;
+    /** Extra classes merged onto the track (the outer `<button>`). */
     className?: string;
 }
 /**
@@ -1667,4 +1742,4 @@ interface FreshnessProps {
  */
 declare function Freshness({ level }: FreshnessProps): react.JSX.Element;
 
-export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, BarChartPlaceholder, type BarChartPlaceholderProps, Button, type ButtonProps, Card, type CardProps, CheckBox, type CheckBoxProps, ChipContent, type ChipContentProps, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, Freshness, type FreshnessLevel, type FreshnessProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, MultiSelectFilter, type MultiSelectFilterProps, type MultiSelectGroup, NO_RESULTS_BODY, NO_RESULTS_TITLE, NameListModal, type NameListModalProps, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, Pager, type PagerProps, type PickerColumn, type PickerFilter, type PickerRow, PieChartPlaceholder, type PieChartPlaceholderProps, type PubBreak, PublisherBreakdownList, type PublisherBreakdownListProps, QUIET_ACTION_CLASS, SearchBar, type SearchBarProps, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionRail, type SectionRailProps, SelectAllVisible, type SelectAllVisibleProps, SelectFilter, type SelectFilterProps, SelectedSection, type SelectedSectionProps, SelectionPicker, type SelectionPickerAccountList, type SelectionPickerProps, SortButton, type SortButtonProps, type SortDir, type SortState, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, TablePagination, type TablePaginationProps, Tag, type TagProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };
+export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, BarChartPlaceholder, type BarChartPlaceholderProps, Button, type ButtonProps, Card, type CardProps, CheckBox, CheckBoxBox, type CheckBoxBoxProps, type CheckBoxProps, ChipContent, type ChipContentProps, type ChipVariant, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, Freshness, type FreshnessLevel, type FreshnessProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, MultiSelectFilter, type MultiSelectFilterProps, type MultiSelectGroup, NO_RESULTS_BODY, NO_RESULTS_TITLE, NameListModal, type NameListModalProps, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, Pager, type PagerProps, type PickerColumn, type PickerFilter, type PickerRow, PieChartPlaceholder, type PieChartPlaceholderProps, type PubBreak, PublisherBreakdownList, type PublisherBreakdownListProps, QUIET_ACTION_CLASS, SearchBar, type SearchBarProps, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionRail, type SectionRailProps, SelectAllVisible, type SelectAllVisibleProps, SelectFilter, type SelectFilterProps, SelectedSection, type SelectedSectionProps, SelectionPicker, type SelectionPickerAccountList, type SelectionPickerProps, SortButton, type SortButtonProps, type SortDir, type SortState, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, TablePagination, type TablePaginationProps, Tag, type TagProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };

package/dist/index.d.ts

@@ -145,7 +145,8 @@ declare function AdvertiserSearchPrompt({ label }: AdvertiserSearchPromptProps):
  * `<input type="checkbox">`), so it can carry an indeterminate "some but not
  * all" state without the native element's limited styling hooks. Designed to
  * be dropped into a row that already has its own click-to-toggle handler
- * (a common list/table pattern) without double-firing.
+ * (a common list/table pattern) without double-firing. Where the row itself
+ * is the control, use `CheckBoxBox` instead.
  * @tokens bg-brand-primaryAction, border-border-interactive, bg-input,
  * hover:border-brand-primaryAction, focus-visible:outline-border-focus
  * @dependencies lucide-react
@@ -155,8 +156,9 @@ declare function AdvertiserSearchPrompt({ label }: AdvertiserSearchPromptProps):
  * unchecked state previews the brand action color on hover, matching the
  * color the box fills with once checked -- the hover state is a preview of
  * the click's effect, not an unrelated highlight. `onClick` calls
- * `stopPropagation` before firing `onChange`, so nesting this inside a row
- * that toggles on its own click can't fire the toggle twice.
+ * `stopPropagation` before firing `onChange` by default, so nesting this
+ * inside a row that toggles on its own click can't fire the toggle twice;
+ * pass `stopPropagation={false}` where the row should also see the click.
  * @usage
  * ```tsx
  * <CheckBox checked={selected} ariaLabel="Select row" onChange={toggle} />
@@ -165,6 +167,7 @@ declare function AdvertiserSearchPrompt({ label }: AdvertiserSearchPromptProps):
  * ```
  */
 interface CheckBoxProps {
+    /** Whether the box is checked. Controlled: the parent owns this value. */
     checked: boolean;
     /**
      * Some-but-not-all state for a "select all" checkbox -- shows a dash
@@ -172,10 +175,23 @@ interface CheckBoxProps {
      * plain boolean.
      */
     indeterminate?: boolean;
+    /**
+     * Called on click with no argument -- flip `checked` yourself. By default
+     * the click doesn't bubble, so a row that toggles on its own click won't
+     * fire twice.
+     */
     onChange: () => void;
     /** Accessible label -- required since the control carries no visible text of its own. */
     ariaLabel: string;
+    /** Blocks clicks, dims the box to 50% opacity, and cancels its hover preview. */
     disabled?: boolean;
+    /**
+     * Whether the click stops bubbling to an ancestor. Defaults to `true`,
+     * which is what a row that toggles on its own click needs. Set `false`
+     * when the ancestor should also see the click -- e.g. a row that both
+     * selects and opens a detail panel.
+     */
+    stopPropagation?: boolean;
     /** Forwarded as `data-testid`, for Playwright/test selectors. */
     testId?: string;
     /**
@@ -184,8 +200,46 @@ interface CheckBoxProps {
      * be on any other disabled control.
      */
     title?: string;
+    /** Extra classes merged onto the box -- e.g. a cursor or margin override. */
+    className?: string;
 }
-declare function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testId, title }: CheckBoxProps): react.JSX.Element;
+declare function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, stopPropagation, testId, title, className, }: CheckBoxProps): react.JSX.Element;
+/**
+ * @pattern CheckBoxBox
+ * @description Presentational checkbox -- draws the same box as `CheckBox`
+ * and nothing else. Use it when an ancestor already carries the interaction
+ * and the checkbox semantics (a clickable option row, a `<label>`), since a
+ * `<button>` inside a `<button>` is invalid markup and a second focus stop on
+ * the same control is worse for keyboard users, not better. The owning
+ * element supplies `role="checkbox"` and `aria-checked`; this is
+ * `aria-hidden` so the state isn't announced twice.
+ * @tokens bg-brand-primaryAction, border-border-interactive, bg-input
+ * @dependencies lucide-react
+ * @behavior Renders through the same `boxClass` as `CheckBox`, so geometry
+ * and fill can't drift. Takes neither the focus ring nor the hover border,
+ * because the row around it owns both. Without this, a row that is itself
+ * the control has no correct option: nesting the interactive `CheckBox`
+ * produces a button inside a button, and dropping to a `<div>` with a click
+ * handler loses keyboard access entirely.
+ * @usage
+ * ```tsx
+ * <button type="button" role="checkbox" aria-checked={on} onClick={toggle}>
+ *   <CheckBoxBox checked={on} />
+ *   <span>Cable TV</span>
+ * </button>
+ * ```
+ */
+interface CheckBoxBoxProps {
+    /** Whether the box is checked. The owning element reports this to AT. */
+    checked: boolean;
+    /** Some-but-not-all state -- shows a dash instead of a check. */
+    indeterminate?: boolean;
+    /** Dims the box to 50% opacity, matching `CheckBox`'s disabled treatment. */
+    disabled?: boolean;
+    /** Extra classes merged onto the box. */
+    className?: string;
+}
+declare function CheckBoxBox({ checked, indeterminate, disabled, className }: CheckBoxBoxProps): react.JSX.Element;
 
 /**
  * @pattern DateRangeFilter
@@ -493,6 +547,8 @@ interface CardProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
     subtitle?: string;
     /** Trailing header content, e.g. a "View all" link. Ignored without `title`. */
     action?: ReactNode;
+    /** Card body. Rendered edge to edge without `title`; inside the standard padding with it. */
+    children?: ReactNode;
 }
 declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLElement>>;
 
@@ -1194,6 +1250,8 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
     asChild?: boolean;
     /** Shows a spinner in place of the leading edge and disables the button. */
     loading?: boolean;
+    /** Button label and/or icon. With `asChild`, the single element that receives the button styling. */
+    children?: ReactNode;
 }
 /**
  * @pattern Button
@@ -1271,8 +1329,16 @@ interface NameListModalProps {
  */
 declare function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit }: NameListModalProps): react.ReactPortal;
 
+/**
+ * Which stroke a chip trigger carries.
+ *   - `box`    : the boxed two-line chip (caption over value), on the default
+ *                border. The common filter-bar chip.
+ *   - `inline` : the same white fill with a darker stroke, for chips sitting
+ *                directly on the warm canvas with no boxed shell around them.
+ */
+type ChipVariant = "box" | "inline";
 /** Shared styling for filter-bar chip triggers, so every dropdown chip matches. */
-declare function chipTriggerClass(): string;
+declare function chipTriggerClass(variant?: ChipVariant): string;
 interface ChipContentProps {
     /** Small uppercase label above the value. */
     caption: string;
@@ -1286,14 +1352,18 @@ interface ChipContentProps {
  * @description Shared foundation for filter-bar chip triggers — pairs
  * `chipTriggerClass` with `ChipContent` for the caption/value/icon layout, so
  * every dropdown chip across the app matches.
- * @tokens rounded-control, bg-input, border-border-strong, text-text-secondary, text-text-tertiary, text-text-primary, hover:bg-subtle, focus-visible:outline-border-focus, hover:text-text-primary
- * @behavior Provides only the shared `focus-visible:outline-2` keyboard-focus
+ * @tokens rounded-control, bg-input, border-border-default, border-border-strong, text-text-secondary, text-text-tertiary, text-text-primary, hover:bg-subtle, focus-visible:outline-border-focus, hover:text-text-primary
+ * @behavior `chipTriggerClass` takes a `ChipVariant`: `box` (default, the
+ * boxed two-line chip on the default border) or `inline` (same fill, darker
+ * stroke, for chips sitting directly on the canvas). It is an argument to
+ * that function, not a prop on `ChipContent`.
+ * Provides only the shared `focus-visible:outline-2` keyboard-focus
  * treatment every dropdown trigger depends on — open/close, Escape, and
  * outside-click dismissal all live in each consumer, not here. A new dropdown
  * built on `chipTriggerClass` has to implement its own dismissal handling.
  * @usage
  * ```tsx
- * <button className={chipTriggerClass()}>
+ * <button className={chipTriggerClass("box")}>
  *   <ChipContent caption="Media Type" value="All" />
  * </button>
  * ```
@@ -1438,6 +1508,7 @@ interface WorkspaceAvatarProps {
 declare function WorkspaceAvatar({ name, size }: WorkspaceAvatarProps): react.JSX.Element;
 
 interface TagProps {
+    /** The tag's text, e.g. "Digital". Keep it short: the chip doesn't wrap or truncate. */
     children: ReactNode;
     /** Extra classes merged onto the chip. */
     className?: string;
@@ -1529,7 +1600,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 rounded-control, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary, text-text-link, border-border-interactive, bg-brand-primaryAction, bg-input, hover:bg-subtle, hover:text-text-primary, placeholder:text-text-tertiary
+ * @tokens rounded-control, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary, text-text-link, border-border-interactive, bg-brand-primaryAction, bg-input, hover:bg-subtle, hover:text-text-primary, placeholder:text-text-tertiary, text-brand-onprimary
  * @dependencies lucide-react
  * @behavior Same draft/commit-on-close pattern as AdvertiserQuickFilter — the
  * draft resyncs from `selected` every time the tray opens, and (without
@@ -1599,13 +1670,17 @@ declare const SIZES: {
     };
 };
 interface ToggleProps {
+    /** Whether the switch is on. Controlled: the parent owns this value. */
     checked: boolean;
     /** Receives the value being switched TO, not the current one. */
     onChange: (next: boolean) => void;
     /** Accessible name; the visible label lives in the row around it. */
     label: string;
+    /** `md` for settings rows where the switch is the subject; `sm` for dense rows next to 13px text. */
     size?: keyof typeof SIZES;
+    /** Blocks clicks and dims the switch to 50% opacity. */
     disabled?: boolean;
+    /** Extra classes merged onto the track (the outer `<button>`). */
     className?: string;
 }
 /**
@@ -1667,4 +1742,4 @@ interface FreshnessProps {
  */
 declare function Freshness({ level }: FreshnessProps): react.JSX.Element;
 
-export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, BarChartPlaceholder, type BarChartPlaceholderProps, Button, type ButtonProps, Card, type CardProps, CheckBox, type CheckBoxProps, ChipContent, type ChipContentProps, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, Freshness, type FreshnessLevel, type FreshnessProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, MultiSelectFilter, type MultiSelectFilterProps, type MultiSelectGroup, NO_RESULTS_BODY, NO_RESULTS_TITLE, NameListModal, type NameListModalProps, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, Pager, type PagerProps, type PickerColumn, type PickerFilter, type PickerRow, PieChartPlaceholder, type PieChartPlaceholderProps, type PubBreak, PublisherBreakdownList, type PublisherBreakdownListProps, QUIET_ACTION_CLASS, SearchBar, type SearchBarProps, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionRail, type SectionRailProps, SelectAllVisible, type SelectAllVisibleProps, SelectFilter, type SelectFilterProps, SelectedSection, type SelectedSectionProps, SelectionPicker, type SelectionPickerAccountList, type SelectionPickerProps, SortButton, type SortButtonProps, type SortDir, type SortState, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, TablePagination, type TablePaginationProps, Tag, type TagProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };
+export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, BarChartPlaceholder, type BarChartPlaceholderProps, Button, type ButtonProps, Card, type CardProps, CheckBox, CheckBoxBox, type CheckBoxBoxProps, type CheckBoxProps, ChipContent, type ChipContentProps, type ChipVariant, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, Freshness, type FreshnessLevel, type FreshnessProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, MultiSelectFilter, type MultiSelectFilterProps, type MultiSelectGroup, NO_RESULTS_BODY, NO_RESULTS_TITLE, NameListModal, type NameListModalProps, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, Pager, type PagerProps, type PickerColumn, type PickerFilter, type PickerRow, PieChartPlaceholder, type PieChartPlaceholderProps, type PubBreak, PublisherBreakdownList, type PublisherBreakdownListProps, QUIET_ACTION_CLASS, SearchBar, type SearchBarProps, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionRail, type SectionRailProps, SelectAllVisible, type SelectAllVisibleProps, SelectFilter, type SelectFilterProps, SelectedSection, type SelectedSectionProps, SelectionPicker, type SelectionPickerAccountList, type SelectionPickerProps, SortButton, type SortButtonProps, type SortDir, type SortState, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, TablePagination, type TablePaginationProps, Tag, type TagProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };

package/dist/index.js

@@ -390,9 +390,39 @@ function OptionRow({
 
 // src/CheckBox.tsx
 import { Check as Check2, Minus } from "lucide-react";
+
+// src/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/CheckBox.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
-function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testId, title }) {
-  const on = checked || indeterminate;
+function boxClass(on, disabled) {
+  return cn(
+    "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
+    on ? "border-transparent bg-brand-primaryAction text-white" : "border-border-interactive bg-input",
+    disabled && "cursor-not-allowed opacity-50"
+  );
+}
+function Glyph({ checked, indeterminate }) {
+  if (indeterminate) return /* @__PURE__ */ jsx4(Minus, { size: 13, strokeWidth: 3 });
+  return checked ? /* @__PURE__ */ jsx4(Check2, { size: 13, strokeWidth: 3 }) : null;
+}
+function CheckBox({
+  checked,
+  indeterminate,
+  onChange,
+  ariaLabel,
+  disabled,
+  stopPropagation = true,
+  testId,
+  title,
+  className
+}) {
+  const on = checked || !!indeterminate;
   return /* @__PURE__ */ jsx4(
     "button",
     {
@@ -404,25 +434,26 @@ function CheckBox({ checked, indeterminate, onChange, ariaLabel, disabled, testI
       disabled,
       "data-testid": testId,
       onClick: (e) => {
-        e.stopPropagation();
+        if (stopPropagation) e.stopPropagation();
         onChange();
       },
-      className: [
-        "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
+      className: cn(
+        boxClass(on, disabled),
         "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
-        on ? "border-transparent bg-brand-primaryAction text-white" : "border-border-interactive bg-input hover:border-brand-primaryAction",
+        !on && "hover:border-brand-primaryAction",
         // Cancels the unchecked hover-border preview when disabled -- without
         // this, a disabled box still visually previews the "you can click
         // this" affordance on hover even though the click does nothing.
-        // Found empirically reconciling this against insights-studio-
-        // prototype's own (more complete) local CheckBox during its
-        // migration -- that version already had this guard.
-        disabled && "cursor-not-allowed opacity-50 hover:border-border-interactive"
-      ].filter(Boolean).join(" "),
-      children: indeterminate ? /* @__PURE__ */ jsx4(Minus, { size: 13, strokeWidth: 3 }) : checked ? /* @__PURE__ */ jsx4(Check2, { size: 13, strokeWidth: 3 }) : null
+        disabled && "hover:border-border-interactive",
+        className
+      ),
+      children: /* @__PURE__ */ jsx4(Glyph, { checked, indeterminate })
     }
   );
 }
+function CheckBoxBox({ checked, indeterminate, disabled, className }) {
+  return /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", className: cn(boxClass(checked || !!indeterminate, disabled), className), children: /* @__PURE__ */ jsx4(Glyph, { checked, indeterminate }) });
+}
 
 // src/DateRangeFilter.tsx
 import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
@@ -2558,15 +2589,6 @@ import { forwardRef as forwardRef2 } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { Loader2 as Loader22 } from "lucide-react";
-
-// src/cn.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/Button.tsx
 import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control font-medium transition-all duration-(--mr-motion-duration-interactive) ease-interactive disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-hidden focus-visible:ring-0",
@@ -2694,12 +2716,13 @@ function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit })
 
 // src/ChipTrigger.tsx
 import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
-function chipTriggerClass() {
+function chipTriggerClass(variant = "box") {
   return cn(
     "flex h-11 items-center gap-2 rounded-control border bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
-    // Sits on the input fill, with a stroke dark enough to still read as a
-    // control against the warm canvas.
-    "border-border-strong"
+    // Both variants sit on the input fill. `inline` carries the darker stroke
+    // so it still reads as a control against the warm canvas with no boxed
+    // shell behind it.
+    variant === "inline" ? "border-border-strong" : "border-border-default"
   );
 }
 function ChipContent({ caption, value, icon }) {
@@ -3525,6 +3548,7 @@ export {
   Button,
   Card,
   CheckBox,
+  CheckBoxBox,
   ChipContent,
   DEFAULT_SEARCH_MATCH,
   DataScopeFilter,