@12-apps/ui 6.19.1 → 6.20.0

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-Q52IDAF2.js";
+import "../chunks/chunk-M4DTJDWU.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"]}