@12-apps/ui 6.19.1 → 6.20.0

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

@@ -1,119 +1,33 @@
-import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { BadgeProps as MuiBadgeProps } from '@mui/material/Badge/index.js';
-import type React from 'react';
 
-export type BadgeVariant = 
-  | 'default' 
-  | 'dot' 
-  | 'count' 
-  | 'gradient' 
-  | 'glass'
-  | 'outline'
-  | 'secondary'
-  | 'destructive'
-  | 'success'
-  | 'warning';
-
-export type BadgeSize = SizeValue;
-
-export interface BadgeProps extends Omit<MuiBadgeProps, 'variant' | 'color' | 'content'> {
-  /**
-   * 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;
-  
-  /**
-   * Position of the badge
-   */
-  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-  
-  /**
-   * 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;
-  
+import type { BadgeBaseProps } from './Badge.base';
+
+export type {
+  BadgeBaseProps,
+  BadgePosition,
+  BadgeSize,
+  BadgeVariant,
+} from './Badge.base';
+
+/** The web `Badge`: the shared contract, plus MUI's own badge props. */
+export interface BadgeProps
+  extends BadgeBaseProps,
+    Omit<
+      MuiBadgeProps,
+      | 'variant'
+      | 'color'
+      | 'content'
+      | 'badgeContent'
+      | 'children'
+      | 'invisible'
+      // MUI types these as `Booleanish`/its own unions through `AriaAttributes`;
+      // the shared contract narrows them, and the narrower one is the contract.
+      | 'aria-atomic'
+      | 'aria-live'
+      | 'aria-label'
+    > {
   /**
    * Additional CSS class name
    */
   className?: string;
-
-  /**
-   * 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;
-
-  /**
-   * Custom test ID for testing
-   */
-  'data-testid'?: string;
-}
+}

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

@@ -1,6 +1,17 @@
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import { alpha } from '@mui/material/styles/index.js';
 
+import {
+  BADGE_DESTRUCTIVE_FONT_WEIGHT,
+  GLASS_BACKGROUND_ALPHA,
+  GLASS_BLUR_PX,
+  GLASS_BORDER_ALPHA,
+  GLASS_INSET_HIGHLIGHT_ALPHA,
+  GLASS_SATURATE,
+  OUTLINE_BORDER_WIDTH,
+  SECONDARY_BACKGROUND_ALPHA,
+  SECONDARY_BORDER_ALPHA,
+} from './Badge.metrics';
 import type { BadgePalette, BadgeSizeStyles } from './Badge.styles';
 
 const BADGE_VARIANTS: Record<
