@12-apps/ui 6.19.1 → 6.21.0

package/dist/native/chunks/chunk-WKMDCNIN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/form/Input/Input.metrics.ts","../../../src/components/form/field-pulse.native.tsx","../../../src/tokens/field-edge.core.ts","../../../src/components/form/Input/Input.look.native.ts"],"sourcesContent":["import type { InputVariant } from './Input.base';\nimport { decomposeColor, recomposeColor } from '../../../tokens/color';\nimport type { UiTheme } from '../../../tokens/theme';\nimport { SIZE_VALUES, type SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Input` RENDERERS DRAW WITH.\n *\n * `Input.styles.ts` (web, emotion over MUI's `TextField`) and\n * `Input.native.tsx` (React Native) read this one table. The web turns the px\n * into the padding shorthands and rem it has always emitted; native uses the\n * numbers as they are.\n *\n * Two kinds of number live here, and the difference matters:\n *\n *  - the ones `Input.styles.ts` writes itself — the size overrides, the glow,\n *    the pulse, the glass and gradient alphas, the filled wash;\n *  - the ones MUI supplies UNDER those overrides — `OutlinedInput`'s\n *    `16.5px 14px`, `InputBase`'s 23px line box, `FormHelperText`'s 3px lift.\n *    The web never writes them, but it draws them, so a native field that\n *    wants the same box has to know them. They are MUI 6.5's own values,\n *    copied with their source named; a host that re-themes MUI's components\n *    moves the web only, which the parity ledger records.\n */\n\nexport interface InputInset {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\n\n/** MUI gives a text field two heights; the house scale has five. */\nexport type MuiInputSize = 'small' | 'medium';\nexport type MuiInputVariant = 'outlined' | 'filled' | 'standard';\n\n/** Our five variants map onto MUI's three; `glass` and `gradient` restyle an outline. */\nexport const muiVariantFor = (variant: InputVariant): MuiInputVariant => {\n  switch (variant) {\n    case 'underline':\n      return 'standard';\n    case 'glass':\n    case 'gradient':\n      return 'outlined';\n    default:\n      return variant;\n  }\n};\n\n/** Which of MUI's two heights each step of the house scale asks for. */\nexport const INPUT_MUI_SIZE: Record<SizeValue, MuiInputSize> = {\n  xs: 'small',\n  sm: 'small',\n  md: 'medium',\n  lg: 'medium',\n  xl: 'medium',\n};\n\n/**\n * The three steps MUI has no height for, as `padding` on the input itself.\n *\n * `sm` and `md` are absent on purpose — they ARE MUI's two heights, so they\n * fall through to {@link MUI_INPUT_PADDING} below rather than restating it.\n * (`lg`'s 16px is a hair under `md`'s 16.5px: the override is a round number\n * where MUI's is derived from a 56px box. Kept as written — this table is what\n * the web draws, not what it ought to draw.)\n */\nexport const INPUT_SIZE_OVERRIDES: Partial<Record<SizeValue, { vertical: number; horizontal: number }>> = {\n  xs: { vertical: 6, horizontal: 10 },\n  lg: { vertical: 16, horizontal: 14 },\n  xl: { vertical: 20, horizontal: 16 },\n};\n\n/**\n * MUI's own input padding per variant and height (`OutlinedInput`,\n * `FilledInput`, `InputBase`). The filled insets are lopsided because the\n * floating label sits inside the box on the web.\n */\nexport const MUI_INPUT_PADDING: Record<MuiInputVariant, Record<MuiInputSize, InputInset>> = {\n  outlined: {\n    small: { top: 8.5, right: 14, bottom: 8.5, left: 14 },\n    medium: { top: 16.5, right: 14, bottom: 16.5, left: 14 },\n  },\n  filled: {\n    small: { top: 21, right: 12, bottom: 4, left: 12 },\n    medium: { top: 25, right: 12, bottom: 8, left: 12 },\n  },\n  standard: {\n    small: { top: 1, right: 0, bottom: 5, left: 0 },\n    medium: { top: 4, right: 0, bottom: 5, left: 0 },\n  },\n};\n\n/** The inset the value is drawn at: the size override where there is one, MUI's otherwise. */\nexport function inputPadding(variant: InputVariant, size: SizeValue): InputInset {\n  const override = INPUT_SIZE_OVERRIDES[size];\n  if (override) {\n    return {\n      top: override.vertical,\n      right: override.horizontal,\n      bottom: override.vertical,\n      left: override.horizontal,\n    };\n  }\n  return MUI_INPUT_PADDING[muiVariantFor(variant)][INPUT_MUI_SIZE[size]];\n}\n\n/** `theme.typography.body1` and `InputBase`'s `lineHeight: '1.4375em'`, in px. */\nexport const INPUT_FONT_SIZE = 16;\nexport const INPUT_LINE_HEIGHT = 23;\n\n/** MUI's `::placeholder` opacity, which multiplies the ink's own alpha. */\nexport const PLACEHOLDER_OPACITY = { light: 0.42, dark: 0.5 } as const;\n\n/**\n * The placeholder's colour: the field's ink faded by MUI's opacity.\n *\n * `alpha()` REPLACES an alpha channel, and `text.primary` already carries one\n * (`rgba(0, 0, 0, 0.87)`), so `alpha(ink, 0.42)` would be a different grey from\n * the one the browser composites. React Native has no per-placeholder opacity —\n * only `placeholderTextColor` — so the multiplication happens here.\n */\nexport function placeholderInk(theme: UiTheme): string {\n  const opacity = theme.mode === 'dark' ? PLACEHOLDER_OPACITY.dark : PLACEHOLDER_OPACITY.light;\n  const { type, values } = decomposeColor(theme.palette.text.primary);\n  const [first = 0, second = 0, third = 0, own = 1] = values;\n  return recomposeColor({\n    type: type.startsWith('hsl') ? 'hsla' : 'rgba',\n    values: [first, second, third, own * opacity],\n  });\n}\n\n/** The outline: 1px at rest, 2px focused, as MUI's `notchedOutline` draws it. */\nexport const INPUT_BORDER = { rest: 1, focused: 2 } as const;\n\n/** `FilledInput`'s and `Input`'s resting underline, MUI's own two greys. */\nexport const UNDERLINE_COLOR = {\n  light: 'rgba(0, 0, 0, 0.42)',\n  dark: 'rgba(255, 255, 255, 0.7)',\n} as const;\n\n/**\n * The label. It floats into the border on the web and sits above the field on\n * native, but it is the SAME label: 16px body type at MUI's shrunk scale, and\n * left-aligned with the value it names ({@link inputPadding}'s `left`).\n *\n * The 4px gap is MUI's own: a standard field puts 16px between the control's\n * top and the input, and the shrunk label's 12px line box takes the first 12.\n */\nexport const INPUT_LABEL = { scale: 0.75, gap: 4 } as const;\n\n/** `FormHelperText`: `theme.typography.caption` lifted 3px, inset 14px when contained. */\nexport const HELPER_TEXT = {\n  fontSize: 12,\n  lineHeight: 1.66,\n  marginTop: 3,\n  marginTopSmall: 4,\n  marginHorizontal: 14,\n} as const;\n\n/** `InputAdornment`: 8px between the glyph and the value, on whichever side it is. */\nexport const ADORNMENT_GAP = 8;\n\n/** `loading`: the field fades and MUI's 20px `CircularProgress` takes the end slot. */\nexport const INPUT_LOADING = { opacity: 0.7, spinnerSize: 20 } as const;\n\n/** `glow`: a halo of the primary hue, wider and stronger while focused. */\nexport const INPUT_GLOW = {\n  rest: { blur: 15, alpha: 0.3 },\n  focused: { blur: 20, alpha: 0.5 },\n} as const;\n\n/** `pulse`: a 56px bar behind the field, fading outward every two seconds. */\nexport const INPUT_PULSE = {\n  height: 56,\n  radiusUnits: 0.5,\n  opacity: 0.3,\n  ms: 2000,\n  spread: 10,\n} as const;\n\n/** `floating`: where the label rests and where it shrinks to, on the web. */\nexport const FLOATING_LABEL = {\n  rest: { x: 14, y: 16 },\n  shrink: { x: 14, y: -9 },\n  scale: 0.75,\n  paddingX: 4,\n} as const;\n\n/** `glass`: a wash of paper under a blur, brighter as the field is engaged. */\nexport const INPUT_GLASS = {\n  background: { rest: 0.1, hover: 0.15, focused: 0.2 },\n  blur: 20,\n  hoverBorderAlpha: 0.3,\n  focusRing: { width: 2, alpha: 0.1 },\n} as const;\n\n/** `gradient`: a 135° fill between the two brand hues, inside a 2px masked ring. */\nexport const INPUT_GRADIENT = {\n  angleDeg: 135,\n  fill: { rest: 0.1, hover: 0.15, focused: 0.2 },\n  borderWidth: 2,\n} as const;\n\n/** `filled`: MUI's own grey replaced by a wash of `action.hover`. */\nexport const FILLED_WASH = { rest: 0.04, hover: 0.08, focused: 0.12 } as const;\n\n/**\n * The `sx` the web spreads onto the `TextField` for a size: MUI's height, plus\n * the input padding for the three steps MUI has no height for.\n */\nexport interface InputSizeProps {\n  size: MuiInputSize;\n  sx?: { '& .MuiInputBase-input': { padding: string } };\n}\n\nconst sizeProps = (size: SizeValue): InputSizeProps => {\n  const override = INPUT_SIZE_OVERRIDES[size];\n  return {\n    size: INPUT_MUI_SIZE[size],\n    ...(override\n      ? { sx: { '& .MuiInputBase-input': { padding: `${override.vertical}px ${override.horizontal}px` } } }\n      : {}),\n  };\n};\n\nexport const SIZE_MAP: Record<SizeValue, InputSizeProps> = Object.fromEntries(\n  SIZE_VALUES.map((size) => [size, sizeProps(size)]),\n) as Record<SizeValue, InputSizeProps>;\n","import * as React from 'react';\nimport { Animated, Easing, Platform, StyleSheet } from 'react-native';\n\nimport { INPUT_PULSE } from './Input/Input.metrics';\n\n/**\n * THE BAR THAT PULSES BEHIND A FIELD.\n *\n * `Input.styles.ts` and `Select.tsx` declare the same `::after` — a 56px wash\n * of the primary hue at 0.3, growing a 10px box-shadow ring and fading out\n * every two seconds — so the native halves draw it from one component rather\n * than one each. The numbers stay in `Input.metrics.ts`, which `Select.metrics`\n * re-exports under its own name.\n *\n * React Native has no box-shadow spread, so the ring is a scale on the bar.\n */\nexport function FieldPulse({\n  color,\n  radius,\n  testID,\n}: {\n  color: string;\n  radius: number;\n  testID: string;\n}): React.JSX.Element {\n  const progress = React.useRef(new Animated.Value(0)).current;\n\n  React.useEffect(() => {\n    const loop = Animated.loop(\n      Animated.timing(progress, {\n        toValue: 1,\n        duration: INPUT_PULSE.ms,\n        easing: Easing.out(Easing.ease),\n        useNativeDriver: Platform.OS !== 'web',\n      }),\n    );\n    loop.start();\n    return () => loop.stop();\n  }, [progress]);\n\n  return (\n    <Animated.View\n      testID={testID}\n      aria-hidden\n      style={[\n        styles.pulse,\n        {\n          borderRadius: radius,\n          backgroundColor: color,\n          opacity: progress.interpolate({\n            inputRange: [0, 0.7, 1],\n            outputRange: [INPUT_PULSE.opacity, 0, 0],\n          }),\n          transform: [\n            { translateY: -INPUT_PULSE.height / 2 },\n            {\n              scale: progress.interpolate({\n                inputRange: [0, 0.7, 1],\n                outputRange: [1, 1 + INPUT_PULSE.spread / INPUT_PULSE.height, 1],\n              }),\n            },\n          ],\n        },\n      ]}\n    />\n  );\n}\n\nconst styles = StyleSheet.create({\n  pulse: {\n    position: 'absolute',\n    top: '50%',\n    left: 0,\n    right: 0,\n    height: INPUT_PULSE.height,\n    pointerEvents: 'none',\n  },\n});\n","import {\n  darken,\n  decomposeColor,\n  getContrastRatio,\n  getLuminance,\n  hslToRgb,\n  lighten,\n  recomposeColor,\n} from './color';\n\n/**\n * THE FIELD EDGE, WITH NO RENDERER BEHIND IT.\n *\n * The argument for why an outlined control cannot draw its resting boundary\n * from `alpha(theme.palette.divider, 0.23)` is in `./field-edge.ts`, next to\n * the MUI-typed `fieldEdge` the web components call. This file is the WALK\n * itself, over two colour strings, so the native renderer can run it too:\n * `Input.native.tsx` and `Select.native.tsx` have no MUI `Theme` to pass and no\n * `@mui/material/styles` to import, and a second copy of the walk beside them\n * is a second answer to \"where is this field's border\" waiting to drift.\n *\n * `./color` is a faithful port of MUI's colour manipulator (asserted equal to\n * it in `./__tests__/color.test.ts`), so the string this returns is the string\n * the web has always emitted.\n */\n\n/**\n * WCAG 2.1 SC 1.4.11 — the contrast a control's own boundary owes the surface\n * behind it. See `./field-edge.ts` for why 3:1 and why it is a floor.\n */\nexport const MIN_UI_CONTRAST = 3;\n\n/** How far one step of the walk moves, and how many steps before it gives up. */\nconst STEP = 0.05;\nconst MAX_STEPS = 20;\n\n/** A colour's red, green, blue and alpha, with `hsl()` converted on the way. */\nfunction channels(colour: string): [number, number, number, number] {\n  const decomposed = decomposeColor(colour);\n  const rgb = decomposed.type.startsWith('hsl') ? decomposeColor(hslToRgb(colour)) : decomposed;\n  const [r, g, b, a] = rgb.values;\n  return [r ?? 0, g ?? 0, b ?? 0, a ?? 1];\n}\n\n/**\n * A colour as an opaque `rgb()`, with any translucency resolved against\n * `surface`.\n *\n * Needed because `getContrastRatio` reads the channels it is given and ignores\n * the alpha, so handing it an `rgba()` measures a colour nobody sees.\n */\nfunction flatten(colour: string, surface: string): string {\n  const [r, g, b, alpha] = channels(colour);\n  if (alpha >= 1) return recomposeColor({ type: 'rgb', values: [r, g, b] });\n\n  const [baseR, baseG, baseB] = channels(surface);\n  const blend = (fg: number, bg: number): number => Math.round(alpha * fg + (1 - alpha) * bg);\n  return recomposeColor({\n    type: 'rgb',\n    values: [blend(r, baseR), blend(g, baseG), blend(b, baseB)],\n  });\n}\n\n/**\n * The resting boundary a control draws on `surface`, from the theme's own\n * `divider` as the seed: the seed itself when it already clears\n * {@link MIN_UI_CONTRAST}, otherwise the nearest tone of it that does.\n */\nexport function resolveFieldEdge(divider: string, surface: string): string {\n  const ground = flatten(surface, '#FFFFFF');\n  const seed = flatten(divider, ground);\n  if (getContrastRatio(seed, ground) >= MIN_UI_CONTRAST) return seed;\n\n  // Away from the surface, whichever way that is — so one rule serves both\n  // modes, and a dark card in a light theme is still handled by the pair rather\n  // than by `palette.mode`.\n  const away = getLuminance(ground) > 0.5 ? darken : lighten;\n  for (let step = 1; step <= MAX_STEPS; step += 1) {\n    // From the SEED each time rather than compounding the previous result, so\n    // the walk lands on the nearest passing tone instead of overshooting past it.\n    const candidate = away(seed, step * STEP);\n    if (getContrastRatio(candidate, ground) >= MIN_UI_CONTRAST) return candidate;\n  }\n  // Unreachable for any real surface — black clears 21:1 on white and white\n  // clears it on black — but a caller must never be handed `undefined`.\n  return getLuminance(ground) > 0.5 ? '#000000' : '#FFFFFF';\n}\n","import type { TextStyle, ViewStyle } from 'react-native';\n\nimport type { InputVariant } from './Input.base';\nimport {\n  FILLED_WASH,\n  HELPER_TEXT,\n  INPUT_MUI_SIZE,\n  INPUT_BORDER,\n  INPUT_FONT_SIZE,\n  INPUT_GLASS,\n  INPUT_GRADIENT,\n  INPUT_LABEL,\n  INPUT_LINE_HEIGHT,\n  UNDERLINE_COLOR,\n  inputPadding,\n  placeholderInk,\n} from './Input.metrics';\nimport { alpha } from '../../../tokens/color';\nimport { resolveFieldEdge } from '../../../tokens/field-edge.core';\nimport type { UiTheme } from '../../../tokens/theme';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * WHAT A NATIVE `Input` PAINTS, AS ARITHMETIC.\n *\n * Kept out of `Input.native.tsx` so that file reads as structure — label, box,\n * value, helper — and this one reads as the decisions: which border, how thick,\n * what colour, and where the value sits inside it.\n */\nexport interface FieldState {\n  focused: boolean;\n  error: boolean;\n  disabled: boolean;\n}\n\n/** Which edges a variant draws. `filled` and `underline` rule only the bottom. */\nconst BORDER_SIDES: Record<InputVariant, 'all' | 'bottom'> = {\n  outlined: 'all',\n  glass: 'all',\n  gradient: 'all',\n  filled: 'bottom',\n  underline: 'bottom',\n};\n\n/**\n * Whether the web draws this border on an absolutely positioned element.\n *\n * MUI's `notchedOutline` fieldset and the `::before` / `::after` underlines\n * cost no height — the field is 56px tall WITH its border. `glass` and\n * `gradient` instead put a real `border` on the input root, which does add to\n * the box, so the web field is 2px and 4px taller respectively. React Native\n * has only the second kind, so the first three compensate below.\n */\nconst BORDER_IS_FREE: Record<InputVariant, boolean> = {\n  outlined: true,\n  filled: true,\n  underline: true,\n  glass: false,\n  gradient: false,\n};\n\n/**\n * How thick. Only the outline family thickens on focus (MUI's `borderWidth: 2`\n * on `.Mui-focused .notchedOutline`); `glass` and `gradient` declare their own\n * constant border and change only its colour.\n */\nexport function borderWidthFor(variant: InputVariant, focused: boolean): number {\n  if (variant === 'gradient') return INPUT_GRADIENT.borderWidth;\n  if (variant === 'glass') return INPUT_BORDER.rest;\n  return focused ? INPUT_BORDER.focused : INPUT_BORDER.rest;\n}\n\n/**\n * The width the border takes out of the horizontal inset — 0 where the web's\n * border adds to the box rather than floating over it. Exported because the\n * `Select` draws the same box and has to place its arrow inside the same edge.\n */\nexport function horizontalBorderInset(variant: InputVariant, focused: boolean): number {\n  if (BORDER_SIDES[variant] !== 'all' || !BORDER_IS_FREE[variant]) return 0;\n  return borderWidthFor(variant, focused);\n}\n\n/**\n * What colour. Error and disabled outrank focus, as they do in MUI's source\n * order; a resting `filled` keeps MUI's own underline grey because the web\n * override only replaces its background.\n */\nfunction borderColorFor(theme: UiTheme, variant: InputVariant, state: FieldState): string {\n  if (state.disabled) return theme.palette.action.disabled;\n  if (state.error) return theme.palette.danger.main;\n  if (variant === 'gradient') {\n    return state.focused ? theme.palette.primary.dark : theme.palette.primary.main;\n  }\n  if (state.focused) return theme.palette.primary.main;\n  if (variant === 'filled') {\n    return theme.mode === 'dark' ? UNDERLINE_COLOR.dark : UNDERLINE_COLOR.light;\n  }\n  return resolveFieldEdge(theme.palette.divider, theme.palette.background.paper);\n}\n\n/** The fill behind the value. `outlined` and `underline` have none. */\nfunction backgroundFor(theme: UiTheme, variant: InputVariant, state: FieldState): string | undefined {\n  switch (variant) {\n    case 'filled':\n      return alpha(theme.palette.action.hover, state.focused ? FILLED_WASH.focused : FILLED_WASH.rest);\n    case 'glass':\n      return alpha(\n        theme.palette.background.paper,\n        state.focused ? INPUT_GLASS.background.focused : INPUT_GLASS.background.rest,\n      );\n    case 'gradient':\n      // The first stop of the web's 135° fill; React Native core has no gradient.\n      return alpha(\n        theme.palette.primary.main,\n        state.focused ? INPUT_GRADIENT.fill.focused : INPUT_GRADIENT.fill.rest,\n      );\n    default:\n      return undefined;\n  }\n}\n\n/** `filled` rounds its top two corners, `underline` none, the rest all four. */\nfunction radiusFor(theme: UiTheme, variant: InputVariant): ViewStyle {\n  if (variant === 'underline') return {};\n  if (variant === 'filled') {\n    return { borderTopLeftRadius: theme.radius.md, borderTopRightRadius: theme.radius.md };\n  }\n  return { borderRadius: theme.radius.md };\n}\n\n/** The border as React Native writes it: a width per side, one colour, one style. */\nfunction borderStyle(variant: InputVariant, width: number, color: string, state: FieldState): ViewStyle {\n  // MUI draws a disabled `filled` or `standard` underline dotted.\n  const style: ViewStyle['borderStyle'] =\n    state.disabled && BORDER_SIDES[variant] === 'bottom' ? 'dotted' : 'solid';\n  const sides: ViewStyle =\n    BORDER_SIDES[variant] === 'bottom' ? { borderBottomWidth: width } : { borderWidth: width };\n  return { ...sides, borderColor: color, borderStyle: style };\n}\n\nexport interface FieldLook {\n  /** The row the border is drawn on: fill, edges, corners and horizontal inset. */\n  box: ViewStyle;\n  /** The `TextInput` itself: type, ink and the vertical inset. */\n  value: TextStyle;\n  placeholder: string;\n}\n\n/**\n * The field, in absolute numbers.\n *\n * The horizontal inset sits on the ROW rather than on the `TextInput`, which is\n * what MUI does the moment an adornment appears (`paddingLeft: 14` moves to the\n * input root and the input's own goes to 0) — so one rule serves a field with\n * adornments and one without.\n *\n * Where the web's border costs no height, the inset gives the border back its\n * width, so the box is the height MUI draws (56px medium, 40px small) and the\n * value does not shift by a pixel when the focused border thickens.\n */\nexport function fieldLook(\n  theme: UiTheme,\n  variant: InputVariant,\n  size: SizeValue,\n  state: FieldState,\n): FieldLook {\n  const padding = inputPadding(variant, size);\n  const width = borderWidthFor(variant, state.focused);\n  const inset = BORDER_IS_FREE[variant] ? width : 0;\n  const sides = BORDER_SIDES[variant];\n  const horizontal = sides === 'all' ? inset : 0;\n\n  return {\n    box: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      paddingLeft: padding.left - horizontal,\n      paddingRight: padding.right - horizontal,\n      backgroundColor: backgroundFor(theme, variant, state),\n      ...radiusFor(theme, variant),\n      ...borderStyle(variant, width, borderColorFor(theme, variant, state), state),\n    },\n    value: {\n      flex: 1,\n      minWidth: 0,\n      fontFamily: theme.typography.fontFamily,\n      fontSize: INPUT_FONT_SIZE,\n      lineHeight: INPUT_LINE_HEIGHT,\n      color: state.disabled ? theme.palette.text.disabled : theme.palette.text.primary,\n      paddingTop: padding.top - (sides === 'all' ? inset : 0),\n      paddingBottom: padding.bottom - inset,\n      paddingHorizontal: 0,\n    },\n    placeholder: placeholderInk(theme),\n  };\n}\n\n/**\n * The label's ink. MUI's `FormLabel` is `text.secondary`, the focus colour is\n * the palette's `main`, and error and disabled are declared after it and win.\n */\nexport function labelStyle(theme: UiTheme, variant: InputVariant, size: SizeValue, state: FieldState): TextStyle {\n  const ink = state.disabled\n    ? theme.palette.text.disabled\n    : state.error\n      ? theme.palette.danger.main\n      : state.focused\n        ? theme.palette.primary.main\n        : theme.palette.text.secondary;\n\n  return {\n    color: ink,\n    fontFamily: theme.typography.fontFamily,\n    fontSize: INPUT_FONT_SIZE * INPUT_LABEL.scale,\n    marginBottom: INPUT_LABEL.gap,\n    // Aligned with the value it names: the web's floating label and the input\n    // share one left inset (14px outlined, 12px filled, 0 standard).\n    marginLeft: inputPadding(variant, size).left,\n  };\n}\n\n/**\n * `FormHelperText`: caption type, 3px below the field, inset 14px when\n * contained — and 4px below at MUI's `small` density, which `INPUT_MUI_SIZE`\n * selects for `xs` and `sm` (`FormHelperText.js`: `marginTop: 3`, then a\n * `size: 'small'` variant raising it to 4).\n */\nexport function helperStyle(\n  theme: UiTheme,\n  variant: InputVariant,\n  size: SizeValue,\n  state: FieldState,\n): TextStyle {\n  return {\n    color: state.disabled\n      ? theme.palette.text.disabled\n      : state.error\n        ? theme.palette.danger.main\n        : theme.palette.text.secondary,\n    fontFamily: theme.typography.fontFamily,\n    fontSize: HELPER_TEXT.fontSize,\n    lineHeight: HELPER_TEXT.fontSize * HELPER_TEXT.lineHeight,\n    marginTop: INPUT_MUI_SIZE[size] === 'small' ? HELPER_TEXT.marginTopSmall : HELPER_TEXT.marginTop,\n    marginHorizontal: variant === 'underline' ? 0 : HELPER_TEXT.marginHorizontal,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqCO,IAAM,gBAAgB,CAAC,YAA2C;AACvE,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAGO,IAAM,iBAAkD;AAAA,EAC7D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAWO,IAAM,uBAA6F;AAAA,EACxG,IAAI,EAAE,UAAU,GAAG,YAAY,GAAG;AAAA,EAClC,IAAI,EAAE,UAAU,IAAI,YAAY,GAAG;AAAA,EACnC,IAAI,EAAE,UAAU,IAAI,YAAY,GAAG;AACrC;AAOO,IAAM,oBAA+E;AAAA,EAC1F,UAAU;AAAA,IACR,OAAO,EAAE,KAAK,KAAK,OAAO,IAAI,QAAQ,KAAK,MAAM,GAAG;AAAA,IACpD,QAAQ,EAAE,KAAK,MAAM,OAAO,IAAI,QAAQ,MAAM,MAAM,GAAG;AAAA,EACzD;AAAA,EACA,QAAQ;AAAA,IACN,OAAO,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,GAAG,MAAM,GAAG;AAAA,IACjD,QAAQ,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,GAAG,MAAM,GAAG;AAAA,EACpD;AAAA,EACA,UAAU;AAAA,IACR,OAAO,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EAAE;AAAA,IAC9C,QAAQ,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EAAE;AAAA,EACjD;AACF;AAGO,SAAS,aAAa,SAAuB,MAA6B;AAC/E,QAAM,WAAW,qBAAqB,IAAI;AAC1C,MAAI,UAAU;AACZ,WAAO;AAAA,MACL,KAAK,SAAS;AAAA,MACd,OAAO,SAAS;AAAA,MAChB,QAAQ,SAAS;AAAA,MACjB,MAAM,SAAS;AAAA,IACjB;AAAA,EACF;AACA,SAAO,kBAAkB,cAAc,OAAO,CAAC,EAAE,eAAe,IAAI,CAAC;AACvE;AAGO,IAAM,kBAAkB;AACxB,IAAM,oBAAoB;AAG1B,IAAM,sBAAsB,EAAE,OAAO,MAAM,MAAM,IAAI;AAUrD,SAAS,eAAe,OAAwB;AACrD,QAAM,UAAU,MAAM,SAAS,SAAS,oBAAoB,OAAO,oBAAoB;AACvF,QAAM,EAAE,MAAM,OAAO,IAAI,eAAe,MAAM,QAAQ,KAAK,OAAO;AAClE,QAAM,CAAC,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC,IAAI;AACpD,SAAO,eAAe;AAAA,IACpB,MAAM,KAAK,WAAW,KAAK,IAAI,SAAS;AAAA,IACxC,QAAQ,CAAC,OAAO,QAAQ,OAAO,MAAM,OAAO;AAAA,EAC9C,CAAC;AACH;AAGO,IAAM,eAAe,EAAE,MAAM,GAAG,SAAS,EAAE;AAG3C,IAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AACR;AAUO,IAAM,cAAc,EAAE,OAAO,MAAM,KAAK,EAAE;AAG1C,IAAM,cAAc;AAAA,EACzB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,kBAAkB;AACpB;AAGO,IAAM,gBAAgB;AAGtB,IAAM,gBAAgB,EAAE,SAAS,KAAK,aAAa,GAAG;AAGtD,IAAM,aAAa;AAAA,EACxB,MAAM,EAAE,MAAM,IAAI,OAAO,IAAI;AAAA,EAC7B,SAAS,EAAE,MAAM,IAAI,OAAO,IAAI;AAClC;AAGO,IAAM,cAAc;AAAA,EACzB,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,QAAQ;AACV;AAWO,IAAM,cAAc;AAAA,EACzB,YAAY,EAAE,MAAM,KAAK,OAAO,MAAM,SAAS,IAAI;AAAA,EACnD,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,WAAW,EAAE,OAAO,GAAG,OAAO,IAAI;AACpC;AAGO,IAAM,iBAAiB;AAAA,EAC5B,UAAU;AAAA,EACV,MAAM,EAAE,MAAM,KAAK,OAAO,MAAM,SAAS,IAAI;AAAA,EAC7C,aAAa;AACf;AAGO,IAAM,cAAc,EAAE,MAAM,MAAM,OAAO,MAAM,SAAS,KAAK;AAWpE,IAAM,YAAY,CAAC,SAAoC;AACrD,QAAM,WAAW,qBAAqB,IAAI;AAC1C,SAAO;AAAA,IACL,MAAM,eAAe,IAAI;AAAA,IACzB,GAAI,WACA,EAAE,IAAI,EAAE,yBAAyB,EAAE,SAAS,GAAG,SAAS,QAAQ,MAAM,SAAS,UAAU,KAAK,EAAE,EAAE,IAClG,CAAC;AAAA,EACP;AACF;AAEO,IAAM,WAA8C,OAAO;AAAA,EAChE,YAAY,IAAI,CAAC,SAAS,CAAC,MAAM,UAAU,IAAI,CAAC,CAAC;AACnD;;;ACpOA,YAAY,WAAW;AACvB,SAAS,UAAU,QAAQ,UAAU,kBAAkB;AAwCnD;AAzBG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIsB;AACpB,QAAM,WAAiB,aAAO,IAAI,SAAS,MAAM,CAAC,CAAC,EAAE;AAErD,EAAM,gBAAU,MAAM;AACpB,UAAM,OAAO,SAAS;AAAA,MACpB,SAAS,OAAO,UAAU;AAAA,QACxB,SAAS;AAAA,QACT,UAAU,YAAY;AAAA,QACtB,QAAQ,OAAO,IAAI,OAAO,IAAI;AAAA,QAC9B,iBAAiB,SAAS,OAAO;AAAA,MACnC,CAAC;AAAA,IACH;AACA,SAAK,MAAM;AACX,WAAO,MAAM,KAAK,KAAK;AAAA,EACzB,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACC;AAAA,MACA,eAAW;AAAA,MACX,OAAO;AAAA,QACL,OAAO;AAAA,QACP;AAAA,UACE,cAAc;AAAA,UACd,iBAAiB;AAAA,UACjB,SAAS,SAAS,YAAY;AAAA,YAC5B,YAAY,CAAC,GAAG,KAAK,CAAC;AAAA,YACtB,aAAa,CAAC,YAAY,SAAS,GAAG,CAAC;AAAA,UACzC,CAAC;AAAA,UACD,WAAW;AAAA,YACT,EAAE,YAAY,CAAC,YAAY,SAAS,EAAE;AAAA,YACtC;AAAA,cACE,OAAO,SAAS,YAAY;AAAA,gBAC1B,YAAY,CAAC,GAAG,KAAK,CAAC;AAAA,gBACtB,aAAa,CAAC,GAAG,IAAI,YAAY,SAAS,YAAY,QAAQ,CAAC;AAAA,cACjE,CAAC;AAAA,YACH;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,OAAO;AAAA,IACL,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ,YAAY;AAAA,IACpB,eAAe;AAAA,EACjB;AACF,CAAC;;;AC/CM,IAAM,kBAAkB;AAG/B,IAAM,OAAO;AACb,IAAM,YAAY;AAGlB,SAAS,SAAS,QAAkD;AAClE,QAAM,aAAa,eAAe,MAAM;AACxC,QAAM,MAAM,WAAW,KAAK,WAAW,KAAK,IAAI,eAAe,SAAS,MAAM,CAAC,IAAI;AACnF,QAAM,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,IAAI;AACzB,SAAO,CAAC,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AACxC;AASA,SAAS,QAAQ,QAAgB,SAAyB;AACxD,QAAM,CAAC,GAAG,GAAG,GAAGA,MAAK,IAAI,SAAS,MAAM;AACxC,MAAIA,UAAS,EAAG,QAAO,eAAe,EAAE,MAAM,OAAO,QAAQ,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC;AAExE,QAAM,CAAC,OAAO,OAAO,KAAK,IAAI,SAAS,OAAO;AAC9C,QAAM,QAAQ,CAAC,IAAY,OAAuB,KAAK,MAAMA,SAAQ,MAAM,IAAIA,UAAS,EAAE;AAC1F,SAAO,eAAe;AAAA,IACpB,MAAM;AAAA,IACN,QAAQ,CAAC,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC;AAAA,EAC5D,CAAC;AACH;AAOO,SAAS,iBAAiB,SAAiB,SAAyB;AACzE,QAAM,SAAS,QAAQ,SAAS,SAAS;AACzC,QAAM,OAAO,QAAQ,SAAS,MAAM;AACpC,MAAI,iBAAiB,MAAM,MAAM,KAAK,gBAAiB,QAAO;AAK9D,QAAM,OAAO,aAAa,MAAM,IAAI,MAAM,SAAS;AACnD,WAAS,OAAO,GAAG,QAAQ,WAAW,QAAQ,GAAG;AAG/C,UAAM,YAAY,KAAK,MAAM,OAAO,IAAI;AACxC,QAAI,iBAAiB,WAAW,MAAM,KAAK,gBAAiB,QAAO;AAAA,EACrE;AAGA,SAAO,aAAa,MAAM,IAAI,MAAM,YAAY;AAClD;;;AClDA,IAAM,eAAuD;AAAA,EAC3D,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW;AACb;AAWA,IAAM,iBAAgD;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AACZ;AAOO,SAAS,eAAe,SAAuB,SAA0B;AAC9E,MAAI,YAAY,WAAY,QAAO,eAAe;AAClD,MAAI,YAAY,QAAS,QAAO,aAAa;AAC7C,SAAO,UAAU,aAAa,UAAU,aAAa;AACvD;AAOO,SAAS,sBAAsB,SAAuB,SAA0B;AACrF,MAAI,aAAa,OAAO,MAAM,SAAS,CAAC,eAAe,OAAO,EAAG,QAAO;AACxE,SAAO,eAAe,SAAS,OAAO;AACxC;AAOA,SAAS,eAAe,OAAgB,SAAuB,OAA2B;AACxF,MAAI,MAAM,SAAU,QAAO,MAAM,QAAQ,OAAO;AAChD,MAAI,MAAM,MAAO,QAAO,MAAM,QAAQ,OAAO;AAC7C,MAAI,YAAY,YAAY;AAC1B,WAAO,MAAM,UAAU,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,QAAQ;AAAA,EAC5E;AACA,MAAI,MAAM,QAAS,QAAO,MAAM,QAAQ,QAAQ;AAChD,MAAI,YAAY,UAAU;AACxB,WAAO,MAAM,SAAS,SAAS,gBAAgB,OAAO,gBAAgB;AAAA,EACxE;AACA,SAAO,iBAAiB,MAAM,QAAQ,SAAS,MAAM,QAAQ,WAAW,KAAK;AAC/E;AAGA,SAAS,cAAc,OAAgB,SAAuB,OAAuC;AACnG,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,MAAM,MAAM,QAAQ,OAAO,OAAO,MAAM,UAAU,YAAY,UAAU,YAAY,IAAI;AAAA,IACjG,KAAK;AACH,aAAO;AAAA,QACL,MAAM,QAAQ,WAAW;AAAA,QACzB,MAAM,UAAU,YAAY,WAAW,UAAU,YAAY,WAAW;AAAA,MAC1E;AAAA,IACF,KAAK;AAEH,aAAO;AAAA,QACL,MAAM,QAAQ,QAAQ;AAAA,QACtB,MAAM,UAAU,eAAe,KAAK,UAAU,eAAe,KAAK;AAAA,MACpE;AAAA,IACF;AACE,aAAO;AAAA,EACX;AACF;AAGA,SAAS,UAAU,OAAgB,SAAkC;AACnE,MAAI,YAAY,YAAa,QAAO,CAAC;AACrC,MAAI,YAAY,UAAU;AACxB,WAAO,EAAE,qBAAqB,MAAM,OAAO,IAAI,sBAAsB,MAAM,OAAO,GAAG;AAAA,EACvF;AACA,SAAO,EAAE,cAAc,MAAM,OAAO,GAAG;AACzC;AAGA,SAAS,YAAY,SAAuB,OAAe,OAAe,OAA8B;AAEtG,QAAM,QACJ,MAAM,YAAY,aAAa,OAAO,MAAM,WAAW,WAAW;AACpE,QAAM,QACJ,aAAa,OAAO,MAAM,WAAW,EAAE,mBAAmB,MAAM,IAAI,EAAE,aAAa,MAAM;AAC3F,SAAO,EAAE,GAAG,OAAO,aAAa,OAAO,aAAa,MAAM;AAC5D;AAsBO,SAAS,UACd,OACA,SACA,MACA,OACW;AACX,QAAM,UAAU,aAAa,SAAS,IAAI;AAC1C,QAAM,QAAQ,eAAe,SAAS,MAAM,OAAO;AACnD,QAAM,QAAQ,eAAe,OAAO,IAAI,QAAQ;AAChD,QAAM,QAAQ,aAAa,OAAO;AAClC,QAAM,aAAa,UAAU,QAAQ,QAAQ;AAE7C,SAAO;AAAA,IACL,KAAK;AAAA,MACH,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,aAAa,QAAQ,OAAO;AAAA,MAC5B,cAAc,QAAQ,QAAQ;AAAA,MAC9B,iBAAiB,cAAc,OAAO,SAAS,KAAK;AAAA,MACpD,GAAG,UAAU,OAAO,OAAO;AAAA,MAC3B,GAAG,YAAY,SAAS,OAAO,eAAe,OAAO,SAAS,KAAK,GAAG,KAAK;AAAA,IAC7E;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,YAAY,MAAM,WAAW;AAAA,MAC7B,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,OAAO,MAAM,WAAW,MAAM,QAAQ,KAAK,WAAW,MAAM,QAAQ,KAAK;AAAA,MACzE,YAAY,QAAQ,OAAO,UAAU,QAAQ,QAAQ;AAAA,MACrD,eAAe,QAAQ,SAAS;AAAA,MAChC,mBAAmB;AAAA,IACrB;AAAA,IACA,aAAa,eAAe,KAAK;AAAA,EACnC;AACF;AAMO,SAAS,WAAW,OAAgB,SAAuB,MAAiB,OAA8B;AAC/G,QAAM,MAAM,MAAM,WACd,MAAM,QAAQ,KAAK,WACnB,MAAM,QACJ,MAAM,QAAQ,OAAO,OACrB,MAAM,UACJ,MAAM,QAAQ,QAAQ,OACtB,MAAM,QAAQ,KAAK;AAE3B,SAAO;AAAA,IACL,OAAO;AAAA,IACP,YAAY,MAAM,WAAW;AAAA,IAC7B,UAAU,kBAAkB,YAAY;AAAA,IACxC,cAAc,YAAY;AAAA;AAAA;AAAA,IAG1B,YAAY,aAAa,SAAS,IAAI,EAAE;AAAA,EAC1C;AACF;AAQO,SAAS,YACd,OACA,SACA,MACA,OACW;AACX,SAAO;AAAA,IACL,OAAO,MAAM,WACT,MAAM,QAAQ,KAAK,WACnB,MAAM,QACJ,MAAM,QAAQ,OAAO,OACrB,MAAM,QAAQ,KAAK;AAAA,IACzB,YAAY,MAAM,WAAW;AAAA,IAC7B,UAAU,YAAY;AAAA,IACtB,YAAY,YAAY,WAAW,YAAY;AAAA,IAC/C,WAAW,eAAe,IAAI,MAAM,UAAU,YAAY,iBAAiB,YAAY;AAAA,IACvF,kBAAkB,YAAY,cAAc,IAAI,YAAY;AAAA,EAC9D;AACF;","names":["alpha"]}

package/dist/native/data-display/Alert.js

@@ -1,20 +1,20 @@
-import {
-  webAria
-} from "../chunks/chunk-4NK5ZQZ3.js";
-import {
-  Icon
-} from "../chunks/chunk-YQGNMAJN.js";
 import {
   muiTypeStyle
-} from "../chunks/chunk-V4DQTC5L.js";
-import "../chunks/chunk-5WLOVHKK.js";
+} from "../chunks/chunk-HSIND52T.js";
+import {
+  webAria
+} from "../chunks/chunk-T6BJPP3E.js";
 import {
   renderTextChildren
 } from "../chunks/chunk-5GJ5OG5R.js";
+import {
+  Icon
+} from "../chunks/chunk-D4EYAXNG.js";
 import {
   resolveTestId,
   withoutTestIdProps
-} from "../chunks/chunk-M4DTJDWU.js";
+} from "../chunks/chunk-QZAUOHDQ.js";
+import "../chunks/chunk-5WLOVHKK.js";
 import {
   useUiTheme
 } from "../chunks/chunk-YTHR4Y5P.js";

package/dist/native/data-display/Avatar.js

@@ -0,0 +1,451 @@
+import {
+  useLoopedProgress
+} from "../chunks/chunk-MLQIOKQZ.js";
+import {
+  renderTextChildren
+} from "../chunks/chunk-5GJ5OG5R.js";
+import {
+  Icon
+} from "../chunks/chunk-D4EYAXNG.js";
+import "../chunks/chunk-QZAUOHDQ.js";
+import "../chunks/chunk-5WLOVHKK.js";
+import {
+  useUiTheme
+} from "../chunks/chunk-YTHR4Y5P.js";
+import {
+  alpha
+} from "../chunks/chunk-P3PL4WBO.js";
+
+// src/components/data-display/Avatar/Avatar.native.tsx
+import * as React2 from "react";
+import { Animated as Animated2, StyleSheet as StyleSheet2, View as View2 } from "react-native";
+
+// src/components/data-display/Avatar/Avatar.helpers.ts
+var AVATAR_DEFAULTS = {
+  variant: "circle",
+  size: "md",
+  glow: false,
+  pulse: false,
+  bordered: false,
+  color: "primary",
+  loading: false,
+  interactive: false,
+  showFallbackOnError: true,
+  animationDelay: 0
+};
+function pickAvatarContent(a) {
+  if (a.imageError && a.showFallbackOnError) {
+    if (a.hasFallback) return "fallback";
+    return a.hasIcon ? "icon" : "broken";
+  }
+  if (a.hasChildren) return "children";
+  if (a.hasFallback) return "fallback";
+  return a.hasIcon ? "icon" : "default";
+}
+var contentTypeOf = (pick) => pick === "broken" ? "icon" : pick;
+var avatarTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : void 0;
+
+// src/components/data-display/Avatar/Avatar.metrics.ts
+var AVATAR_SIZES = {
+  xs: { box: 24, fontSize: 12 },
+  sm: { box: 32, fontSize: 14 },
+  md: { box: 40, fontSize: 16 },
+  lg: { box: 48, fontSize: 18 },
+  xl: { box: 64, fontSize: 24 },
+  xxl: { box: 80, fontSize: 32 }
+};
+var ROUNDED_RADIUS_UNITS = 1;
+var BORDER_WIDTH = 2;
+var BORDER_HALO_ALPHA = 0.2;
+var GLOW = { blur: 20, spread: 5, alpha: 0.4, brightness: 1.05 };
+var PULSE = { durationMs: 2e3, alpha: 0.3, spread: 10 };
+var LOADING_OVERLAY = { paperAlpha: 0.7, blur: 2 };
+var SPINNER = {
+  /** A share of the avatar's box. */
+  scale: 0.4,
+  ringWidth: 2,
+  trackAlpha: 0.3,
+  durationMs: 800
+};
+var STATUS_DOT = { scale: 0.2, min: 8, borderWidth: 2, anchor: 0.14 };
+var GLYPH_SIZE = 24;
+var FADE_MS = 300;
+var GROUP_OVERLAP = 8;
+var GROUP_MAX = 4;
+function statusColor(theme, status) {
+  if (status === "online") return theme.palette.success.main;
+  if (status === "away") return theme.palette.warning.main;
+  if (status === "busy") return theme.palette.danger.main;
+  return theme.palette.grey[500];
+}
+function avatarAccent(theme, color) {
+  if (color === "neutral") return { main: theme.palette.grey[700], contrastText: "#fff" };
+  const accent = theme.palette[color];
+  return { main: accent.main, contrastText: accent.contrastText || "#fff" };
+}
+
+// src/components/data-display/Avatar/Avatar.look.native.ts
+function avatarRadius(theme, variant, box) {
+  if (variant === "square") return 0;
+  if (variant === "rounded") return theme.spacing(ROUNDED_RADIUS_UNITS);
+  return box / 2;
+}
+function avatarSurfaceStyle(theme, a) {
+  const { box } = AVATAR_SIZES[a.size];
+  const accent = avatarAccent(theme, a.color);
+  return {
+    width: box,
+    height: box,
+    borderRadius: avatarRadius(theme, a.variant, box),
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    backgroundColor: a.hasError ? theme.palette.danger.main : accent.main,
+    cursor: a.interactive ? "pointer" : "auto",
+    ...a.bordered ? {
+      borderWidth: BORDER_WIDTH,
+      borderColor: theme.palette.background.paper,
+      boxShadow: `0 0 0 1px ${alpha(theme.palette.divider, BORDER_HALO_ALPHA)}`
+    } : {},
+    ...a.glow ? { boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(accent.main, GLOW.alpha)}` } : {}
+  };
+}
+function avatarTextStyle(theme, size, color, hasError) {
+  const accent = avatarAccent(theme, color);
+  return {
+    fontFamily: theme.typography.fontFamily,
+    fontSize: AVATAR_SIZES[size].fontSize,
+    textAlign: "center",
+    color: hasError ? theme.palette.danger.contrastText : accent.contrastText
+  };
+}
+function avatarLoadingStyle(theme, size, radius) {
+  const { box } = AVATAR_SIZES[size];
+  return {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: box,
+    height: box,
+    borderRadius: radius,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: alpha(theme.palette.background.paper, LOADING_OVERLAY.paperAlpha)
+  };
+}
+function avatarSpinnerStyle(theme, size) {
+  const ring = AVATAR_SIZES[size].box * SPINNER.scale;
+  return {
+    width: ring,
+    height: ring,
+    borderRadius: ring / 2,
+    borderWidth: SPINNER.ringWidth,
+    borderColor: alpha(theme.palette.primary.main, SPINNER.trackAlpha),
+    borderTopColor: theme.palette.primary.main
+  };
+}
+function avatarStatusDotStyle(theme, size, color) {
+  const { box } = AVATAR_SIZES[size];
+  const dot = Math.max(STATUS_DOT.min, box * STATUS_DOT.scale);
+  const inset = box * STATUS_DOT.anchor - dot / 2;
+  return {
+    position: "absolute",
+    right: inset,
+    bottom: inset,
+    width: dot,
+    height: dot,
+    borderRadius: dot / 2,
+    backgroundColor: color,
+    borderWidth: STATUS_DOT.borderWidth,
+    borderColor: theme.palette.background.paper
+  };
+}
+
+// src/components/data-display/Avatar/Avatar.parts.native.tsx
+import * as React from "react";
+import {
+  Animated,
+  Easing,
+  Image,
+  Platform,
+  Pressable,
+  StyleSheet,
+  View
+} from "react-native";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var nativeDriver = Platform.OS !== "web";
+function useFadeIn(animationDelay) {
+  const opacity = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    const animation = Animated.sequence([
+      Animated.delay(animationDelay),
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: FADE_MS,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: nativeDriver
+      })
+    ]);
+    animation.start();
+    return () => animation.stop();
+  }, [animationDelay, opacity]);
+  return opacity;
+}
+function useImageState(src, onError) {
+  const [imageError, setImageError] = React.useState(false);
+  const [imageLoading, setImageLoading] = React.useState(Boolean(src));
+  React.useEffect(() => {
+    setImageError(false);
+    setImageLoading(Boolean(src));
+  }, [src]);
+  const handleError = React.useCallback(() => {
+    setImageError(true);
+    setImageLoading(false);
+    onError?.();
+  }, [onError]);
+  return {
+    imageError,
+    imageLoading,
+    handleError,
+    handleLoad: React.useCallback(() => setImageLoading(false), [])
+  };
+}
+function contentNode({ pick, children, fallback, icon, ink }) {
+  if (pick === "children") return children;
+  if (pick === "fallback") return fallback;
+  if (pick === "icon") return icon;
+  return /* @__PURE__ */ jsx(Icon, { name: pick === "broken" ? "BrokenImage" : "Person", size: GLYPH_SIZE, color: ink });
+}
+function PulseRing({ size, variant, color }) {
+  const theme = useUiTheme();
+  const progress = useLoopedProgress(true, { durationMs: PULSE.durationMs });
+  const box = AVATAR_SIZES[size].box;
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      "aria-hidden": true,
+      style: [
+        StyleSheet.absoluteFill,
+        {
+          pointerEvents: "none",
+          borderRadius: avatarRadius(theme, variant, box),
+          backgroundColor: color,
+          opacity: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [PULSE.alpha, 0, 0] }),
+          transform: [
+            {
+              scale: progress.interpolate({
+                inputRange: [0, 0.7, 1],
+                outputRange: [1, (box + PULSE.spread * 2) / box, 1]
+              })
+            }
+          ]
+        }
+      ]
+    }
+  );
+}
+function Spinner({ size, testID }) {
+  const theme = useUiTheme();
+  const progress = useLoopedProgress(true, { durationMs: SPINNER.durationMs });
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      testID,
+      style: [
+        avatarSpinnerStyle(theme, size),
+        {
+          transform: [
+            { rotate: progress.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }
+          ]
+        }
+      ]
+    }
+  );
+}
+function SurfaceInner(a, theme) {
+  if (a.imgSrc && !a.imageError) {
+    return /* @__PURE__ */ jsx(
+      Image,
+      {
+        source: { uri: a.imgSrc },
+        "aria-label": a.alt,
+        onError: a.onImageError,
+        onLoad: a.onImageLoad,
+        style: StyleSheet.absoluteFill,
+        accessibilityIgnoresInvertColors: true
+      }
+    );
+  }
+  if (a.showSpinner) return null;
+  return /* @__PURE__ */ jsx(View, { testID: a.idFor(a.contentType), children: renderTextChildren(a.content, avatarTextStyle(theme, a.size, a.color, a.imageError), 1) });
+}
+function AvatarSurface(a) {
+  const theme = useUiTheme();
+  const box = AVATAR_SIZES[a.size].box;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        ref: a.forwardedRef,
+        testID: a.testID,
+        role: a.clickable ? "button" : void 0,
+        "aria-label": a.ariaLabel,
+        tabIndex: a.clickable ? 0 : -1,
+        onPress: a.clickable ? a.onPress : void 0,
+        style: [
+          avatarSurfaceStyle(theme, {
+            variant: a.variant,
+            size: a.size,
+            color: a.color,
+            glow: a.glow,
+            bordered: a.bordered,
+            interactive: a.clickable,
+            hasError: a.imageError
+          }),
+          a.style
+        ],
+        ...a.rest,
+        children: SurfaceInner(a, theme)
+      }
+    ),
+    a.showSpinner ? /* @__PURE__ */ jsx(
+      View,
+      {
+        testID: a.idFor("loading"),
+        style: avatarLoadingStyle(theme, a.size, avatarRadius(theme, a.variant, box)),
+        children: /* @__PURE__ */ jsx(Spinner, { size: a.size, testID: a.idFor("loading-spinner") })
+      }
+    ) : null
+  ] });
+}
+
+// src/components/data-display/Avatar/Avatar.native.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function useAvatarModel(raw) {
+  const {
+    variant,
+    size,
+    glow,
+    pulse,
+    status,
+    fallback,
+    icon,
+    bordered,
+    color,
+    src,
+    alt,
+    children,
+    loading,
+    onError,
+    onClick,
+    onPress,
+    interactive,
+    showFallbackOnError,
+    animationDelay,
+    dataTestId,
+    testID,
+    style,
+    ...rest
+  } = { ...AVATAR_DEFAULTS, ...raw };
+  const theme = useUiTheme();
+  const opacity = useFadeIn(animationDelay);
+  const { imageError, imageLoading, handleError, handleLoad } = useImageState(src, onError);
+  const pick = pickAvatarContent({
+    hasChildren: Boolean(children),
+    hasFallback: Boolean(fallback),
+    hasIcon: Boolean(icon),
+    imageError,
+    showFallbackOnError
+  });
+  const avatarId = testID ?? dataTestId;
+  const idFor = avatarTestId(avatarId);
+  return {
+    variant,
+    size,
+    color,
+    pulse,
+    status,
+    opacity,
+    badgeTestID: idFor("badge"),
+    args: {
+      variant,
+      size,
+      color,
+      glow,
+      bordered,
+      clickable: interactive || Boolean(onClick ?? onPress),
+      imageError,
+      showSpinner: loading || imageLoading,
+      imgSrc: imageError ? void 0 : src,
+      alt,
+      ariaLabel: alt || "Avatar",
+      content: contentNode({
+        pick,
+        children,
+        fallback,
+        icon,
+        ink: avatarAccent(theme, color).contrastText
+      }),
+      contentType: contentTypeOf(pick),
+      testID: avatarId,
+      idFor,
+      style,
+      onPress: (event) => {
+        onClick?.();
+        onPress?.(event);
+      },
+      onImageError: handleError,
+      onImageLoad: handleLoad,
+      rest
+    }
+  };
+}
+var Avatar = React2.forwardRef((raw, ref) => {
+  const theme = useUiTheme();
+  const { args, variant, size, color, pulse, status, opacity, badgeTestID } = useAvatarModel(raw);
+  const surface = /* @__PURE__ */ jsxs2(Animated2.View, { style: [styles.relative, { opacity }], children: [
+    pulse ? /* @__PURE__ */ jsx2(PulseRing, { size, variant, color: avatarAccent(theme, color).main }) : null,
+    /* @__PURE__ */ jsx2(AvatarSurface, { ...args, forwardedRef: ref })
+  ] });
+  if (variant !== "status" || !status) return surface;
+  return /* @__PURE__ */ jsxs2(View2, { testID: badgeTestID, style: styles.relative, children: [
+    surface,
+    /* @__PURE__ */ jsx2(View2, { style: avatarStatusDotStyle(theme, size, statusColor(theme, status)) })
+  ] });
+});
+Avatar.displayName = "Avatar";
+var AvatarGroup = ({
+  children,
+  max = GROUP_MAX,
+  overlap = GROUP_OVERLAP,
+  dataTestId,
+  testID,
+  style
+}) => {
+  const all = React2.Children.toArray(children);
+  const visible = max ? all.slice(0, max) : all;
+  const remaining = all.length - visible.length;
+  const groupId = testID ?? dataTestId;
+  return /* @__PURE__ */ jsxs2(View2, { testID: groupId, style: [styles.group, style], children: [
+    visible.map((child, index) => /* @__PURE__ */ jsx2(View2, { style: index === 0 ? null : { marginLeft: -overlap }, children: child }, `avatar-${index}`)),
+    remaining > 0 ? /* @__PURE__ */ jsx2(View2, { style: { marginLeft: -overlap }, children: /* @__PURE__ */ jsx2(
+      Avatar,
+      {
+        color: "neutral",
+        fallback: `+${remaining}`,
+        bordered: true,
+        dataTestId: groupId ? `${groupId}-overflow` : void 0
+      }
+    ) }) : null
+  ] });
+};
+AvatarGroup.displayName = "AvatarGroup";
+var styles = StyleSheet2.create({
+  relative: { position: "relative", alignSelf: "flex-start" },
+  group: { flexDirection: "row", alignItems: "center", alignSelf: "flex-start" }
+});
+export {
+  Avatar,
+  AvatarGroup
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/native/data-display/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data-display/Avatar/Avatar.native.tsx","../../../src/components/data-display/Avatar/Avatar.helpers.ts","../../../src/components/data-display/Avatar/Avatar.metrics.ts","../../../src/components/data-display/Avatar/Avatar.look.native.ts","../../../src/components/data-display/Avatar/Avatar.parts.native.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Animated, StyleSheet, View } from 'react-native';\n\nimport type { AvatarSize, AvatarVariant } from './Avatar.base';\nimport {\n  AVATAR_DEFAULTS,\n  avatarTestId,\n  contentTypeOf,\n  pickAvatarContent,\n} from './Avatar.helpers';\nimport { avatarStatusDotStyle } from './Avatar.look.native';\nimport { GROUP_MAX, GROUP_OVERLAP, avatarAccent, statusColor } from './Avatar.metrics';\nimport {\n  AvatarSurface,\n  PulseRing,\n  contentNode,\n  useFadeIn,\n  useImageState,\n  type SurfaceArgs,\n} from './Avatar.parts.native';\nimport type { AvatarGroupProps, AvatarProps } from './Avatar.types.native';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\ninterface AvatarModel {\n  args: SurfaceArgs;\n  variant: AvatarVariant;\n  size: AvatarSize;\n  color: ColorValue;\n  pulse: boolean;\n  status?: AvatarProps['status'];\n  opacity: Animated.Value;\n  badgeTestID?: string;\n}\n\n/** Normalises the props and derives everything the surface needs, as the web's model does. */\nfunction useAvatarModel(raw: AvatarProps): AvatarModel {\n  const {\n    variant,\n    size,\n    glow,\n    pulse,\n    status,\n    fallback,\n    icon,\n    bordered,\n    color,\n    src,\n    alt,\n    children,\n    loading,\n    onError,\n    onClick,\n    onPress,\n    interactive,\n    showFallbackOnError,\n    animationDelay,\n    dataTestId,\n    testID,\n    style,\n    ...rest\n  } = { ...AVATAR_DEFAULTS, ...raw };\n  const theme = useUiTheme();\n  const opacity = useFadeIn(animationDelay);\n  const { imageError, imageLoading, handleError, handleLoad } = useImageState(src, onError);\n  const pick = pickAvatarContent({\n    hasChildren: Boolean(children),\n    hasFallback: Boolean(fallback),\n    hasIcon: Boolean(icon),\n    imageError,\n    showFallbackOnError,\n  });\n  const avatarId = testID ?? dataTestId;\n  const idFor = avatarTestId(avatarId);\n\n  return {\n    variant,\n    size,\n    color,\n    pulse,\n    status,\n    opacity,\n    badgeTestID: idFor('badge'),\n    args: {\n      variant,\n      size,\n      color,\n      glow,\n      bordered,\n      clickable: interactive || Boolean(onClick ?? onPress),\n      imageError,\n      showSpinner: loading || imageLoading,\n      imgSrc: imageError ? undefined : src,\n      alt,\n      ariaLabel: alt || 'Avatar',\n      content: contentNode({\n        pick,\n        children,\n        fallback,\n        icon,\n        ink: avatarAccent(theme, color).contrastText,\n      }),\n      contentType: contentTypeOf(pick),\n      testID: avatarId,\n      idFor,\n      style,\n      onPress: (event) => {\n        onClick?.();\n        onPress?.(event);\n      },\n      onImageError: handleError,\n      onImageLoad: handleLoad,\n      rest,\n    },\n  };\n}\n\n/**\n * The native `Avatar`: MUI's box on a `Pressable`, the portrait as an `Image`,\n * and the status dot as a bordered circle in the corner.\n */\nexport const Avatar = React.forwardRef<View, AvatarProps>((raw, ref) => {\n  const theme = useUiTheme();\n  const { args, variant, size, color, pulse, status, opacity, badgeTestID } = useAvatarModel(raw);\n\n  const surface = (\n    <Animated.View style={[styles.relative, { opacity }]}>\n      {pulse ? (\n        <PulseRing size={size} variant={variant} color={avatarAccent(theme, color).main} />\n      ) : null}\n      <AvatarSurface {...args} forwardedRef={ref} />\n    </Animated.View>\n  );\n\n  if (variant !== 'status' || !status) return surface;\n\n  return (\n    <View testID={badgeTestID} style={styles.relative}>\n      {surface}\n      <View style={avatarStatusDotStyle(theme, size, statusColor(theme, status))} />\n    </View>\n  );\n});\n\nAvatar.displayName = 'Avatar';\n\n/**\n * The native `AvatarGroup`: the same overlap, and the same `+n` avatar past\n * `max`. The web additionally lifts an avatar on hover, which touch has none of.\n */\nexport const AvatarGroup: React.FC<AvatarGroupProps> = ({\n  children,\n  max = GROUP_MAX,\n  overlap = GROUP_OVERLAP,\n  dataTestId,\n  testID,\n  style,\n}) => {\n  const all = React.Children.toArray(children);\n  const visible = max ? all.slice(0, max) : all;\n  const remaining = all.length - visible.length;\n  const groupId = testID ?? dataTestId;\n\n  return (\n    <View testID={groupId} style={[styles.group, style]}>\n      {visible.map((child, index) => (\n        <View key={`avatar-${index}`} style={index === 0 ? null : { marginLeft: -overlap }}>\n          {child}\n        </View>\n      ))}\n      {remaining > 0 ? (\n        <View style={{ marginLeft: -overlap }}>\n          <Avatar\n            color=\"neutral\"\n            fallback={`+${remaining}`}\n            bordered\n            dataTestId={groupId ? `${groupId}-overflow` : undefined}\n          />\n        </View>\n      ) : null}\n    </View>\n  );\n};\n\nAvatarGroup.displayName = 'AvatarGroup';\n\nconst styles = StyleSheet.create({\n  relative: { position: 'relative', alignSelf: 'flex-start' },\n  group: { flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-start' },\n});\n","import type { AvatarBaseProps, ContentType } from './Avatar.base';\n\n/** Applied via a single spread so no per-field default inflates cyclomatic complexity. */\nexport const AVATAR_DEFAULTS = {\n  variant: 'circle',\n  size: 'md',\n  glow: false,\n  pulse: false,\n  bordered: false,\n  color: 'primary',\n  loading: false,\n  interactive: false,\n  showFallbackOnError: true,\n  animationDelay: 0,\n} satisfies Partial<AvatarBaseProps>;\n\n/** What wins the middle of the avatar. `broken` is the icon slot's error glyph. */\nexport type AvatarContentPick = ContentType | 'broken';\n\nexport interface AvatarContentArgs {\n  hasChildren: boolean;\n  hasFallback: boolean;\n  hasIcon: boolean;\n  imageError: boolean;\n  showFallbackOnError: boolean;\n}\n\n/**\n * Pick what renders inside the avatar. On an image error (with fallback\n * enabled) the fallback/icon/broken-image wins; otherwise children → fallback →\n * icon → the default person glyph.\n *\n * The DECISION is shared; each renderer builds its own node from it, because\n * the two draw a glyph with different things.\n */\nexport function pickAvatarContent(a: AvatarContentArgs): AvatarContentPick {\n  if (a.imageError && a.showFallbackOnError) {\n    if (a.hasFallback) return 'fallback';\n    return a.hasIcon ? 'icon' : 'broken';\n  }\n  if (a.hasChildren) return 'children';\n  if (a.hasFallback) return 'fallback';\n  return a.hasIcon ? 'icon' : 'default';\n}\n\n/** The slot id a pick takes; the broken-image glyph shares the icon slot's. */\nexport const contentTypeOf = (pick: AvatarContentPick): ContentType =>\n  pick === 'broken' ? 'icon' : pick;\n\n/** `${dataTestId}-loading`, or nothing at all when the caller named nothing. */\nexport const avatarTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string | undefined =>\n    dataTestId ? `${dataTestId}-${suffix}` : undefined;\n","import type { AvatarSize, AvatarStatus } from './Avatar.base';\nimport type { UiTheme } from '../../../tokens/theme';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Avatar` RENDERERS DRAW WITH.\n *\n * `Avatar.view.tsx` (web, emotion over MUI's `Avatar` and `Badge`) and\n * `Avatar.native.tsx` (React Native) read this one table: the six boxes and\n * their type, the status dot, the glow, the shimmer and the spinner. The web\n * turns the px into rem; native uses the numbers.\n */\nexport interface AvatarSizeMetrics {\n  /** The square the portrait fills, in px. */\n  box: number;\n  /** The initials' type size, in px. */\n  fontSize: number;\n}\n\nexport const AVATAR_SIZES: Record<AvatarSize, AvatarSizeMetrics> = {\n  xs: { box: 24, fontSize: 12 },\n  sm: { box: 32, fontSize: 14 },\n  md: { box: 40, fontSize: 16 },\n  lg: { box: 48, fontSize: 18 },\n  xl: { box: 64, fontSize: 24 },\n  xxl: { box: 80, fontSize: 32 },\n};\n\n/** `rounded` takes one spacing unit; `circle` and `status` are round. */\nexport const ROUNDED_RADIUS_UNITS = 1;\n\n/** The paper ring an avatar takes inside a group, and the hairline outside it. */\nexport const BORDER_WIDTH = 2;\nexport const BORDER_HALO_ALPHA = 0.2;\n\n/** `glow`: a 20px halo at five pixels of spread, and a brightness lift. */\nexport const GLOW = { blur: 20, spread: 5, alpha: 0.4, brightness: 1.05 } as const;\n\n/** `pulse`: the `::after` ring, from nothing to 10px while it fades out. */\nexport const PULSE = { durationMs: 2000, alpha: 0.3, spread: 10 } as const;\n\n/** The shimmer that runs across a loading avatar. */\nexport const SHIMMER = { durationMs: 1500, fromAlpha: 0.6, toAlpha: 0.8 } as const;\n\n/** The overlay over a loading avatar, and the ring spinning in it. */\nexport const LOADING_OVERLAY = { paperAlpha: 0.7, blur: 2 } as const;\nexport const SPINNER = {\n  /** A share of the avatar's box. */\n  scale: 0.4,\n  ringWidth: 2,\n  trackAlpha: 0.3,\n  durationMs: 800,\n} as const;\n\n/**\n * The status dot: a fifth of the box, never below 8px, inside a paper ring.\n * `anchor` is MUI's `overlap=\"circular\"` inset — the dot's CENTRE sits 14% of\n * the box in from the bottom-right corner.\n */\nexport const STATUS_DOT = { scale: 0.2, min: 8, borderWidth: 2, anchor: 0.14 } as const;\n\n/**\n * The default and broken-image glyphs are ordinary `SvgIcon`s here, not MUI's\n * own `.MuiAvatar-fallback` (which is 75% of the box): this component passes\n * them as CHILDREN, so they render at the icon default whatever the box is.\n */\nexport const GLYPH_SIZE = 24;\n\n/** MUI's `Fade` timeout on mount, and the scale-in behind it. */\nexport const FADE_MS = 300;\nexport const SCALE_IN_MS = 300;\n\n/** `transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)`. */\nexport const AVATAR_TRANSITION_MS = 300;\nexport const AVATAR_TRANSITION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n/** The interactive lift, which is a `:hover` on the web. */\nexport const HOVER = { scale: 1.1, lift: 2, shadowY: 8, shadowBlur: 20, shadowAlpha: 0.3, brightness: 1.1 } as const;\nexport const ACTIVE_SCALE = 1.05;\n\n/** The focus ring `:focus-visible` draws. */\nexport const FOCUS_RING = { width: 3, offset: 2, alpha: 0.5 } as const;\n\n/** An avatar group's default overlap, in px, and its hover lift. */\nexport const GROUP_OVERLAP = 8;\nexport const GROUP_MAX = 4;\nexport const GROUP_HOVER = { scale: 1.1, lift: 4 } as const;\n\n/** The dot's colour per status. `offline` is the ramp, the rest are semantic. */\nexport function statusColor(theme: UiTheme, status: AvatarStatus): string {\n  if (status === 'online') return theme.palette.success.main;\n  if (status === 'away') return theme.palette.warning.main;\n  if (status === 'busy') return theme.palette.danger.main;\n  return theme.palette.grey[500];\n}\n\nexport interface AvatarAccent {\n  main: string;\n  contrastText: string;\n}\n\n/**\n * The accent behind the initials. `danger`, NOT `error` — the web map was keyed\n * on MUI's word while the prop took the house one, so `danger` matched nothing\n * and fell through to primary: a red avatar rendering blue, silently.\n */\nexport function avatarAccent(theme: UiTheme, color: ColorValue): AvatarAccent {\n  if (color === 'neutral') return { main: theme.palette.grey[700], contrastText: '#fff' };\n  const accent = theme.palette[color];\n  return { main: accent.main, contrastText: accent.contrastText || '#fff' };\n}\n","import type { TextStyle, ViewStyle } from 'react-native';\n\nimport type { AvatarSize, AvatarVariant } from './Avatar.base';\nimport {\n  AVATAR_SIZES,\n  BORDER_HALO_ALPHA,\n  BORDER_WIDTH,\n  GLOW,\n  LOADING_OVERLAY,\n  ROUNDED_RADIUS_UNITS,\n  SPINNER,\n  STATUS_DOT,\n  avatarAccent,\n} from './Avatar.metrics';\nimport { alpha } from '../../../tokens/color';\nimport type { UiTheme } from '../../../tokens/theme';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\n/** `square` is sharp, `rounded` takes a spacing unit, `circle` and `status` are round. */\nexport function avatarRadius(theme: UiTheme, variant: AvatarVariant, box: number): number {\n  if (variant === 'square') return 0;\n  if (variant === 'rounded') return theme.spacing(ROUNDED_RADIUS_UNITS);\n  return box / 2;\n}\n\nexport interface AvatarSurfaceArgs {\n  variant: AvatarVariant;\n  size: AvatarSize;\n  color: ColorValue;\n  glow: boolean;\n  bordered: boolean;\n  interactive: boolean;\n  hasError: boolean;\n}\n\n/** The avatar box: MUI's square, its radius, the accent behind the initials. */\nexport function avatarSurfaceStyle(theme: UiTheme, a: AvatarSurfaceArgs): ViewStyle {\n  const { box } = AVATAR_SIZES[a.size];\n  const accent = avatarAccent(theme, a.color);\n  return {\n    width: box,\n    height: box,\n    borderRadius: avatarRadius(theme, a.variant, box),\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    backgroundColor: a.hasError ? theme.palette.danger.main : accent.main,\n    cursor: a.interactive ? 'pointer' : 'auto',\n    ...(a.bordered\n      ? {\n          borderWidth: BORDER_WIDTH,\n          borderColor: theme.palette.background.paper,\n          boxShadow: `0 0 0 1px ${alpha(theme.palette.divider, BORDER_HALO_ALPHA)}`,\n        }\n      : {}),\n    ...(a.glow\n      ? { boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(accent.main, GLOW.alpha)}` }\n      : {}),\n  };\n}\n\n/** The initials, in the accent's contrast ink at the size's own step. */\nexport function avatarTextStyle(\n  theme: UiTheme,\n  size: AvatarSize,\n  color: ColorValue,\n  hasError: boolean,\n): TextStyle {\n  const accent = avatarAccent(theme, color);\n  return {\n    fontFamily: theme.typography.fontFamily,\n    fontSize: AVATAR_SIZES[size].fontSize,\n    textAlign: 'center',\n    color: hasError ? theme.palette.danger.contrastText : accent.contrastText,\n  };\n}\n\n/** The wash over a loading avatar, and the ring spinning in it. */\nexport function avatarLoadingStyle(theme: UiTheme, size: AvatarSize, radius: number): ViewStyle {\n  const { box } = AVATAR_SIZES[size];\n  return {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: box,\n    height: box,\n    borderRadius: radius,\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: alpha(theme.palette.background.paper, LOADING_OVERLAY.paperAlpha),\n  };\n}\n\nexport function avatarSpinnerStyle(theme: UiTheme, size: AvatarSize): ViewStyle {\n  const ring = AVATAR_SIZES[size].box * SPINNER.scale;\n  return {\n    width: ring,\n    height: ring,\n    borderRadius: ring / 2,\n    borderWidth: SPINNER.ringWidth,\n    borderColor: alpha(theme.palette.primary.main, SPINNER.trackAlpha),\n    borderTopColor: theme.palette.primary.main,\n  };\n}\n\n/** MUI's `Badge` dot, anchored bottom-right of a circular avatar. */\nexport function avatarStatusDotStyle(theme: UiTheme, size: AvatarSize, color: string): ViewStyle {\n  const { box } = AVATAR_SIZES[size];\n  const dot = Math.max(STATUS_DOT.min, box * STATUS_DOT.scale);\n  // MUI's `overlap=\"circular\"` puts the dot's centre 14% in from the corner.\n  const inset = box * STATUS_DOT.anchor - dot / 2;\n  return {\n    position: 'absolute',\n    right: inset,\n    bottom: inset,\n    width: dot,\n    height: dot,\n    borderRadius: dot / 2,\n    backgroundColor: color,\n    borderWidth: STATUS_DOT.borderWidth,\n    borderColor: theme.palette.background.paper,\n  };\n}\n","/**\n * THE PIECES THE NATIVE `Avatar` IS ASSEMBLED FROM.\n *\n * Split out of `Avatar.native.tsx` so the component itself reads as structure:\n * the mount fade, the portrait's load state, the content node, the pulse ring,\n * the spinner and the surface they all sit on.\n */\nimport * as React from 'react';\nimport {\n  Animated,\n  Easing,\n  Image,\n  Platform,\n  Pressable,\n  StyleSheet,\n  View,\n  type GestureResponderEvent,\n  type StyleProp,\n  type ViewStyle,\n} from 'react-native';\n\nimport type { AvatarSize, AvatarVariant, ContentType } from './Avatar.base';\nimport type { AvatarContentPick } from './Avatar.helpers';\nimport {\n  avatarLoadingStyle,\n  avatarRadius,\n  avatarSpinnerStyle,\n  avatarSurfaceStyle,\n  avatarTextStyle,\n} from './Avatar.look.native';\nimport { AVATAR_SIZES, FADE_MS, GLYPH_SIZE, PULSE, SPINNER } from './Avatar.metrics';\nimport { Icon } from '../../../icons/Icon.native';\nimport { useLoopedProgress } from '../../../platform/animation';\nimport { renderTextChildren } from '../../../platform/text-children';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport type { UiTheme } from '../../../tokens/theme';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\nconst nativeDriver = Platform.OS !== 'web';\n\n/** MUI's `Fade`: in over 300ms, once `animationDelay` has run. */\nexport function useFadeIn(animationDelay: number): Animated.Value {\n  const opacity = React.useRef(new Animated.Value(0)).current;\n  React.useEffect(() => {\n    const animation = Animated.sequence([\n      Animated.delay(animationDelay),\n      Animated.timing(opacity, {\n        toValue: 1,\n        duration: FADE_MS,\n        easing: Easing.out(Easing.ease),\n        useNativeDriver: nativeDriver,\n      }),\n    ]);\n    animation.start();\n    return () => animation.stop();\n  }, [animationDelay, opacity]);\n  return opacity;\n}\n\ninterface ImageState {\n  imageError: boolean;\n  imageLoading: boolean;\n  handleError: () => void;\n  handleLoad: () => void;\n}\n\n/** The portrait's load lifecycle: loading from the moment there is a `src`. */\nexport function useImageState(src: string | undefined, onError?: () => void): ImageState {\n  const [imageError, setImageError] = React.useState(false);\n  const [imageLoading, setImageLoading] = React.useState(Boolean(src));\n\n  React.useEffect(() => {\n    setImageError(false);\n    setImageLoading(Boolean(src));\n  }, [src]);\n\n  const handleError = React.useCallback(() => {\n    setImageError(true);\n    setImageLoading(false);\n    onError?.();\n  }, [onError]);\n\n  return {\n    imageError,\n    imageLoading,\n    handleError,\n    handleLoad: React.useCallback(() => setImageLoading(false), []),\n  };\n}\n\ninterface ContentArgs {\n  pick: AvatarContentPick;\n  children?: React.ReactNode;\n  fallback?: string;\n  icon?: React.ReactNode;\n  ink: string;\n}\n\n/** The node behind the winning content slot; the pick itself is shared. */\nexport function contentNode({ pick, children, fallback, icon, ink }: ContentArgs): React.ReactNode {\n  if (pick === 'children') return children;\n  if (pick === 'fallback') return fallback;\n  if (pick === 'icon') return icon;\n  return <Icon name={pick === 'broken' ? 'BrokenImage' : 'Person'} size={GLYPH_SIZE} color={ink} />;\n}\n\n/**\n * MUI's `::after` pulse ring: the accent growing 10px past the box while it\n * fades out, every two seconds. React Native has no pseudo-element, so it is a\n * sibling behind the avatar.\n */\nexport function PulseRing({ size, variant, color }: { size: AvatarSize; variant: AvatarVariant; color: string }): React.JSX.Element {\n  const theme = useUiTheme();\n  const progress = useLoopedProgress(true, { durationMs: PULSE.durationMs });\n  const box = AVATAR_SIZES[size].box;\n  return (\n    <Animated.View\n      aria-hidden\n      style={[\n        StyleSheet.absoluteFill,\n        {\n          pointerEvents: 'none',\n          borderRadius: avatarRadius(theme, variant, box),\n          backgroundColor: color,\n          opacity: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [PULSE.alpha, 0, 0] }),\n          transform: [\n            {\n              scale: progress.interpolate({\n                inputRange: [0, 0.7, 1],\n                outputRange: [1, (box + PULSE.spread * 2) / box, 1],\n              }),\n            },\n          ],\n        },\n      ]}\n    />\n  );\n}\n\n/** MUI's `rotateAnimation`: the ring turning once every 0.8s. */\nfunction Spinner({ size, testID }: { size: AvatarSize; testID?: string }): React.JSX.Element {\n  const theme = useUiTheme();\n  const progress = useLoopedProgress(true, { durationMs: SPINNER.durationMs });\n  return (\n    <Animated.View\n      testID={testID}\n      style={[\n        avatarSpinnerStyle(theme, size),\n        {\n          transform: [\n            { rotate: progress.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] }) },\n          ],\n        },\n      ]}\n    />\n  );\n}\n\nexport interface SurfaceArgs {\n  variant: AvatarVariant;\n  size: AvatarSize;\n  color: ColorValue;\n  glow: boolean;\n  bordered: boolean;\n  clickable: boolean;\n  imageError: boolean;\n  showSpinner: boolean;\n  imgSrc?: string;\n  alt?: string;\n  ariaLabel: string;\n  content: React.ReactNode;\n  contentType: ContentType;\n  testID?: string;\n  idFor: (suffix: string) => string | undefined;\n  style?: StyleProp<ViewStyle>;\n  onPress?: (event: GestureResponderEvent) => void;\n  onImageError: () => void;\n  onImageLoad: () => void;\n  rest: object;\n}\n\n/** What sits in the middle: the portrait, or the winning content slot. */\nfunction SurfaceInner(a: SurfaceArgs, theme: UiTheme): React.JSX.Element | null {\n  if (a.imgSrc && !a.imageError) {\n    return (\n      <Image\n        source={{ uri: a.imgSrc }}\n        aria-label={a.alt}\n        onError={a.onImageError}\n        onLoad={a.onImageLoad}\n        style={StyleSheet.absoluteFill}\n        accessibilityIgnoresInvertColors\n      />\n    );\n  }\n  if (a.showSpinner) return null;\n  return (\n    <View testID={a.idFor(a.contentType)}>\n      {renderTextChildren(a.content, avatarTextStyle(theme, a.size, a.color, a.imageError), 1)}\n    </View>\n  );\n}\n\n/** The avatar box itself, plus the overlay that covers it while it loads. */\nexport function AvatarSurface(a: SurfaceArgs & { forwardedRef?: React.Ref<View> }): React.JSX.Element {\n  const theme = useUiTheme();\n  const box = AVATAR_SIZES[a.size].box;\n  return (\n    <>\n      <Pressable\n        ref={a.forwardedRef}\n        testID={a.testID}\n        role={a.clickable ? 'button' : undefined}\n        aria-label={a.ariaLabel}\n        tabIndex={a.clickable ? 0 : -1}\n        onPress={a.clickable ? a.onPress : undefined}\n        style={[\n          avatarSurfaceStyle(theme, {\n            variant: a.variant,\n            size: a.size,\n            color: a.color,\n            glow: a.glow,\n            bordered: a.bordered,\n            interactive: a.clickable,\n            hasError: a.imageError,\n          }),\n          a.style,\n        ]}\n        {...a.rest}\n      >\n        {SurfaceInner(a, theme)}\n      </Pressable>\n      {a.showSpinner ? (\n        <View\n          testID={a.idFor('loading')}\n          style={avatarLoadingStyle(theme, a.size, avatarRadius(theme, a.variant, box))}\n        >\n          <Spinner size={a.size} testID={a.idFor('loading-spinner')} />\n        </View>\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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","names":["React","Animated","StyleSheet","View","jsx","jsxs","Animated","View","StyleSheet"]}