@12-apps/ui 6.19.1 → 6.21.0

package/src/components/data-display/Avatar/Avatar.view.tsx

@@ -6,9 +6,29 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { pulseAnimation, rotateAnimation, scaleInAnimation, shimmerAnimation } from './Avatar.animations';
-import type { AvatarSize, AvatarStatus } from './Avatar.types';
+import {
+  AVATAR_SIZES,
+  AVATAR_TRANSITION_EASING,
+  AVATAR_TRANSITION_MS,
+  ACTIVE_SCALE,
+  BORDER_HALO_ALPHA,
+  BORDER_WIDTH,
+  FADE_MS,
+  FOCUS_RING,
+  GLOW,
+  HOVER,
+  LOADING_OVERLAY,
+  PULSE,
+  ROUNDED_RADIUS_UNITS,
+  SCALE_IN_MS,
+  SHIMMER,
+  SPINNER,
+  STATUS_DOT,
+} from './Avatar.metrics';
+import type { AvatarSize, AvatarStatus, ContentType } from './Avatar.types';
+import { px } from '../../../tokens/theme';
 
-export type ContentType = 'children' | 'fallback' | 'icon' | 'default';
+export type { ContentType };
 
 
 interface PaletteLike {
@@ -41,20 +61,20 @@ interface SizeStyle {
   fontSize: string;
 }
 
-const getSizeStyles = (size: AvatarSize): SizeStyle => {
-  const sizeMap: Record<AvatarSize, SizeStyle> = {
-    xs: { width: 24, height: 24, fontSize: '0.75rem' },
-    sm: { width: 32, height: 32, fontSize: '0.875rem' },
-    md: { width: 40, height: 40, fontSize: '1rem' },
-    lg: { width: 48, height: 48, fontSize: '1.125rem' },
-    xl: { width: 64, height: 64, fontSize: '1.5rem' },
-    xxl: { width: 80, height: 80, fontSize: '2rem' },
-  };
+// Derived from the shared metrics, not restated: the native `Avatar` reads the
+// same table, so the two renderers cannot disagree on a box.
+const sizeMap: Record<AvatarSize, SizeStyle> = Object.fromEntries(
+  Object.entries(AVATAR_SIZES).map(([size, step]) => [
+    size,
+    { width: step.box, height: step.box, fontSize: px(step.fontSize) },
+  ]),
+) as Record<AvatarSize, SizeStyle>;
 
-  return sizeMap[size] || sizeMap.md;
-};
+const getSizeStyles = (size: AvatarSize): SizeStyle => sizeMap[size] || sizeMap.md;
 
 const getStatusColor = (status: AvatarStatus, theme: Theme): string => {
+  // The same four decisions the native half reads out of `Avatar.metrics`,
+  // against MUI's `Theme` rather than the shared one.
   const statusColorMap: Record<AvatarStatus, string> = {
     online: theme.palette.success.main,
     offline: theme.palette.grey[500],
@@ -70,12 +90,12 @@ const interactiveStyles = (interactive: boolean | undefined, main: string): CSSO
   interactive
     ? {
         '&:hover': {
-          transform: 'scale(1.1) translateY(-2px)',
-          boxShadow: `0 8px 20px ${alpha(main, 0.3)}`,
-          filter: 'brightness(1.1)',
+          transform: `scale(${HOVER.scale}) translateY(-${HOVER.lift}px)`,
+          boxShadow: `0 ${HOVER.shadowY}px ${HOVER.shadowBlur}px ${alpha(main, HOVER.shadowAlpha)}`,
+          filter: `brightness(${HOVER.brightness})`,
           zIndex: 10,
         },
-        '&:active': { transform: 'scale(1.05)' },
+        '&:active': { transform: `scale(${ACTIVE_SCALE})` },
       }
     : {};
 
@@ -85,19 +105,19 @@ const loadingStyles = (isLoading: boolean | undefined, main: string): CSSObject
     ? {
         background: `linear-gradient(
         90deg,
-        ${alpha(main, 0.6)},
-        ${alpha(main, 0.8)},
-        ${alpha(main, 0.6)}
+        ${alpha(main, SHIMMER.fromAlpha)},
+        ${alpha(main, SHIMMER.toAlpha)},
+        ${alpha(main, SHIMMER.fromAlpha)}
       )`,
         backgroundSize: '200% 100%',
-        animation: `${shimmerAnimation} 1.5s ease-in-out infinite`,
+        animation: `${shimmerAnimation} ${SHIMMER.durationMs / 1000}s ease-in-out infinite`,
       }
     : {};
 
 /** Corner radius per shape variant (circle/status are round). */
 const variantRadius = (variant: string | undefined, theme: Theme): CSSObject => {
   if (variant === 'square') return { borderRadius: 0 };
-  if (variant === 'rounded') return { borderRadius: theme.spacing(1) };
+  if (variant === 'rounded') return { borderRadius: theme.spacing(ROUNDED_RADIUS_UNITS) };
   return { borderRadius: '50%' };
 };
 
@@ -105,8 +125,8 @@ const variantRadius = (variant: string | undefined, theme: Theme): CSSObject =>
 const borderedStyles = (bordered: boolean | undefined, theme: Theme): CSSObject =>
   bordered
     ? {
-        border: `2px solid ${theme.palette.background.paper}`,
-        boxShadow: `0 0 0 1px ${alpha(theme.palette.divider, 0.2)}`,
+        border: `${BORDER_WIDTH}px solid ${theme.palette.background.paper}`,
+        boxShadow: `0 0 0 1px ${alpha(theme.palette.divider, BORDER_HALO_ALPHA)}`,
       }
     : {};
 
@@ -118,8 +138,8 @@ const glowPulseStyles = (
 ): CSSObject => {
   const styles: CSSObject = {};
   if (glow) {
-    styles.boxShadow = `0 0 20px 5px ${alpha(main, 0.4)} !important`;
-    styles.filter = 'brightness(1.05)';
+    styles.boxShadow = `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(main, GLOW.alpha)} !important`;
+    styles.filter = `brightness(${GLOW.brightness})`;
   }
   if (pulse) {
     styles.position = 'relative';
@@ -133,8 +153,8 @@ const glowPulseStyles = (
       borderRadius: 'inherit',
       transform: 'translate(-50%, -50%)',
       backgroundColor: main,
-      opacity: 0.3,
-      animation: `${pulseAnimation} 2s infinite`,
+      opacity: PULSE.alpha,
+      animation: `${pulseAnimation} ${PULSE.durationMs / 1000}s infinite`,
       pointerEvents: 'none',
       zIndex: -1,
     };
@@ -184,10 +204,10 @@ const StyledAvatar = styled(MuiAvatar, {
     const palette = getColorFromTheme(theme, customColor);
     return {
       ...getSizeStyles(customSize),
-      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+      transition: `all ${AVATAR_TRANSITION_MS / 1000}s ${AVATAR_TRANSITION_EASING}`,
       position: 'relative',
       overflow: 'visible',
-      animation: `${scaleInAnimation} 0.3s ease-out`,
+      animation: `${scaleInAnimation} ${SCALE_IN_MS / 1000}s ease-out`,
       cursor: interactive ? 'pointer' : 'default',
       backgroundColor: hasError ? theme.palette.error.main : palette.main,
       color: hasError ? theme.palette.error.contrastText : (palette.contrastText ?? '#fff'),
@@ -197,8 +217,8 @@ const StyledAvatar = styled(MuiAvatar, {
       ...borderedStyles(bordered, theme),
       ...glowPulseStyles(glow, pulse, palette.main),
       '&:focus-visible': {
-        outline: `3px solid ${alpha(palette.main, 0.5)}`,
-        outlineOffset: 2,
+        outline: `${FOCUS_RING.width}px solid ${alpha(palette.main, FOCUS_RING.alpha)}`,
+        outlineOffset: FOCUS_RING.offset,
       },
     };
   },
@@ -216,15 +236,15 @@ const LoadingOverlay = styled('div')<{ size: AvatarSize }>(({ theme, size }) =>
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: alpha(theme.palette.background.paper, 0.7),
-    backdropFilter: 'blur(2px)',
+    backgroundColor: alpha(theme.palette.background.paper, LOADING_OVERLAY.paperAlpha),
+    backdropFilter: `blur(${LOADING_OVERLAY.blur}px)`,
     '& .loading-spinner': {
-      width: sizeStyles.width * 0.4,
-      height: sizeStyles.height * 0.4,
-      border: `2px solid ${alpha(theme.palette.primary.main, 0.3)}`,
+      width: sizeStyles.width * SPINNER.scale,
+      height: sizeStyles.height * SPINNER.scale,
+      border: `${SPINNER.ringWidth}px solid ${alpha(theme.palette.primary.main, SPINNER.trackAlpha)}`,
       borderTopColor: theme.palette.primary.main,
       borderRadius: '50%',
-      animation: `${rotateAnimation} 0.8s linear infinite`,
+      animation: `${rotateAnimation} ${SPINNER.durationMs / 1000}s linear infinite`,
     },
   };
 });
@@ -236,7 +256,7 @@ const StatusBadge = styled(Badge, {
   avatarSize?: AvatarSize;
 }>(({ theme, statusColor, avatarSize = 'md' }) => {
   const sizeStyles = getSizeStyles(avatarSize);
-  const badgeSize = Math.max(8, sizeStyles.width * 0.2);
+  const badgeSize = Math.max(STATUS_DOT.min, sizeStyles.width * STATUS_DOT.scale);
 
   return {
     '& .MuiBadge-badge': {
@@ -245,7 +265,7 @@ const StatusBadge = styled(Badge, {
       width: badgeSize,
       height: badgeSize,
       borderRadius: '50%',
-      border: `2px solid ${theme.palette.background.paper}`,
+      border: `${STATUS_DOT.borderWidth}px solid ${theme.palette.background.paper}`,
       '&::after': {
         position: 'absolute',
         top: 0,
@@ -293,7 +313,7 @@ function AvatarSurface(props: AvatarViewProps): React.JSX.Element {
     dataTestId ? `${dataTestId}-${suffix}` : undefined;
 
   return (
-    <Fade in={props.mounted} timeout={300}>
+    <Fade in={props.mounted} timeout={FADE_MS}>
       <div style={{ position: 'relative', display: 'inline-block' }}>
         <StyledAvatar
           ref={props.forwardedRef}

package/src/components/data-display/Avatar/NATIVE-NOTES.md

@@ -0,0 +1,11 @@
+# Avatar on React Native
+
+Known rendering gaps, one bullet each; `pnpm native:ledger` reads them.
+
+- Hover has no touch equivalent: the interactive lift (`scale(1.1) translateY(-2px)`, the `0 8px 20px` shadow and the brightness), the `:active` squeeze and the `:focus-visible` ring are all web-only. The avatar still reports itself as a button and takes a tab stop.
+- The shimmer that runs across a loading avatar is a moving gradient; React Native core has neither, so the box keeps its accent and only the overlay and its spinner say it is loading. `backdrop-filter: blur(2px)` behind that overlay has no equivalent either — the wash is the flat `alpha(paper, 0.7)`.
+- `glow` paints the halo but not the `brightness(1.05)` filter that goes with it; React Native has no filters.
+- `pulse` is a ring behind the avatar scaling out to 10px and fading, rather than MUI's growing `box-shadow` on an `::after` — the same colour, cadence and travel, drawn by a sibling.
+- The status dot is a bordered circle placed at MUI's `overlap="circular"` inset; MUI's `Badge` additionally draws a `::after` ripple layer over it.
+- `AvatarGroup` overlaps and counts exactly as the web does, but the web ALSO gives every child a paper ring through a `& > *` descendant rule. A native renderer cannot restyle children, so an avatar in a group takes `bordered` from its own prop.
+- The default and broken-image glyphs are the house `Icon` at 24px, which is what MUI's `SvgIcon` draws them at here; the initials are set in the theme's own font rather than MUI's `Avatar` typography.

package/src/components/data-display/Avatar/index.native.ts

@@ -0,0 +1,10 @@
+export { Avatar, AvatarGroup } from './Avatar.native';
+export type {
+  AvatarBaseProps,
+  AvatarGroupProps,
+  AvatarProps,
+  AvatarSize,
+  AvatarStatus,
+  AvatarVariant,
+  ContentType,
+} from './Avatar.types.native';

package/src/components/data-display/Avatar/index.ts

@@ -1,2 +1,9 @@
 export { Avatar, AvatarGroup } from './Avatar';
-export type { AvatarProps, AvatarSize, AvatarStatus, AvatarVariant } from './Avatar.types';
+export type {
+  AvatarBaseProps,
+  AvatarProps,
+  AvatarSize,
+  AvatarStatus,
+  AvatarVariant,
+  ContentType,
+} from './Avatar.types';

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

@@ -1,13 +1,15 @@
 import { keyframes } from '@mui/material/styles/index.js';
 
+import { BOUNCE, FADE_IN_SCALE, GLOW_PULSE, PULSE } from './Badge.metrics';
+
 export const pulseAnimation = keyframes`
   0% {
     transform: scale(1);
     opacity: 1;
   }
   70% {
-    transform: scale(1.2);
-    opacity: 0.7;
+    transform: scale(${PULSE.scale});
+    opacity: ${PULSE.opacity};
   }
   100% {
     transform: scale(1);
@@ -21,10 +23,10 @@ export const bounceAnimation = keyframes`
     transform: translateY(0) scale(1);
   }
   40% {
-    transform: translateY(-8px) scale(1.05);
+    transform: translateY(-${BOUNCE.lift}px) scale(${BOUNCE.scale});
   }
   60% {
-    transform: translateY(-4px) scale(1.02);
+    transform: translateY(-${BOUNCE.secondLift}px) scale(${BOUNCE.secondScale});
   }
 `;
 
@@ -42,10 +44,10 @@ export const shimmerAnimation = keyframes`
 export const fadeInScaleAnimation = keyframes`
   0% {
     opacity: 0;
-    transform: scale(0.5);
+    transform: scale(${FADE_IN_SCALE.from});
   }
   50% {
-    transform: scale(1.1);
+    transform: scale(${FADE_IN_SCALE.overshoot});
   }
   100% {
     opacity: 1;
@@ -56,12 +58,12 @@ export const fadeInScaleAnimation = keyframes`
 // Define glow pulse animation
 export const glowPulseAnimation = keyframes`
   0% {
-    box-shadow: 0 0 5px 2px rgba(var(--glow-color), 0.4);
+    box-shadow: 0 0 ${GLOW_PULSE.fromBlur}px ${GLOW_PULSE.fromSpread}px rgba(var(--glow-color), ${GLOW_PULSE.fromAlpha});
   }
   50% {
-    box-shadow: 0 0 20px 4px rgba(var(--glow-color), 0.8);
+    box-shadow: 0 0 ${GLOW_PULSE.toBlur}px ${GLOW_PULSE.toSpread}px rgba(var(--glow-color), ${GLOW_PULSE.toAlpha});
   }
   100% {
-    box-shadow: 0 0 5px 2px rgba(var(--glow-color), 0.4);
+    box-shadow: 0 0 ${GLOW_PULSE.fromBlur}px ${GLOW_PULSE.fromSpread}px rgba(var(--glow-color), ${GLOW_PULSE.fromAlpha});
   }
 `;

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

@@ -0,0 +1,138 @@
+import type React from 'react';
+
+import type { ColorValue, SizeValue } from '../../../tokens/vocabulary';
+
+/**
+ * THE CONTRACT BOTH RENDERERS HONOUR — and nothing else.
+ *
+ * This file imports no MUI and no react-native, on purpose: it is in BOTH
+ * declaration outputs (`dist/types` and `dist/types-native`), and a native
+ * consumer has no `@mui/material` to resolve a type import against.
+ */
+export type BadgeVariant =
+  | 'default'
+  | 'dot'
+  | 'count'
+  | 'gradient'
+  | 'glass'
+  | 'outline'
+  | 'secondary'
+  | 'destructive'
+  | 'success'
+  | 'warning';
+
+export type BadgeSize = SizeValue;
+
+export type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+
+export interface BadgeBaseProps {
+  /**
+   * The variant of the badge
+   */
+  variant?: BadgeVariant;
+
+  /**
+   * The size of the badge
+   */
+  size?: BadgeSize;
+
+  /**
+   * The color of the badge
+   */
+  color?: ColorValue;
+
+  /**
+   * Whether the badge should have a glow effect
+   */
+  glow?: boolean;
+
+  /**
+   * Whether the badge should have a pulse animation
+   */
+  pulse?: boolean;
+
+  /**
+   * Whether to animate the badge on mount
+   */
+  animate?: boolean;
+
+  /**
+   * Maximum count to display (shows "max+" when exceeded)
+   */
+  max?: number;
+
+  /**
+   * Whether to show zero count
+   */
+  showZero?: boolean;
+
+  /**
+   * Custom content for the badge
+   */
+  content?: React.ReactNode;
+
+  /** MUI's own name for {@link BadgeBaseProps.content}; `content` wins. */
+  badgeContent?: React.ReactNode;
+
+  /**
+   * Position of the badge
+   */
+  position?: BadgePosition;
+
+  /** Hides the badge while keeping what it is attached to. */
+  invisible?: boolean;
+
+  /**
+   * Accessibility label for screen readers
+   */
+  'aria-label'?: string;
+
+  /**
+   * ARIA live region behavior
+   */
+  'aria-live'?: 'off' | 'polite' | 'assertive';
+
+  /**
+   * Whether the live region should be atomic
+   */
+  'aria-atomic'?: boolean;
+
+  /**
+   * Whether the badge should be closable
+   */
+  closable?: boolean;
+
+  /**
+   * Callback when badge is closed
+   */
+  onClose?: () => void;
+
+  /**
+   * Whether to show a shimmer effect
+   */
+  shimmer?: boolean;
+
+  /**
+   * Whether to bounce on mount
+   */
+  bounce?: boolean;
+
+  /**
+   * Custom icon element to display in the badge
+   */
+  icon?: React.ReactNode;
+
+  /** What the badge is attached to. */
+  children?: React.ReactNode;
+
+  /**
+   * Custom test ID for testing
+   */
+  'data-testid'?: string;
+
+  /** React Native's spelling of the same id. */
+  testID?: string;
+
+  /** The house spelling of the same id. */
+  dataTestId?: string;
+}

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 
-import type { BadgeProps } from './Badge.types';
+import type { BadgeBaseProps } from './Badge.base';
 
 type BadgeDefaultedKeys =
   | 'variant'
@@ -16,9 +16,14 @@ type BadgeDefaultedKeys =
   | 'position'
   | 'closable';
 
-export type ResolvedBadgeProps = BadgeProps & Required<Pick<BadgeProps, BadgeDefaultedKeys>>;
+/**
+ * Generic over the renderer's own props: the web and the native `Badge` carry
+ * different extras, and both come back out untouched.
+ */
+export type ResolvedBadgeProps<P extends BadgeBaseProps = BadgeBaseProps> = P &
+  Required<Pick<BadgeBaseProps, BadgeDefaultedKeys>>;
 
-const BADGE_DEFAULTS: Pick<BadgeProps, BadgeDefaultedKeys> = {
+const BADGE_DEFAULTS: Required<Pick<BadgeBaseProps, BadgeDefaultedKeys>> = {
   variant: 'default',
   size: 'md',
   color: 'primary',
@@ -37,16 +42,16 @@ const BADGE_DEFAULTS: Pick<BadgeProps, BadgeDefaultedKeys> = {
 // falls back to the default exactly as a destructuring default would. Applied as
 // a merge rather than destructuring defaults, which would otherwise put twelve
 // branches into the component's own complexity budget.
-export const resolveBadgeProps = (props: BadgeProps): ResolvedBadgeProps =>
+export const resolveBadgeProps = <P extends BadgeBaseProps>(props: P): ResolvedBadgeProps<P> =>
   ({
     ...BADGE_DEFAULTS,
     ...(Object.fromEntries(
       Object.entries(props).filter(([, value]) => value !== undefined),
-    ) as Partial<BadgeProps>),
-  }) as ResolvedBadgeProps;
+    ) as Partial<P>),
+  }) as ResolvedBadgeProps<P>;
 
 // `content` supersedes the older `badgeContent` prop.
-export const badgeContentOf = (props: Pick<BadgeProps, 'content' | 'badgeContent'>): ReactNode => {
+export const badgeContentOf = (props: Pick<BadgeBaseProps, 'content' | 'badgeContent'>): ReactNode => {
   if (props.content !== undefined) return props.content;
   if (props.badgeContent !== undefined) return props.badgeContent;
   return null;
@@ -72,3 +77,9 @@ export const definedAria = (
     string,
     string | boolean
   >;
+
+/** `${dataTestId}-content`, or `badge-content` when the caller named nothing. */
+export const makeBadgeTestId =
+  (dataTestId?: string) =>
+  (suffix: string): string =>
+    dataTestId ? `${dataTestId}-${suffix}` : `badge-${suffix}`;

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

@@ -0,0 +1,174 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+
+import type { BadgePosition, BadgeSize, BadgeVariant } from './Badge.base';
+import {
+  BADGE_BORDER_WIDTH,
+  BADGE_DESTRUCTIVE_FONT_WEIGHT,
+  BADGE_FONT_WEIGHT,
+  BADGE_LETTER_SPACING_EM,
+  BADGE_SIZES,
+  GLASS_BACKGROUND_ALPHA,
+  GLASS_BORDER_ALPHA,
+  GLOW,
+  OUTLINE_BORDER_WIDTH,
+  SECONDARY_BACKGROUND_ALPHA,
+  SECONDARY_BORDER_ALPHA,
+  badgeAnchor,
+  badgePalette,
+  type BadgeSizeMetrics,
+} from './Badge.metrics';
+import { alpha } from '../../../tokens/color';
+import type { UiPaletteColor, UiTheme } from '../../../tokens/theme';
+import type { ColorValue } from '../../../tokens/vocabulary';
+
+export interface BadgePaint {
+  box: ViewStyle;
+  ink: string;
+  fontWeight: number;
+  /** `gradient` and `glass` shout; everything else is set as written. */
+  uppercase: boolean;
+}
+
+/** The chip a variant paints, as React Native styles. */
+function variantPaint(
+  theme: UiTheme,
+  variant: BadgeVariant,
+  accent: UiPaletteColor,
+): BadgePaint {
+  const filled = (background: string, ink: string): BadgePaint => ({
+    box: { backgroundColor: background },
+    ink,
+    fontWeight: BADGE_FONT_WEIGHT,
+    uppercase: false,
+  });
+  switch (variant) {
+    case 'gradient':
+      // React Native core has no gradient fill: the 135° run takes its first stop.
+      return { ...filled(accent.main, '#fff'), uppercase: true };
+    case 'glass':
+      return {
+        box: {
+          backgroundColor: alpha(accent.main, GLASS_BACKGROUND_ALPHA),
+          borderWidth: 1,
+          borderColor: alpha(accent.main, GLASS_BORDER_ALPHA),
+        },
+        ink: accent.main,
+        fontWeight: BADGE_FONT_WEIGHT,
+        uppercase: true,
+      };
+    case 'outline':
+      return {
+        box: {
+          backgroundColor: 'transparent',
+          borderWidth: OUTLINE_BORDER_WIDTH,
+          borderColor: accent.main,
+        },
+        ink: accent.main,
+        fontWeight: BADGE_FONT_WEIGHT,
+        uppercase: false,
+      };
+    case 'secondary':
+      return {
+        box: {
+          backgroundColor: alpha(accent.main, SECONDARY_BACKGROUND_ALPHA),
+          borderWidth: 1,
+          borderColor: alpha(accent.main, SECONDARY_BORDER_ALPHA),
+        },
+        ink: accent.main,
+        fontWeight: BADGE_FONT_WEIGHT,
+        uppercase: false,
+      };
+    case 'destructive':
+      return {
+        ...filled(theme.palette.danger.main, theme.palette.danger.contrastText),
+        fontWeight: BADGE_DESTRUCTIVE_FONT_WEIGHT,
+      };
+    case 'success':
+      return filled(theme.palette.success.main, theme.palette.success.contrastText);
+    case 'warning':
+      return filled(theme.palette.warning.main, theme.palette.warning.contrastText);
+    default:
+      return filled(accent.main, accent.contrastText || '#fff');
+  }
+}
+
+export interface BadgeBoxArgs {
+  variant: BadgeVariant;
+  size: BadgeSize;
+  color: ColorValue;
+  glow: boolean;
+}
+
+/**
+ * Where the chip hangs: MUI's `anchorOrigin` pins it to a corner and then
+ * `translate(±50%, ∓50%)` puts its CENTRE there. It is its own node so the
+ * chip's animations own `transform` outright — a React Native style array
+ * replaces that property rather than composing it, as CSS would.
+ */
+export function badgeAnchorStyle(position: BadgePosition): ViewStyle {
+  const anchor = badgeAnchor(position);
+  return {
+    position: 'absolute',
+    [anchor.vertical]: 0,
+    [anchor.horizontal]: 0,
+    transform: [
+      { translateX: anchor.horizontal === 'right' ? '50%' : '-50%' },
+      { translateY: anchor.vertical === 'top' ? '-50%' : '50%' },
+    ],
+  };
+}
+
+/** The chip itself: MUI's paper ring, its size, and the variant's paint. */
+export function badgeBoxStyle(theme: UiTheme, a: BadgeBoxArgs): ViewStyle {
+  const metrics = BADGE_SIZES[a.size];
+  const accent = badgePalette(theme, a.color);
+  const paint = variantPaint(theme, a.variant, accent);
+  const dot = a.variant === 'dot';
+
+  return {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: BADGE_BORDER_WIDTH,
+    borderColor: theme.palette.background.paper,
+    ...(dot
+      ? {
+          width: metrics.dotSize,
+          height: metrics.dotSize,
+          minWidth: metrics.dotSize,
+          borderRadius: metrics.dotSize / 2,
+          backgroundColor: accent.main,
+        }
+      : {
+          minWidth: metrics.minWidth,
+          height: metrics.height,
+          paddingHorizontal: metrics.paddingHorizontal,
+          borderRadius: metrics.height / 2,
+          ...paint.box,
+        }),
+    ...(a.glow
+      ? { boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(accent.main, GLOW.alpha)}` }
+      : {}),
+  };
+}
+
+/** The chip's own type: the size's step, semibold, tracked a little wider. */
+export function badgeTextStyle(
+  theme: UiTheme,
+  variant: BadgeVariant,
+  size: BadgeSize,
+  color: ColorValue,
+): TextStyle {
+  const metrics = BADGE_SIZES[size];
+  const paint = variantPaint(theme, variant, badgePalette(theme, color));
+  return {
+    fontFamily: theme.typography.fontFamily,
+    fontSize: metrics.fontSize,
+    fontWeight: String(paint.fontWeight) as TextStyle['fontWeight'],
+    letterSpacing: metrics.fontSize * BADGE_LETTER_SPACING_EM,
+    color: paint.ink,
+    ...(paint.uppercase ? { textTransform: 'uppercase' } : {}),
+  };
+}
+
+export const badgeMetrics = (size: BadgeSize): BadgeSizeMetrics => BADGE_SIZES[size];