@@ -41,20 +52,20 @@ const BADGE_VARIANTS: Record<
         padding: sizeStyles.padding,
         borderRadius: sizeStyles.height / 2 }),
   glass: (theme, colorPalette, sizeStyles) => ({
-        backgroundColor: alpha(colorPalette.main, 0.1),
-        backdropFilter: 'blur(10px) saturate(200%)',
-        WebkitBackdropFilter: 'blur(10px) saturate(200%)',
-        border: `1px solid ${alpha(colorPalette.main, 0.2)}`,
+        backgroundColor: alpha(colorPalette.main, GLASS_BACKGROUND_ALPHA),
+        backdropFilter: `blur(${GLASS_BLUR_PX}px) saturate(${GLASS_SATURATE * 100}%)`,
+        WebkitBackdropFilter: `blur(${GLASS_BLUR_PX}px) saturate(${GLASS_SATURATE * 100}%)`,
+        border: `1px solid ${alpha(colorPalette.main, GLASS_BORDER_ALPHA)}`,
         color: colorPalette.main,
         minWidth: sizeStyles.minWidth,
         height: sizeStyles.height,
         fontSize: sizeStyles.fontSize,
         padding: sizeStyles.padding,
         borderRadius: sizeStyles.height / 2,
-        boxShadow: `inset 0 1px 1px ${alpha(theme.palette.common.white, 0.1)}` }),
+        boxShadow: `inset 0 1px 1px ${alpha(theme.palette.common.white, GLASS_INSET_HIGHLIGHT_ALPHA)}` }),
   outline: (theme, colorPalette, sizeStyles) => ({
         backgroundColor: 'transparent',
-        border: `2px solid ${colorPalette.main}`,
+        border: `${OUTLINE_BORDER_WIDTH}px solid ${colorPalette.main}`,
         color: colorPalette.main,
         minWidth: sizeStyles.minWidth,
         height: sizeStyles.height,
@@ -62,9 +73,9 @@ const BADGE_VARIANTS: Record<
         padding: sizeStyles.padding,
         borderRadius: sizeStyles.height / 2 }),
   secondary: (theme, colorPalette, sizeStyles) => ({
-        backgroundColor: alpha(colorPalette.main, 0.15),
+        backgroundColor: alpha(colorPalette.main, SECONDARY_BACKGROUND_ALPHA),
         color: colorPalette.main,
-        border: `1px solid ${alpha(colorPalette.main, 0.3)}`,
+        border: `1px solid ${alpha(colorPalette.main, SECONDARY_BORDER_ALPHA)}`,
         minWidth: sizeStyles.minWidth,
         height: sizeStyles.height,
         fontSize: sizeStyles.fontSize,
@@ -78,7 +89,7 @@ const BADGE_VARIANTS: Record<
         fontSize: sizeStyles.fontSize,
         padding: sizeStyles.padding,
         borderRadius: sizeStyles.height / 2,
-        fontWeight: 700 }),
+        fontWeight: BADGE_DESTRUCTIVE_FONT_WEIGHT }),
   success: (theme, colorPalette, sizeStyles) => ({
         backgroundColor: theme.palette.success.main,
         color: theme.palette.success.contrastText,

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

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import type { BadgeSize, BadgeVariant } from './Badge.base';
+import { badgeMetrics, badgeTextStyle } from './Badge.look.native';
+import { BADGE_CONTENT_GAP } from './Badge.metrics';
+import { Icon } from '../../../icons/Icon.native';
+import { renderTextChildren } from '../../../platform/text-children';
+import { useUiTheme } from '../../../provider/use-ui-theme.native';
+import type { ColorValue } from '../../../tokens/vocabulary';
+
+export interface BadgeContentProps {
+  variant: BadgeVariant;
+  size: BadgeSize;
+  color: ColorValue;
+  icon?: React.ReactNode;
+  closable: boolean;
+  content: React.ReactNode;
+  idFor: (suffix: string) => string;
+  onClose: () => void;
+}
+
+/**
+ * The badge's inner run: optional icon, the content itself, optional close
+ * button — the same three slots and the same ids `BadgeContent.tsx` builds. A
+ * dot badge shows none of it.
+ */
+export function BadgeContent({
+  variant,
+  size,
+  color,
+  icon,
+  closable,
+  content,
+  idFor,
+  onClose,
+}: BadgeContentProps): React.JSX.Element | null {
+  const theme = useUiTheme();
+  if (variant === 'dot') return null;
+
+  const metrics = badgeMetrics(size);
+  const text = badgeTextStyle(theme, variant, size, color);
+  const hasContent = content !== null && content !== undefined;
+  if (!icon && !hasContent && !closable) return null;
+
+  return (
+    <View style={styles.run}>
+      {icon ? (
+        <View testID={idFor('icon')} style={{ height: metrics.iconSize, justifyContent: 'center' }}>
+          {icon}
+        </View>
+      ) : null}
+      {hasContent ? (
+        <View testID={idFor('content')} style={styles.centre}>
+          {renderTextChildren(content, text, 1)}
+        </View>
+      ) : null}
+      {closable ? (
+        <Pressable
+          testID={idFor('close')}
+          role="button"
+          aria-label="close"
+          onPress={onClose}
+          style={styles.close}
+        >
+          <Icon name="Close" size={metrics.closeIconSize} color={text.color as string} />
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  run: { flexDirection: 'row', alignItems: 'center', gap: BADGE_CONTENT_GAP },
+  centre: { alignItems: 'center', justifyContent: 'center' },
+  /** MUI's close `IconButton` sits half a spacing unit clear of the label. */
+  close: { marginLeft: 4, alignItems: 'center', justifyContent: 'center' },
+});

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

@@ -3,16 +3,16 @@ import IconButton from '@mui/material/IconButton/index.js';
 import type { FC, ReactNode } from 'react';
 import React from 'react';
 
+import { BADGE_CONTENT_GAP, BADGE_SIZES } from './Badge.metrics';
 import { getSizeStyles } from './Badge.styles';
 import type { BadgeSize } from './Badge.types';
+import { px } from '../../../tokens/theme';
 
-// CLOSE_ICON_SIZES already exists in Badge.tsx; the size lookup lives here now.
-const CLOSE_ICON_SIZES: Record<string, string> = {
-  xs: '0.5rem',
-  sm: '0.625rem',
-  md: '0.75rem',
-  lg: '0.875rem',
-};
+// Derived from the shared metrics: `xl` takes `lg`'s glyph, which is what the
+// hand-written map did through its `?? CLOSE_ICON_SIZES.lg` fallback.
+const CLOSE_ICON_SIZES: Record<string, string> = Object.fromEntries(
+  Object.entries(BADGE_SIZES).map(([size, metrics]) => [size, px(metrics.closeIconSize)]),
+);
 
 const makeTestId =
   (dataTestId?: string) =>
@@ -102,6 +102,6 @@ export const buildBadgeContent = ({
   if (parts.length === 0) return null;
 
   return (
-    <span style={{ display: 'inline-flex', alignItems: 'center', gap: '2px' }}>{parts}</span>
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: `${BADGE_CONTENT_GAP}px` }}>{parts}</span>
   );
 };

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

@@ -0,0 +1,11 @@
+# Badge on React Native
+
+Known rendering gaps, one bullet each; `pnpm native:ledger` reads them.
+
+- `gradient` paints the 135° run's first stop flat and `glass` keeps its 10% wash and 20% hairline without the `blur(10px) saturate(200%)` backdrop or the inset white highlight — React Native has no gradient fill, no backdrop filter and no inset shadow.
+- `shimmer` is a gradient sweeping across a pseudo-element and is not drawn at all; the chip keeps its variant's paint.
+- `glow` draws the 15px halo but not the `brightness(1.1)` filter beside it, and `glow` WITH `pulse` breathes only the scale and the opacity — the halo itself cannot be animated, because a box shadow is not an animatable style there.
+- Hover has no touch equivalent: the chip's `scale(1.1)` under the pointer and the glow's brighter hover halo are web-only.
+- `count` is drawn as a pill (`height / 2`); MUI asks for `border-radius: 50%`, which on a chip wider than it is tall is an ellipse React Native cannot express.
+- MUI's `transition: all 0.3s` on the chip has no equivalent: a colour or size change is drawn immediately. The mount, pulse and close animations are `Animated` and do run.
+- `onClick` on the badge reaches the DOM through react-native-web and fires there, as it does on the web; a device has no click, so a shared screen that needs a press should put one on its own child.

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

@@ -0,0 +1,8 @@
+export { Badge } from './Badge.native';
+export type {
+  BadgeBaseProps,
+  BadgePosition,
+  BadgeProps,
+  BadgeSize,
+  BadgeVariant,
+} from './Badge.types.native';

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

@@ -1,2 +1,8 @@
 export { Badge } from './Badge';
-export type { BadgeProps, BadgeSize, BadgeVariant } from './Badge.types';
+export type {
+  BadgeBaseProps,
+  BadgePosition,
+  BadgeProps,
+  BadgeSize,
+  BadgeVariant,
+} from './Badge.types';

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

@@ -0,0 +1,99 @@
+import type { ReactNode } 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 ChipVariant = 'filled' | 'outlined';
+
+/**
+ * The house size scale, abbreviated like every other component's.
+ *
+ * `Avatar`, `Badge`, `Progress`, `Input`, `Modal` and `Dialog` all use `sm`/`md`;
+ * this was `'small' | 'medium'`, MUI's spelling, and the sole outlier in the
+ * package. That was not merely inconsistent — callers wrote `size="sm"` because
+ * every neighbouring component taught them to, it type-checked against the old
+ * `ChipSize` nowhere and reached MUI as an unknown value, and the chip silently
+ * rendered at the default `medium`. Twelve of them are doing that today.
+ *
+ * All five stops, and `Chip.tsx` draws them: MUI gives a chip two heights, so
+ * `xs`/`sm` map to small and `md` and up to medium. Offering fewer than five
+ * here is what made callers write `size="sm"` against a type that did not have
+ * it — the scale is the vocabulary, and a component that speaks a dialect of it
+ * is the problem, not the solution.
+ */
+export type ChipSize = SizeValue;
+
+/**
+ * The colours a chip can draw — THE HOUSE VOCABULARY, identical to `ButtonProps`.
+ *
+ * `danger` and `neutral` are ours; the rest are MUI's own names already. That is
+ * the same sentence `Button.tsx` carries, and deliberately so: `Button`, `Alert`,
+ * `Text`, `Heading`, `Paragraph` and `Blockquote` all speak this vocabulary, so a
+ * chip is the odd one out if it does not.
+ *
+ * This prop was `string`, and the widening was not free. `danger` — the house
+ * word for the destructive meaning, and what every neighbouring component
+ * accepts — reached MUI as an unknown value and fell back to the default grey.
+ * The chip that most needed emphasis rendered without any, and nothing said so.
+ *
+ * The fix is NOT to reject `danger`. Rejecting it would punish a caller for
+ * using the vocabulary the rest of the system taught them. The fix is for the
+ * chip to speak it and translate at the MUI boundary, exactly as `Button` does.
+ */
+export type ChipColor = ColorValue;
+
+export interface ChipBaseProps {
+  /** Text content displayed in the chip */
+  label: string;
+
+  /** Visual style variant */
+  variant?: ChipVariant;
+
+  /** Size of the chip */
+  size?: ChipSize;
+
+  /** Theme color token. See {@link ChipColor} for why this is a closed set. */
+  color?: ChipColor;
+
+  /** Source URL for avatar image */
+  avatarSrc?: string;
+
+  /** Custom avatar React node (overrides avatarSrc) */
+  avatar?: ReactNode;
+
+  /** Leading icon React node */
+  icon?: ReactNode;
+
+  /** Current selection state */
+  selected?: boolean;
+
+  /** Enables selection toggle capability */
+  selectable?: boolean;
+
+  /** Shows delete button */
+  deletable?: boolean;
+
+  /** Disables all interactions */
+  disabled?: boolean;
+
+  /**
+   * Click/selection handler. The name is the web's on both sides; the native
+   * chip also answers to `onPress`, as `Button` does.
+   */
+  onClick?: () => void;
+
+  /** Delete action handler */
+  onDelete?: () => void;
+
+  /** Test ID for component testing */
+  dataTestId?: string;
+
+  /** React Native's spelling of {@link ChipBaseProps.dataTestId}. */
+  testID?: string;
+}

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

@@ -0,0 +1,49 @@
+/** `${dataTestId}-label`, or `chip-label` when the caller named nothing. */
+export const makeTestId =
+  (dataTestId?: string) =>
+  (suffix: string): string =>
+    dataTestId ? `${dataTestId}-${suffix}` : `chip-${suffix}`;
+
+/** `option` when the chip belongs to a selectable set, `button` when it merely acts. */
+export const chipRole = (
+  selectable?: boolean,
+  // `unknown`, because the two renderers hand this a differently-typed handler
+  // and all that is asked of it here is whether the caller supplied one.
+  onClick?: unknown,
+): 'option' | 'button' | undefined => {
+  if (selectable) return 'option';
+  return onClick ? 'button' : undefined;
+};
+
+export const isClickable = (
+  disabled?: boolean,
+  onClick?: unknown,
+  selectable?: boolean,
+): boolean => !disabled && (Boolean(onClick) || Boolean(selectable));
+
+/** What a key press on a chip means, if anything. */
+export type ChipKeyAction = 'delete' | 'activate' | null;
+
+const DELETE_KEYS = new Set(['Delete', 'Backspace']);
+const ACTIVATE_KEYS = new Set(['Enter', ' ']);
+
+export interface ChipKeyArgs {
+  disabled?: boolean;
+  deletable?: boolean;
+  selectable?: boolean;
+  onClick?: unknown;
+  onDelete?: unknown;
+}
+
+/**
+ * A chip is not a native control, so the two keyboard conventions it stands in
+ * for are decided by hand: Delete/Backspace removes it, Enter/Space activates
+ * it. Both renderers read this one decision — the web wires it to the DOM
+ * handler, the native half to react-native-web's (see `Chip.native.tsx`).
+ */
+export function chipKeyAction(key: string, a: ChipKeyArgs): ChipKeyAction {
+  if (a.disabled) return null;
+  if (DELETE_KEYS.has(key) && a.deletable && a.onDelete) return 'delete';
+  if (ACTIVATE_KEYS.has(key) && (a.onClick || a.selectable)) return 'activate';
+  return null;
+}

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

@@ -0,0 +1,163 @@
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+
+import type { ChipColor, ChipVariant } from './Chip.base';
+import {
+  CHIP_DISABLED_OPACITY,
+  CHIP_FONT_SIZE,
+  CHIP_RADIUS,
+  CHIP_SIZES,
+  DELETE_ICON_ALPHA,
+  DELETE_ICON_ON_COLOR_ALPHA,
+  OUTLINED_BORDER_ALPHA,
+  OUTLINED_HOVER_ALPHA,
+  type ChipMuiSize,
+  type ChipSizeMetrics,
+} from './Chip.metrics';
+import { alpha } from '../../../tokens/color';
+import type { UiTheme } from '../../../tokens/theme';
+
+/** MUI's `action.selectedOpacity`; its hover wash adds `OUTLINED_HOVER_ALPHA` on top. */
+const SELECTED_OPACITY = 0.08;
+
+export interface ChipPaint {
+  container: ViewStyle;
+  /** The web's `:hover` background, which touch has no equivalent of. */
+  pressed: ViewStyle;
+  label: TextStyle;
+  deleteColor: string;
+}
+
+/** `neutral` is MUI's `default`: no accent, the ink and the ramp instead. */
+const isAccented = (color: ChipColor): boolean => color !== 'neutral';
+
+/** An unaccented chip's hairline, which follows the mode rather than a hue. */
+const neutralBorder = (theme: UiTheme): string =>
+  theme.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700];
+
+function filledPaint(theme: UiTheme, color: ChipColor): ChipPaint {
+  if (!isAccented(color)) {
+    return {
+      container: { backgroundColor: theme.palette.action.selected },
+      pressed: { backgroundColor: alpha(theme.palette.action.selected, SELECTED_OPACITY + OUTLINED_HOVER_ALPHA) },
+      label: { color: theme.palette.text.primary },
+      deleteColor: alpha(theme.palette.text.primary, DELETE_ICON_ALPHA),
+    };
+  }
+  const accent = theme.palette[color];
+  return {
+    container: { backgroundColor: accent.main },
+    pressed: { backgroundColor: accent.dark },
+    label: { color: accent.contrastText },
+    deleteColor: alpha(accent.contrastText, DELETE_ICON_ON_COLOR_ALPHA),
+  };
+}
+
+function outlinedPaint(theme: UiTheme, color: ChipColor): ChipPaint {
+  const border: ViewStyle = { backgroundColor: 'transparent', borderWidth: 1, borderStyle: 'solid' };
+  if (!isAccented(color)) {
+    return {
+      container: { ...border, borderColor: neutralBorder(theme) },
+      pressed: { backgroundColor: theme.palette.action.hover },
+      label: { color: theme.palette.text.primary },
+      deleteColor: alpha(theme.palette.text.primary, DELETE_ICON_ALPHA),
+    };
+  }
+  const accent = theme.palette[color];
+  return {
+    container: { ...border, borderColor: alpha(accent.main, OUTLINED_BORDER_ALPHA) },
+    pressed: { backgroundColor: alpha(accent.main, OUTLINED_HOVER_ALPHA) },
+    label: { color: accent.main },
+    deleteColor: alpha(accent.main, OUTLINED_BORDER_ALPHA),
+  };
+}
+
+/**
+ * What MUI's chip paints, as React Native styles. `selected` tints an OUTLINED
+ * chip with `action.selected` — a filled one is already solid, which is what
+ * `Chip.styles.tsx` decided for the web.
+ */
+export function chipPaint(
+  theme: UiTheme,
+  variant: ChipVariant,
+  color: ChipColor,
+  selected: boolean,
+): ChipPaint {
+  const paint = variant === 'outlined' ? outlinedPaint(theme, color) : filledPaint(theme, color);
+  if (variant !== 'outlined' || !selected) return paint;
+  return {
+    ...paint,
+    container: { ...paint.container, backgroundColor: theme.palette.action.selected },
+  };
+}
+
+/** The pill itself: MUI's height, its 16px radius, and the disabled fade. */
+export function chipContainerStyle(metrics: ChipSizeMetrics, disabled: boolean): ViewStyle {
+  return {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'flex-start',
+    maxWidth: '100%',
+    height: metrics.height,
+    borderRadius: CHIP_RADIUS,
+    ...(disabled ? { opacity: CHIP_DISABLED_OPACITY } : {}),
+  };
+}
+
+/** The label: MUI's 13px, padded by the variant, clipped rather than wrapped. */
+export function chipLabelStyle(
+  theme: UiTheme,
+  metrics: ChipSizeMetrics,
+  variant: ChipVariant,
+): TextStyle {
+  const padding = variant === 'outlined' ? metrics.labelPaddingOutlined : metrics.labelPadding;
+  return {
+    fontFamily: theme.typography.fontFamily,
+    fontSize: CHIP_FONT_SIZE,
+    paddingLeft: padding,
+    paddingRight: padding,
+    flexShrink: 1,
+  };
+}
+
+/** The margins MUI gives the leading slot, tucking it under the label's padding. */
+export function chipLeadingSlotStyle(
+  metrics: ChipSizeMetrics,
+  variant: ChipVariant,
+  slot: 'icon' | 'avatar',
+): ViewStyle {
+  const outlined = variant === 'outlined';
+  const marginLeft =
+    slot === 'icon'
+      ? (outlined ? metrics.iconMarginLeftOutlined : metrics.iconMarginLeft)
+      : (outlined ? metrics.avatarMarginLeftOutlined : metrics.avatarMarginLeft);
+  return {
+    marginLeft,
+    marginRight: slot === 'icon' ? metrics.iconMarginRight : metrics.avatarMarginRight,
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+}
+
+/** The delete glyph's own tuck, one pixel tighter when the chip is outlined. */
+export function chipDeleteSlotStyle(metrics: ChipSizeMetrics, variant: ChipVariant): ViewStyle {
+  return {
+    marginLeft: metrics.deleteMarginLeft,
+    marginRight:
+      variant === 'outlined' ? metrics.deleteMarginRightOutlined : metrics.deleteMarginRight,
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+}
+
+/** The round avatar box MUI draws for an `avatarSrc`. */
+export function chipAvatarStyle(metrics: ChipSizeMetrics): ImageStyle {
+  return {
+    width: metrics.avatarSize,
+    height: metrics.avatarSize,
+    borderRadius: metrics.avatarSize / 2,
+    overflow: 'hidden',
+  };
+}
+
+export const chipMetrics = (size: ChipMuiSize): ChipSizeMetrics => CHIP_SIZES[size];