@12-apps/ui 6.19.1 → 6.20.0

package/src/components/data-display/Badge/Badge.metrics.ts

@@ -0,0 +1,116 @@
+import type { BadgePosition, BadgeSize } from './Badge.base';
+import { contrastText, type UiPaletteColor, type UiTheme } from '../../../tokens/theme';
+import type { ColorValue } from '../../../tokens/vocabulary';
+
+/**
+ * THE NUMBERS BOTH `Badge` RENDERERS DRAW WITH.
+ *
+ * `Badge.styles.ts` / `Badge.variants.ts` (web, emotion over MUI's `Badge`) and
+ * `Badge.native.tsx` (React Native) read this one table: the five chips, the
+ * dot inside them, the ten variants' alphas and borders, and the keyframes.
+ * The web turns the px into rem and the padding into a shorthand; native uses
+ * the numbers.
+ */
+export interface BadgeSizeMetrics {
+  minWidth: number;
+  height: number;
+  /** The content's type size, in px. */
+  fontSize: number;
+  /** The chip's side padding, in px. `padding: '0 Npx'` on the web. */
+  paddingHorizontal: number;
+  dotSize: number;
+  /** A leading icon's own type size, in px. */
+  iconSize: number;
+  /** The close glyph's type size, in px. `xl` falls back to `lg`, as the web does. */
+  closeIconSize: number;
+}
+
+export const BADGE_SIZES: Record<BadgeSize, BadgeSizeMetrics> = {
+  xs: { minWidth: 14, height: 14, fontSize: 8, paddingHorizontal: 3, dotSize: 6, iconSize: 10, closeIconSize: 8 },
+  sm: { minWidth: 16, height: 16, fontSize: 10, paddingHorizontal: 4, dotSize: 8, iconSize: 12, closeIconSize: 10 },
+  md: { minWidth: 20, height: 20, fontSize: 12, paddingHorizontal: 6, dotSize: 10, iconSize: 14, closeIconSize: 12 },
+  lg: { minWidth: 24, height: 24, fontSize: 14, paddingHorizontal: 8, dotSize: 12, iconSize: 16, closeIconSize: 14 },
+  xl: { minWidth: 28, height: 28, fontSize: 16, paddingHorizontal: 10, dotSize: 14, iconSize: 18, closeIconSize: 14 },
+};
+
+/** The chip's own type weight, its tracking, and the paper ring around it. */
+export const BADGE_FONT_WEIGHT = 600;
+export const BADGE_DESTRUCTIVE_FONT_WEIGHT = 700;
+export const BADGE_LETTER_SPACING_EM = 0.025;
+export const BADGE_BORDER_WIDTH = 2;
+/** Between the icon, the content and the close button. */
+export const BADGE_CONTENT_GAP = 2;
+
+/* ── The ten variants' washes ─────────────────────────────────────────────── */
+
+export const GLASS_BACKGROUND_ALPHA = 0.1;
+export const GLASS_BORDER_ALPHA = 0.2;
+export const GLASS_BLUR_PX = 10;
+export const GLASS_SATURATE = 2;
+export const GLASS_INSET_HIGHLIGHT_ALPHA = 0.1;
+export const OUTLINE_BORDER_WIDTH = 2;
+export const SECONDARY_BACKGROUND_ALPHA = 0.15;
+export const SECONDARY_BORDER_ALPHA = 0.3;
+
+/* ── Emphasis and animation ───────────────────────────────────────────────── */
+
+/** `glow` without `pulse`: a 15px halo, brighter under the pointer. */
+export const GLOW = { blur: 15, spread: 3, alpha: 0.5, hoverBlur: 20, hoverSpread: 4, hoverAlpha: 0.6, brightness: 1.1 } as const;
+/** `glow` WITH `pulse`: the halo breathes between these two. */
+export const GLOW_PULSE = { fromBlur: 5, fromSpread: 2, fromAlpha: 0.4, toBlur: 20, toSpread: 4, toAlpha: 0.8 } as const;
+/** MUI-free `pulseAnimation`: 1 → 1.2 → 1 while the opacity dips to 0.7. */
+export const PULSE = { durationMs: 2000, scale: 1.2, opacity: 0.7 } as const;
+/** `bounceAnimation`: up 8px at 40%, 4px at 60%, over one second. */
+export const BOUNCE = { durationMs: 1000, lift: 8, secondLift: 4, scale: 1.05, secondScale: 1.02 } as const;
+/** `fadeInScaleAnimation`: in from half size, overshooting to 1.1. */
+export const FADE_IN_SCALE = { durationMs: 400, from: 0.5, overshoot: 1.1 } as const;
+/** The shimmer sweep, and the white it is made of. */
+export const SHIMMER = { durationMs: 3000, alpha: 0.4 } as const;
+/** How long the mount animation is held before the flag clears. */
+export const MOUNT_ANIMATION_MS = 1000;
+/** MUI's `Zoom` on close, and the wait before the caller is told. */
+export const CLOSE_DELAY_MS = 300;
+/** `transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)` on the chip. */
+export const BADGE_TRANSITION_MS = 300;
+export const BADGE_TRANSITION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';
+/** The chip grows a tenth under the pointer. */
+export const HOVER_SCALE = 1.1;
+
+/* ── Placement ────────────────────────────────────────────────────────────── */
+
+export interface BadgeAnchor {
+  vertical: 'top' | 'bottom';
+  horizontal: 'left' | 'right';
+}
+
+const BADGE_ANCHORS: Record<BadgePosition, BadgeAnchor> = {
+  'top-right': { vertical: 'top', horizontal: 'right' },
+  'top-left': { vertical: 'top', horizontal: 'left' },
+  'bottom-right': { vertical: 'bottom', horizontal: 'right' },
+  'bottom-left': { vertical: 'bottom', horizontal: 'left' },
+};
+
+/**
+ * Falls back to `top-right` for anything outside the union, as the web's own
+ * `positionMap[position] || positionMap['top-right']` did. Splitting on `-`
+ * instead would hand MUI a half-undefined `anchorOrigin` for, say, `middle`.
+ */
+export const badgeAnchor = (position: BadgePosition): BadgeAnchor =>
+  BADGE_ANCHORS[position] ?? BADGE_ANCHORS['top-right'];
+
+/**
+ * `neutral` has no palette slot of its own in MUI, so `Badge.styles.ts` draws
+ * it from three greys; `danger` is MUI's `error`, which is what the shared
+ * theme calls `danger`. Same colours here.
+ */
+export function badgePalette(theme: UiTheme, color: ColorValue): UiPaletteColor {
+  if (color === 'neutral') {
+    return {
+      main: theme.palette.grey[600],
+      light: theme.palette.grey[400],
+      dark: theme.palette.grey[800],
+      contrastText: contrastText(theme.palette.grey[600]),
+    };
+  }
+  return theme.palette[color];
+}

