import { ComponentPropsWithoutRef } from 'react'; import { BadgeIndicatorAppearance, BadgeIndicatorEmphasis, BadgeIndicatorKind, BadgeIndicatorRingColor, BadgeIndicatorSize } from '@viasat/beam-shared/components/badgeIndicator'; import { ThemeTypes } from '@viasat/beam-shared/utils/constants'; import { IconComponentType } from '../../../utils/types'; type BadgeIndicatorCountKind = { /** * Specify the display kind: `count`, `icon`, or `marker`. * @default count */ kind?: 'count'; /** * Specify a number for the BadgeIndicator. * * A bare count announces only the number (e.g. "5") to screen readers, with no * context. Set a contextual `aria-label` describing what the count represents * (e.g. "5 unread messages"), and keep it in sync with `count`. */ count: number; /** * Specify the highest number allowed to display. Numbers above this value render as `{maxCount}+`. * Values below 1 and non-finite values (`NaN`, `Infinity`) fall back to the default * @default 99 */ maxCount?: number; /** * When `true`, hides the BadgeIndicator when count is 0 — it collapses to zero width so no * layout space is reserved, but stays mounted so screen readers still announce when the count returns. * Negative counts normalize to 0 and are also hidden * @default false */ hideZero?: boolean; }; type BadgeIndicatorMarkerKind = { kind: 'marker'; emphasis?: Exclude; }; type BadgeIndicatorIconKind = { 'kind': 'icon'; /** Specify an icon for the BadgeIndicator */ 'icon': IconComponentType; /** Accessible label for the badge (required — no visible text exists) */ 'aria-label': string; }; export type BadgeIndicatorProps = Omit, 'children'> & (BadgeIndicatorCountKind | BadgeIndicatorMarkerKind | BadgeIndicatorIconKind) & { /** * Specify the color of the BadgeIndicator. For the `marker` kind, `appearance` also * determines the accessible name when no `aria-label` is set (e.g. `negative` → * "negative status") — override `aria-label` when the color's meaning differs. * @default accent */ appearance?: BadgeIndicatorAppearance; /** * Specify the BadgeIndicator color strength. `subtle` is not available for the * `marker` kind — it falls back to `medium`. * @default strong */ emphasis?: BadgeIndicatorEmphasis; /** * Specify the size of the BadgeIndicator * @default md */ size?: BadgeIndicatorSize; /** * Specify the theme of the BadgeIndicator. By default it inherits the theme from the parent. */ theme?: ThemeTypes; /** * Specify a color to render a decorative ring around the BadgeIndicator. Generally * matched to the surface behind the BadgeIndicator, so pick the matching named * surface (`surface-01`, `expressive`, …). Any CSS color value also works when the * background isn't one of those surfaces. */ ringColor?: BadgeIndicatorRingColor | (string & {}); }; export type BadgeIndicatorAllProps = ComponentPropsWithoutRef<'span'> & Partial & Omit & Omit> & { kind?: BadgeIndicatorKind; } & Pick; export declare const BadgeIndicator: import('react').ForwardRefExoticComponent>; export {};