@mediaradar/design-components 0.11.0 → 0.12.0

package/dist/index.d.cts

@@ -146,6 +146,78 @@ interface AdvertiserSearchPromptProps {
 }
 declare function AdvertiserSearchPrompt({ label }: AdvertiserSearchPromptProps): react.JSX.Element;
 
+/**
+ * Fill and ink. `tone` answers "what kind of thing is this", never "what
+ * colour do I want" -- a caller reaching for `danger` because red looks good
+ * is the start of the drift this component replaces.
+ */
+type BadgeTone = "neutral" | "brand" | "success" | "warning" | "danger" | "ai" | "overlay";
+/**
+ * Shape and case. Orthogonal to tone: any tone can be any kind, which is what
+ * keeps this two small props instead of one list of every combination the
+ * product happens to use today.
+ */
+type BadgeKind = "label" | "count" | "eyebrow";
+interface BadgeProps {
+    /** What kind of thing this marks. Not a colour choice. */
+    tone?: BadgeTone;
+    /** Shape and case. `count` for a number, `eyebrow` for a category label. */
+    kind?: BadgeKind;
+    /** Text, or an icon plus text. Keep it to a few words -- a badge annotates, it does not explain. */
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * @pattern Badge
+ * @description The one small label that annotates something else: a count on
+ * a filter, a status, a category, an AI marker, a flag over artwork. Two
+ * props -- `tone` (what kind of thing) and `kind` (shape and case) -- which
+ * between them cover every badge treatment in the product.
+ * @props
+ * tone?: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'ai' | 'overlay' (default 'neutral')
+ * kind?: 'label' | 'count' | 'eyebrow' (default 'label')
+ * children: ReactNode
+ * @tokens text-micro, rounded-full, bg-subtle, bg-brand-primarySoft,
+ * bg-status-success/15, bg-status-warning/30, bg-status-danger/15, bg-scrim,
+ * text-text-secondary, text-brand-primaryAction, text-text-success,
+ * text-text-warning, text-text-danger, text-ai-ontint, text-brand-onprimary,
+ * border-transparent
+ * @behavior Not interactive and carries no role: a badge is a label on
+ * something else, so it is read as part of that thing rather than announced
+ * separately. Anything clickable is a Button or a filter chip, not a Badge.
+ * Every badge is one size -- the `micro` step (11px) -- because a badge
+ * that competes with the content it annotates has stopped being a badge.
+ * @variant neutral - Default. A category, a count of something unremarkable, a quiet flag.
+ * @variant brand - This item is special in a way the product cares about -- primary, selected, yours.
+ * @variant success - A finished or healthy state. Never just "green because it is good news".
+ * @variant warning - Needs attention but is not broken. Partial data, an approaching limit.
+ * @variant danger - Failed, expired, or over a hard limit. Not merely "important".
+ * @variant ai - Generated or AI-assisted content, so the reader knows where it came from.
+ * @variant overlay - Sits on top of an image or video still, where no theme surface exists behind it.
+ * @use when you need to annotate something else -- a status on a row, a count
+ * on a filter tab, a category on a card, a flag over a thumbnail.
+ * @use when the label is a few words at most and the reader does not need to
+ * act on it.
+ * @avoid when the thing is clickable -- use Button, or a filter chip. A badge
+ * has no role, no focus state and no hit target, so making one clickable
+ * hides the action from keyboard and screen-reader users entirely.
+ * @avoid when the text is a sentence, or needs to wrap. A badge that wraps
+ * has become a callout; use one.
+ * @avoid when you are choosing the tone by colour rather than by meaning. A
+ * red badge that does not mean failure teaches readers to ignore red.
+ * @avoid when several sit in a row and all say something different -- that is
+ * a definition list wearing badges, and reads as noise.
+ * @usage
+ * ```tsx
+ * <Badge>Financial Services</Badge>
+ * <Badge tone="brand" kind="count">{selected.length}</Badge>
+ * <Badge tone="warning">Partial month</Badge>
+ * <Badge kind="eyebrow" tone="neutral">Saved view</Badge>
+ * <Badge tone="brand"><Check size={11} aria-hidden="true" />Primary</Badge>
+ * ```
+ */
+declare function Badge({ tone, kind, children, className }: BadgeProps): react.JSX.Element;
+
 /**
  * @pattern CheckBox
  * @description Tri-state checkbox rendered as a `<button>` (not a native
@@ -1315,7 +1387,7 @@ interface PublisherBreakdownListProps {
 declare function PublisherBreakdownList({ rows, defaultVisibleCount, padded, viewAllHref, renderLogo }: PublisherBreakdownListProps): react.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "primary" | "secondary" | "ghost" | "danger" | null | undefined;
+    variant?: "link" | "danger" | "primary" | "secondary" | "ghost" | null | undefined;
     size?: "icon" | "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -1903,4 +1975,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, CheckBoxBox, type CheckBoxBoxProps, type CheckBoxProps, ChipContent, type ChipContentProps, type ChipVariant, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, type DateGranularity, 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, 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, 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

@@ -146,6 +146,78 @@ interface AdvertiserSearchPromptProps {
 }
 declare function AdvertiserSearchPrompt({ label }: AdvertiserSearchPromptProps): react.JSX.Element;
 
+/**
+ * Fill and ink. `tone` answers "what kind of thing is this", never "what
+ * colour do I want" -- a caller reaching for `danger` because red looks good
+ * is the start of the drift this component replaces.
+ */
+type BadgeTone = "neutral" | "brand" | "success" | "warning" | "danger" | "ai" | "overlay";
+/**
+ * Shape and case. Orthogonal to tone: any tone can be any kind, which is what
+ * keeps this two small props instead of one list of every combination the
+ * product happens to use today.
+ */
+type BadgeKind = "label" | "count" | "eyebrow";
+interface BadgeProps {
+    /** What kind of thing this marks. Not a colour choice. */
+    tone?: BadgeTone;
+    /** Shape and case. `count` for a number, `eyebrow` for a category label. */
+    kind?: BadgeKind;
+    /** Text, or an icon plus text. Keep it to a few words -- a badge annotates, it does not explain. */
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * @pattern Badge
+ * @description The one small label that annotates something else: a count on
+ * a filter, a status, a category, an AI marker, a flag over artwork. Two
+ * props -- `tone` (what kind of thing) and `kind` (shape and case) -- which
+ * between them cover every badge treatment in the product.
+ * @props
+ * tone?: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'ai' | 'overlay' (default 'neutral')
+ * kind?: 'label' | 'count' | 'eyebrow' (default 'label')
+ * children: ReactNode
+ * @tokens text-micro, rounded-full, bg-subtle, bg-brand-primarySoft,
+ * bg-status-success/15, bg-status-warning/30, bg-status-danger/15, bg-scrim,
+ * text-text-secondary, text-brand-primaryAction, text-text-success,
+ * text-text-warning, text-text-danger, text-ai-ontint, text-brand-onprimary,
+ * border-transparent
+ * @behavior Not interactive and carries no role: a badge is a label on
+ * something else, so it is read as part of that thing rather than announced
+ * separately. Anything clickable is a Button or a filter chip, not a Badge.
+ * Every badge is one size -- the `micro` step (11px) -- because a badge
+ * that competes with the content it annotates has stopped being a badge.
+ * @variant neutral - Default. A category, a count of something unremarkable, a quiet flag.
+ * @variant brand - This item is special in a way the product cares about -- primary, selected, yours.
+ * @variant success - A finished or healthy state. Never just "green because it is good news".
+ * @variant warning - Needs attention but is not broken. Partial data, an approaching limit.
+ * @variant danger - Failed, expired, or over a hard limit. Not merely "important".
+ * @variant ai - Generated or AI-assisted content, so the reader knows where it came from.
+ * @variant overlay - Sits on top of an image or video still, where no theme surface exists behind it.
+ * @use when you need to annotate something else -- a status on a row, a count
+ * on a filter tab, a category on a card, a flag over a thumbnail.
+ * @use when the label is a few words at most and the reader does not need to
+ * act on it.
+ * @avoid when the thing is clickable -- use Button, or a filter chip. A badge
+ * has no role, no focus state and no hit target, so making one clickable
+ * hides the action from keyboard and screen-reader users entirely.
+ * @avoid when the text is a sentence, or needs to wrap. A badge that wraps
+ * has become a callout; use one.
+ * @avoid when you are choosing the tone by colour rather than by meaning. A
+ * red badge that does not mean failure teaches readers to ignore red.
+ * @avoid when several sit in a row and all say something different -- that is
+ * a definition list wearing badges, and reads as noise.
+ * @usage
+ * ```tsx
+ * <Badge>Financial Services</Badge>
+ * <Badge tone="brand" kind="count">{selected.length}</Badge>
+ * <Badge tone="warning">Partial month</Badge>
+ * <Badge kind="eyebrow" tone="neutral">Saved view</Badge>
+ * <Badge tone="brand"><Check size={11} aria-hidden="true" />Primary</Badge>
+ * ```
+ */
+declare function Badge({ tone, kind, children, className }: BadgeProps): react.JSX.Element;
+
 /**
  * @pattern CheckBox
  * @description Tri-state checkbox rendered as a `<button>` (not a native
@@ -1315,7 +1387,7 @@ interface PublisherBreakdownListProps {
 declare function PublisherBreakdownList({ rows, defaultVisibleCount, padded, viewAllHref, renderLogo }: PublisherBreakdownListProps): react.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "primary" | "secondary" | "ghost" | "danger" | null | undefined;
+    variant?: "link" | "danger" | "primary" | "secondary" | "ghost" | null | undefined;
     size?: "icon" | "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -1903,4 +1975,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, CheckBoxBox, type CheckBoxBoxProps, type CheckBoxProps, ChipContent, type ChipContentProps, type ChipVariant, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, type DateGranularity, 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, 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, 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 };