package/src/components/data-display/Badge/Badge.native.tsx

@@ -0,0 +1,212 @@
+import * as React from 'react';
+import { Animated, Easing, Platform, StyleSheet, View, type ViewStyle } from 'react-native';
+
+import {
+  badgeContentOf,
+  formatCount,
+  makeBadgeTestId,
+  resolveBadgeProps,
+  type ResolvedBadgeProps,
+} from './Badge.helpers';
+import { badgeAnchorStyle, badgeBoxStyle } from './Badge.look.native';
+import {
+  BOUNCE,
+  CLOSE_DELAY_MS,
+  FADE_IN_SCALE,
+  PULSE,
+} from './Badge.metrics';
+import { BadgeContent } from './BadgeContent.native';
+import type { BadgeProps } from './Badge.types.native';
+import { webAria } from '../../../platform/aria';
+import { resolveTestId } from '../../../platform/test-id';
+import { useLoopedProgress } from '../../../platform/animation';
+import { useUiTheme } from '../../../provider/use-ui-theme.native';
+
+const nativeDriver = Platform.OS !== 'web';
+type AnimatedStyle = Animated.WithAnimatedValue<ViewStyle>;
+
+/** MUI's `pulseAnimation`: 1 → 1.2 → 1 while the opacity dips, every two seconds. */
+function usePulseStyle(enabled: boolean): AnimatedStyle | null {
+  const progress = useLoopedProgress(enabled, {
+    durationMs: PULSE.durationMs,
+    easing: Easing.inOut(Easing.ease),
+  });
+  if (!enabled) return null;
+  return {
+    opacity: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [1, PULSE.opacity, 1] }),
+    transform: [
+      { scale: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [1, PULSE.scale, 1] }) },
+    ],
+  };
+}
+
+/** A 0→1 progress that runs once on mount, for the entrance keyframes. */
+function useEntrance(enabled: boolean, durationMs: number): Animated.Value {
+  const progress = React.useRef(new Animated.Value(enabled ? 0 : 1)).current;
+  React.useEffect(() => {
+    if (!enabled) return undefined;
+    progress.setValue(0);
+    const timing = Animated.timing(progress, {
+      toValue: 1,
+      duration: durationMs,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: nativeDriver,
+    });
+    timing.start();
+    return () => timing.stop();
+  }, [enabled, durationMs, progress]);
+  return progress;
+}
+
+/** `bounceAnimation` when asked for, else `fadeInScaleAnimation`; neither when neither. */
+function useEntranceStyle(animate: boolean, bounce: boolean): AnimatedStyle | null {
+  const progress = useEntrance(animate || bounce, bounce ? BOUNCE.durationMs : FADE_IN_SCALE.durationMs);
+  if (bounce) {
+    return {
+      transform: [
+        {
+          translateY: progress.interpolate({
+            inputRange: [0, 0.2, 0.4, 0.5, 0.6, 0.8, 1],
+            outputRange: [0, 0, -BOUNCE.lift, 0, -BOUNCE.secondLift, 0, 0],
+          }),
+        },
+        {
+          scale: progress.interpolate({
+            inputRange: [0, 0.2, 0.4, 0.5, 0.6, 0.8, 1],
+            outputRange: [1, 1, BOUNCE.scale, 1, BOUNCE.secondScale, 1, 1],
+          }),
+        },
+      ],
+    };
+  }
+  if (!animate) return null;
+  return {
+    opacity: progress.interpolate({ inputRange: [0, 1], outputRange: [0, 1] }),
+    transform: [
+      {
+        scale: progress.interpolate({
+          inputRange: [0, 0.5, 1],
+          outputRange: [FADE_IN_SCALE.from, FADE_IN_SCALE.overshoot, 1],
+        }),
+      },
+    ],
+  };
+}
+
+/** MUI's `Zoom` on close: out over 300ms, then the caller is told. */
+function useCloseZoom(onClose?: () => void): { style: AnimatedStyle; close: () => void } {
+  const progress = React.useRef(new Animated.Value(1)).current;
+  const close = React.useCallback(() => {
+    Animated.timing(progress, {
+      toValue: 0,
+      duration: CLOSE_DELAY_MS,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: nativeDriver,
+    }).start(({ finished }) => {
+      if (finished) onClose?.();
+    });
+  }, [onClose, progress]);
+  return { style: { opacity: progress, transform: [{ scale: progress }] }, close };
+}
+
+interface ChipContent {
+  content: React.ReactNode;
+  /** A count that formatted away leaves nothing worth showing. */
+  hidden: boolean;
+}
+
+/** What the chip shows, and whether there is anything to show at all. */
+function chipContent(resolved: ResolvedBadgeProps<BadgeProps>): ChipContent {
+  const { variant, max, showZero, invisible, icon, closable } = resolved;
+  const raw = badgeContentOf(resolved);
+  const content = variant === 'count' ? formatCount(raw, { max, showZero }) : raw;
+  // The web hides the chip only when the whole run assembles to nothing
+  // (`buildBadgeContent` returns null on an empty `parts`), so a zero count
+  // still draws while an icon or a close button is left to draw with it.
+  const hasOtherParts = Boolean(icon) || Boolean(closable);
+  return {
+    content,
+    hidden:
+      Boolean(invisible) ||
+      (variant === 'count' && content === null && !showZero && !hasOtherParts),
+  };
+}
+
+/**
+ * The native `Badge`: MUI's chip anchored off a corner of whatever it is
+ * attached to, with the same ten variants, five sizes and content run.
+ */
+export const Badge = React.forwardRef<View, BadgeProps>((rawProps, ref) => {
+  const resolved = resolveBadgeProps(rawProps);
+  const {
+    variant,
+    size,
+    color,
+    glow,
+    pulse,
+    animate,
+    bounce,
+    max: _max,
+    showZero: _showZero,
+    position,
+    invisible,
+    closable,
+    onClose,
+    icon,
+    children,
+    style,
+    'aria-label': ariaLabel,
+    'aria-live': ariaLive = 'polite',
+    'aria-atomic': ariaAtomic = true,
+    'data-testid': _domTestId,
+    testID: _testID,
+    dataTestId: _dataTestId,
+    content: _content,
+    badgeContent: _badgeContent,
+    shimmer: _shimmer,
+    ...rest
+  } = resolved;
+  const theme = useUiTheme();
+  const badgeId = resolveTestId(resolved);
+  const idFor = makeBadgeTestId(badgeId);
+  const pulseStyle = usePulseStyle(pulse && !invisible);
+  const entrance = useEntranceStyle(animate && !bounce, bounce);
+  const zoom = useCloseZoom(onClose);
+
+  const { content, hidden } = chipContent(resolved);
+
+  return (
+    <View ref={ref} testID={badgeId || 'badge'} style={[styles.anchor, style]} {...rest}>
+      {children}
+      {hidden ? null : (
+        <View style={badgeAnchorStyle(position)}>
+          <Animated.View
+            testID={idFor('content-wrapper')}
+            aria-label={ariaLabel}
+            aria-live={ariaLive}
+            {...webAria({ 'aria-atomic': ariaAtomic ? 'true' : 'false' })}
+            style={[badgeBoxStyle(theme, { variant, size, color, glow }), entrance, pulseStyle, zoom.style]}
+          >
+            <BadgeContent
+              variant={variant}
+              size={size}
+              color={color}
+              icon={icon}
+              closable={closable}
+              content={content}
+              idFor={idFor}
+              onClose={zoom.close}
+            />
+          </Animated.View>
+        </View>
+      )}
+    </View>
+  );
+});
+
+Badge.displayName = 'Badge';
+
+const styles = StyleSheet.create({
+  /** MUI's badge root: `inline-flex`, with the chip positioned against it. */
+  anchor: { position: 'relative', alignSelf: 'flex-start', flexDirection: 'row' },
+});

package/src/components/data-display/Badge/Badge.styles.ts

@@ -7,8 +7,25 @@ import {
   glowPulseAnimation,
   pulseAnimation,
   shimmerAnimation } from './Badge.animations';
+import {
+  BADGE_BORDER_WIDTH,
+  BADGE_CONTENT_GAP,
+  BADGE_FONT_WEIGHT,
+  BADGE_LETTER_SPACING_EM,
+  BADGE_SIZES,
+  BADGE_TRANSITION_EASING,
+  BADGE_TRANSITION_MS,
+  BOUNCE,
+  FADE_IN_SCALE,
+  GLOW,
+  HOVER_SCALE,
+  PULSE,
+  SHIMMER,
+  badgeAnchor,
+} from './Badge.metrics';
 import { badgeVariantStyles } from './Badge.variants';
 import type { BadgeSize, BadgeVariant } from './Badge.types';
+import { px } from '../../../tokens/theme';
 
 export type BadgePalette = {
   main: string;
@@ -37,67 +54,39 @@ const getColorFromTheme = (theme: Theme, color: string) => {
   return colorMap[color] || theme.palette.primary;
 };
 
-export const getSizeStyles = (size: BadgeSize) => {
-  const sizeMap: Record<
-    BadgeSize,
+// Derived from the shared metrics, not restated: the native `Badge` reads the
+// same table, so the two renderers cannot disagree on a chip.
+const sizeMap: Record<
+  BadgeSize,
+  {
+    minWidth: number;
+    height: number;
+    fontSize: string;
+    padding: string;
+    dotSize: number;
+    iconSize: string;
+  }
+> = Object.fromEntries(
+  Object.entries(BADGE_SIZES).map(([size, metrics]) => [
+    size,
     {
-      minWidth: number;
-      height: number;
-      fontSize: string;
-      padding: string;
-      dotSize: number;
-      iconSize: string;
-    }
-  > = {
-    xs: {
-      minWidth: 14,
-      height: 14,
-      fontSize: '0.5rem',
-      padding: '0 3px',
-      dotSize: 6,
-      iconSize: '0.625rem' },
-    sm: {
-      minWidth: 16,
-      height: 16,
-      fontSize: '0.625rem',
-      padding: '0 4px',
-      dotSize: 8,
-      iconSize: '0.75rem' },
-    md: {
-      minWidth: 20,
-      height: 20,
-      fontSize: '0.75rem',
-      padding: '0 6px',
-      dotSize: 10,
-      iconSize: '0.875rem' },
-    lg: {
-      minWidth: 24,
-      height: 24,
-      fontSize: '0.875rem',
-      padding: '0 8px',
-      dotSize: 12,
-      iconSize: '1rem' },
-    xl: {
-      minWidth: 28,
-      height: 28,
-      fontSize: '1rem',
-      padding: '0 10px',
-      dotSize: 14,
-      iconSize: '1.125rem' } };
-
-  return sizeMap[size] || sizeMap.md;
-};
+      minWidth: metrics.minWidth,
+      height: metrics.height,
+      fontSize: px(metrics.fontSize),
+      padding: `0 ${metrics.paddingHorizontal}px`,
+      dotSize: metrics.dotSize,
+      iconSize: px(metrics.iconSize),
+    },
+  ]),
+) as Record<
+  BadgeSize,
+  { minWidth: number; height: number; fontSize: string; padding: string; dotSize: number; iconSize: string }
+>;
 
-export const getAnchorOrigin = (position: string) => {
-  const positionMap: Record<string, { vertical: 'top' | 'bottom'; horizontal: 'left' | 'right' }> =
-    {
-      'top-right': { vertical: 'top', horizontal: 'right' },
-      'top-left': { vertical: 'top', horizontal: 'left' },
-      'bottom-right': { vertical: 'bottom', horizontal: 'right' },
-      'bottom-left': { vertical: 'bottom', horizontal: 'left' } };
+export const getSizeStyles = (size: BadgeSize) => sizeMap[size] || sizeMap.md;
 
-  return positionMap[position] || positionMap['top-right'];
-};
+export const getAnchorOrigin = (position: string) =>
+  badgeAnchor((position || 'top-right') as Parameters<typeof badgeAnchor>[0]);
 
 // Exactly one variant applies, so a lookup replaces ten mutually exclusive
 // spreads inside the style object.
@@ -127,21 +116,21 @@ const badgeLightingStyles = ({
       // Glow effect
       ...(glow &&
         !pulse && {
-          boxShadow: `0 0 15px 3px ${alpha(colorPalette.main, 0.5)}`,
-          filter: 'brightness(1.1)',
+          boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)}`,
+          filter: `brightness(${GLOW.brightness})`,
           '&:hover': {
-            boxShadow: `0 0 20px 4px ${alpha(colorPalette.main, 0.6)}` } }),
+            boxShadow: `0 0 ${GLOW.hoverBlur}px ${GLOW.hoverSpread}px ${alpha(colorPalette.main, GLOW.hoverAlpha)}` } }),
 
       // Pulse animation
       ...(pulse &&
         !glow && {
-          animation: `${pulseAnimation} 2s ease-in-out infinite` }),
+          animation: `${pulseAnimation} ${PULSE.durationMs / 1000}s ease-in-out infinite` }),
 
       // Both glow and pulse
       ...(glow &&
         pulse && {
-          animation: `${glowPulseAnimation} 2s ease-in-out infinite, ${pulseAnimation} 2s ease-in-out infinite`,
-          filter: 'brightness(1.1)',
+          animation: `${glowPulseAnimation} ${PULSE.durationMs / 1000}s ease-in-out infinite, ${pulseAnimation} ${PULSE.durationMs / 1000}s ease-in-out infinite`,
+          filter: `brightness(${GLOW.brightness})`,
         }),
 
 });
@@ -166,11 +155,11 @@ const badgeAnimationStyles = ({
 }): CSSObject => ({
       ...(animate &&
         !bounce && {
-          animation: `${fadeInScaleAnimation} 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)` }),
+          animation: `${fadeInScaleAnimation} ${FADE_IN_SCALE.durationMs / 1000}s cubic-bezier(0.68, -0.55, 0.265, 1.55)` }),
 
       // Bounce animation
       ...(bounce && {
-        animation: `${bounceAnimation} 1s ease-in-out` }),
+        animation: `${bounceAnimation} ${BOUNCE.durationMs / 1000}s ease-in-out` }),
 
       // Shimmer effect
       ...(shimmer && {
@@ -191,10 +180,10 @@ const badgeAnimationStyles = ({
           background: `linear-gradient(
             90deg,
             transparent,
-            ${alpha(theme.palette.common.white, 0.4)},
+            ${alpha(theme.palette.common.white, SHIMMER.alpha)},
             transparent
           )`,
-          animation: `${shimmerAnimation} 3s infinite` } }) });
+          animation: `${shimmerAnimation} ${SHIMMER.durationMs / 1000}s infinite` } }) });
 
 // The badge chip's own styling, lifted out so the styled() callback just
 // forwards its props.
@@ -228,10 +217,10 @@ export const badgeStyles = ({
   return {
     '--glow-color': rgbValuesOf(colorPalette.main),
     '& .MuiBadge-badge': {
-      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-      fontWeight: 600,
-      border: `2px solid ${theme.palette.background.paper}`,
-      letterSpacing: '0.025em',
+      transition: `all ${BADGE_TRANSITION_MS / 1000}s ${BADGE_TRANSITION_EASING}`,
+      fontWeight: BADGE_FONT_WEIGHT,
+      border: `${BADGE_BORDER_WIDTH}px solid ${theme.palette.background.paper}`,
+      letterSpacing: `${BADGE_LETTER_SPACING_EM}em`,
       textTransform:
         customVariant === 'gradient' || customVariant === 'glass' ? 'uppercase' : 'none',
       willChange: 'transform, opacity',
@@ -249,7 +238,7 @@ export const badgeStyles = ({
         paddingLeft: sizeStyles.padding.split(' ')[1],
         display: 'inline-flex',
         alignItems: 'center',
-        gap: '2px',
+        gap: `${BADGE_CONTENT_GAP}px`,
       }),
 
       // Animation on mount
@@ -265,6 +254,6 @@ export const badgeStyles = ({
       ...badgeLightingStyles({ glow, pulse, colorPalette }),
 
       '&:not(.MuiBadge-dot):hover': {
-        transform: 'scale(1.1)',
+        transform: `scale(${HOVER_SCALE})`,
         zIndex: 1 } } };
 }

package/src/components/data-display/Badge/Badge.tsx

@@ -13,7 +13,9 @@ import {
   resolveBadgeProps } from './Badge.helpers';
 import type { ResolvedBadgeProps } from './Badge.helpers';
 import { buildBadgeContent } from './BadgeContent';
+import { CLOSE_DELAY_MS, MOUNT_ANIMATION_MS } from './Badge.metrics';
 import type { BadgeProps, BadgeSize, BadgeVariant } from './Badge.types';
+import { resolveTestId } from '../../../platform/test-id';
 export type { BadgeProps } from './Badge.types';
 
 // Define pulse animation
@@ -63,8 +65,6 @@ const StyledBadge = styled(MuiBadge, {
     hasIcon });
 });
 
-const CLOSE_DELAY_MS = 300;
-const ANIMATION_MS = 1000;
 
 // A one-shot flag so bounce/animate run on mount and then stop.
 const useMountAnimation = (enabled: boolean) => {
@@ -74,7 +74,7 @@ const useMountAnimation = (enabled: boolean) => {
     if (!enabled) return;
 
     setIsAnimating(true);
-    const timer = window.setTimeout(() => setIsAnimating(false), ANIMATION_MS);
+    const timer = window.setTimeout(() => setIsAnimating(false), MOUNT_ANIMATION_MS);
     return () => window.clearTimeout(timer);
   }, [enabled]);
 
@@ -84,7 +84,7 @@ const useMountAnimation = (enabled: boolean) => {
 // The chip itself. Local because StyledBadge cannot cross a module boundary
 // (TS2742).
 const BadgeSurface: React.FC<
-  ResolvedBadgeProps & {
+  ResolvedBadgeProps<BadgeProps> & {
     innerRef: React.Ref<HTMLSpanElement>;
     isVisible: boolean;
     isAnimating: boolean;
@@ -150,7 +150,11 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>((componentPro
     'aria-label': ariaLabel,
     'aria-live': ariaLive = 'polite',
     'aria-atomic': ariaAtomic = true,
-    'data-testid': dataTestId,
+    'data-testid': _domTestId,
+    // The house and React Native spellings of the same id; they name the
+    // component on both sides and must not reach the DOM as attributes.
+    testID: _testID,
+    dataTestId: _dataTestId,
     className: _className,
     content: _content,
     badgeContent: _badgeContent,
@@ -167,13 +171,14 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>((componentPro
     window.setTimeout(() => onClose?.(), CLOSE_DELAY_MS);
   };
 
+  const badgeId = resolveTestId(resolved);
   const rawContent = badgeContentOf(resolved);
   const finalBadgeContent = buildBadgeContent({
     variant,
     size,
     icon,
     closable,
-    dataTestId,
+    dataTestId: badgeId,
     baseContent: variant === 'count' ? formatCount(rawContent, { max, showZero }) : rawContent,
     onClose: handleClose });
 
@@ -184,6 +189,7 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>((componentPro
   return (
     <BadgeSurface
       {...resolved}
+      data-testid={badgeId}
       innerRef={ref}
       isVisible={isVisible}
       isAnimating={isAnimating}

package/src/components/data-display/Badge/Badge.types.native.ts

@@ -0,0 +1,16 @@
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+
+import type { BadgeBaseProps } from './Badge.base';
+
+export type {
+  BadgeBaseProps,
+  BadgePosition,
+  BadgeSize,
+  BadgeVariant,
+} from './Badge.base';
+
+/** The native `Badge`: the shared contract, plus a `View`'s own props. */
+export type BadgeProps = BadgeBaseProps &
+  Omit<ViewProps, keyof BadgeBaseProps | 'style'> & {
+    style?: StyleProp<ViewStyle>;
+  };