@expokit/cli 0.0.0-stage → 0.2.0

package/registry/avatar/files/src/components/ui/avatar.tsx

@@ -0,0 +1,790 @@
+import * as Haptics from 'expo-haptics';
+import React, { useEffect, useId, useRef, useState } from 'react';
+import {
+  AccessibilityInfo,
+  Animated,
+  Easing,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Svg, { Circle, Defs, LinearGradient, Path, Rect, Stop } from 'react-native-svg';
+
+import { alpha, motion, useKit } from '@/lib/kit';
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarShape = 'circle' | 'rounded';
+export type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';
+/** 'story' / 'accent' solid accent ring · 'seen' (same as `ring="story"` + `seen`). */
+export type AvatarRing = 'none' | 'story' | 'accent' | 'seen';
+/** 'soft' tint with deep ink (default) · 'solid' flat fill · 'gradient' opt-in two-tone. */
+export type AvatarFallback = 'soft' | 'solid' | 'gradient';
+
+export interface AvatarProps {
+  /** Image URL. Initials show while it loads, and stay if it fails. */
+  src?: string;
+  /** Used for the initials, the fallback colour (same name → same colour) and the accessibility label. */
+  name?: string;
+  /** 'xs' 24 · 'sm' 32 · 'md' 40 · 'lg' 56 · 'xl' 72, or any number of points. */
+  size?: AvatarSize | number;
+  shape?: AvatarShape;
+  /** Presence dot cut into the bottom-right edge. */
+  status?: AvatarStatus;
+  /** Soft pulse behind the status dot (default: on for 'online'). */
+  pulse?: boolean;
+  /** Ring around the face, separated by a clear gap. */
+  ring?: AvatarRing;
+  /** The story has been watched: the ring cross-fades to a quiet hairline. */
+  seen?: boolean;
+  /** Ring colour override — the first entry is used as a solid colour (default: `accent`). */
+  ringColors?: string[];
+  /** Spin a broken story ring — a "story is loading" state. */
+  ringSpin?: boolean;
+  /** Initials look when there is no photo. Default 'soft'. */
+  fallback?: AvatarFallback;
+  /** Soft layered shadow under the face (default true for 72pt and up). */
+  elevated?: boolean;
+  /** Notification count (`true` = dot), top-right. */
+  badge?: number | boolean;
+  /** Verified seal with a check, bottom-right (bottom-left when a status dot is shown). */
+  verified?: boolean;
+  /** Colour behind the avatar — the dot, badge and seal cut-outs are punched in it. Default: theme background. */
+  surface?: string;
+  /** Ring and verified seal colour (default: theme accent). */
+  accent?: string;
+  /** Makes it a button with a spring press and a light haptic tick. */
+  onPress?: () => void;
+  /** Haptic tick on press (default true). */
+  haptics?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const SIZES: Record<AvatarSize, number> = { xs: 24, sm: 32, md: 40, lg: 56, xl: 72 };
+
+/** Stable 0–359 hue for a name (FNV-1a hash). */
+export function hueFromName(name = '') {
+  let h = 0x811c9dc5;
+  const s = name.trim().toLowerCase();
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 0x01000193);
+  }
+  return (h >>> 0) % 360;
+}
+
+/**
+ * Fallback colours for a name: `base` for flat and soft fills, `ink` for the initials — white when
+ * it reads, otherwise a deep shade of the same hue — and `from` → `to` for the opt-in gradient look.
+ */
+export function gradientFromName(name = '', dark = false) {
+  const h = hueFromName(name);
+  // Warm hues turn toward red (not lime); greens and cyans are perceptually bright, so sit a touch deeper.
+  const turn = h >= 15 && h < 95 ? -28 : 28;
+  const deep = h >= 70 && h < 205 ? 0.09 : 0;
+  const from = hsl(h - turn * 0.3, 0.74, (dark ? 0.58 : 0.64) - deep);
+  const to = hsl(h + turn, 0.68, (dark ? 0.4 : 0.44) - deep);
+  const base = hsl(h + turn * 0.35, 0.7, (dark ? 0.5 : 0.53) - deep);
+  const ink = contrast('#ffffff', base) >= 3 ? '#ffffff' : hsl(h + turn * 0.35, 0.75, 0.16);
+  return { from, to, base, ink, hue: h };
+}
+
+/** Same name, same colour — every time, on every device. */
+export function colorFromName(name = '') {
+  return gradientFromName(name).base;
+}
+
+export function initialsFrom(name = '', max = 2) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (!parts.length) return '';
+  const letters = parts.length === 1 ? [parts[0][0]] : [parts[0][0], parts[parts.length - 1][0]];
+  return letters.slice(0, max).join('').toUpperCase();
+}
+
+const resolveSize = (s: AvatarSize | number) => (typeof s === 'number' ? s : SIZES[s]);
+
+/**
+ * Photo that fades in over soft tinted initials (hue hashed from the name), with
+ * presence dots, notification badges and a verified seal cut into the edge, a gapped story ring
+ * that cross-fades to "seen", and an optional spring press.
+ */
+export function Avatar({
+  src,
+  name,
+  size = 'md',
+  shape = 'circle',
+  status,
+  pulse,
+  ring = 'none',
+  seen,
+  ringColors,
+  ringSpin,
+  fallback = 'soft',
+  elevated,
+  badge,
+  verified,
+  surface,
+  accent,
+  onPress,
+  haptics = true,
+  style,
+}: AvatarProps) {
+  const { colors, radius, dark } = useKit();
+  const reduceMotion = useReduceMotion();
+  const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
+  const px = resolveSize(size);
+  const bg = surface ?? colors.background;
+  const tint = accent ?? colors.accent;
+  const corner = shape === 'circle' ? px / 2 : Math.min(px / 2, radius.scale(Math.round(px * 0.3)));
+  const faceRadius = shape === 'circle' ? radius.full : corner;
+
+  // Remember which URL failed so a new `src` gets a fresh try without resetting state in an effect.
+  const [failedSrc, setFailedSrc] = useState<string>();
+  const failed = !!src && failedSrc === src;
+  const loaded = useRef(new Animated.Value(0)).current;
+  const press = useRef(new Animated.Value(1)).current;
+  const spin = useRef(new Animated.Value(0)).current;
+  const pulseV = useRef(new Animated.Value(0)).current;
+
+  const isSeen = seen ?? ring === 'seen';
+  const seenV = useRef(new Animated.Value(isSeen ? 1 : 0)).current;
+
+  useEffect(() => {
+    loaded.setValue(0);
+  }, [src, loaded]);
+
+  useEffect(() => {
+    Animated.timing(seenV, {
+      toValue: isSeen ? 1 : 0,
+      duration: reduceMotion ? 0 : 320,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start();
+  }, [isSeen, reduceMotion, seenV]);
+
+  const showPulse = !!status && !reduceMotion && (pulse ?? status === 'online');
+  useEffect(() => {
+    if (!showPulse) return;
+    pulseV.setValue(0);
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulseV, { toValue: 1, duration: 1500, easing: Easing.out(Easing.quad), useNativeDriver: true }),
+        Animated.delay(700),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [showPulse, pulseV]);
+
+  const hasRing = ring !== 'none' || seen === true;
+  const spinning = !!ringSpin && hasRing && shape === 'circle' && !isSeen && !reduceMotion;
+  useEffect(() => {
+    if (!spinning) return;
+    spin.setValue(0);
+    const loop = Animated.loop(
+      Animated.timing(spin, { toValue: 1, duration: 2400, easing: Easing.linear, useNativeDriver: true }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [spinning, spin]);
+
+  // Geometry: ring stroke + clear gap around the face; everything else is laid out inside `outer`.
+  const stroke = hasRing ? Math.max(2, Math.round(px * 0.05)) : 0;
+  const gap = hasRing ? Math.max(2, Math.round(px * 0.045)) : 0;
+  const pad = stroke + gap;
+  const outer = px + pad * 2;
+  const circ = Math.PI * (outer - stroke);
+  const ringPaint = ringColors?.[0] ?? tint;
+  const hairline = alpha(colors.foreground, dark ? 0.22 : 0.16);
+
+  // Points on the face edge at 45°: works for circles and rounded squares alike.
+  const r = Math.min(corner, px / 2);
+  const near = r * (1 - Math.SQRT1_2);
+  const far = px - near;
+  const cut = Math.max(1.5, Math.round(px * 0.045 * 2) / 2);
+
+  const named = !!name?.trim();
+  const g = gradientFromName(name, dark);
+  const initials = initialsFrom(name, px < 30 ? 1 : 2);
+  const look = named ? fallback : 'none';
+  const faceBg =
+    look === 'soft' ? alpha(g.base, dark ? 0.24 : 0.16) : look === 'none' ? colors.muted : g.base;
+  const ink =
+    look === 'soft'
+      ? hsl(g.hue, dark ? 0.8 : 0.6, dark ? 0.76 : 0.34)
+      : look === 'none'
+        ? colors.mutedForeground
+        : g.ink;
+  const showElevated = elevated ?? px >= 72;
+  const showPhoto = !!src && !failed;
+
+  const label =
+    [
+      name,
+      verified ? 'verified' : null,
+      status,
+      typeof badge === 'number' && badge > 0 ? `${badge} notifications` : badge === true ? 'new notification' : null,
+      hasRing ? (isSeen ? 'story seen' : 'new story') : null,
+    ]
+      .filter(Boolean)
+      .join(', ') || 'Avatar';
+
+  const onImageLoad = () => {
+    Animated.timing(loaded, {
+      toValue: 1,
+      duration: reduceMotion ? 120 : 320,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const face = (
+    <View
+      style={[
+        styles.face,
+        { width: px, height: px, borderRadius: faceRadius, backgroundColor: faceBg },
+        showElevated
+          ? {
+              shadowColor: '#000',
+              shadowOpacity: dark ? 0.5 : 0.14,
+              shadowRadius: px * 0.16,
+              shadowOffset: { width: 0, height: Math.max(2, px * 0.07) },
+              elevation: Math.round(px * 0.1),
+            }
+          : null,
+      ]}
+    >
+      <View style={[styles.clip, { borderRadius: faceRadius }]}>
+        {look === 'gradient' ? (
+          <Svg width={px} height={px} style={StyleSheet.absoluteFill}>
+            <Defs>
+              <LinearGradient id={`fb${uid}`} x1="0" y1="0" x2="1" y2="1">
+                <Stop offset="0" stopColor={g.from} />
+                <Stop offset="1" stopColor={g.to} />
+              </LinearGradient>
+              <LinearGradient id={`hl${uid}`} x1="0" y1="0" x2="0" y2="1">
+                <Stop offset="0" stopColor="#ffffff" stopOpacity={dark ? 0.12 : 0.2} />
+                <Stop offset="0.55" stopColor="#ffffff" stopOpacity={0} />
+              </LinearGradient>
+            </Defs>
+            <Rect width={px} height={px} fill={`url(#fb${uid})`} />
+            <Rect width={px} height={px} fill={`url(#hl${uid})`} />
+          </Svg>
+        ) : null}
+
+        {initials ? (
+          <Text
+            allowFontScaling={false}
+            numberOfLines={1}
+            style={[
+              styles.initials,
+              {
+                color: ink,
+                fontSize: Math.max(9, px * (initials.length > 1 ? 0.37 : 0.42)),
+                letterSpacing: px >= 56 ? 0.4 : 0,
+              },
+              ink === '#ffffff' && look !== 'soft' ? styles.inkShadow : null,
+            ]}
+          >
+            {initials}
+          </Text>
+        ) : (
+          <PersonIcon size={px} color={ink} />
+        )}
+
+        {showPhoto ? (
+          <Animated.Image
+            source={{ uri: src }}
+            onLoad={onImageLoad}
+            onError={() => setFailedSrc(src)}
+            accessibilityIgnoresInvertColors
+            style={[
+              StyleSheet.absoluteFill,
+              {
+                opacity: loaded,
+                transform: [{ scale: loaded.interpolate({ inputRange: [0, 1], outputRange: [1.06, 1] }) }],
+              },
+            ]}
+          />
+        ) : null}
+
+        {/* Inner hairline so photos and gradients separate from any background. */}
+        <View
+          pointerEvents="none"
+          style={[
+            StyleSheet.absoluteFill,
+            {
+              borderRadius: faceRadius,
+              borderWidth: StyleSheet.hairlineWidth * 2,
+              borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+
+  const ringLayer = (paint: string, width: number, dashed: boolean) =>
+    shape === 'circle' ? (
+      <Circle
+        cx={outer / 2}
+        cy={outer / 2}
+        r={(outer - stroke) / 2}
+        stroke={paint}
+        strokeWidth={width}
+        fill="none"
+        strokeLinecap="round"
+        strokeDasharray={dashed ? [circ * 0.7, circ * 0.3] : undefined}
+      />
+    ) : (
+      <Rect
+        x={stroke / 2}
+        y={stroke / 2}
+        width={outer - stroke}
+        height={outer - stroke}
+        rx={corner + gap + stroke / 2}
+        stroke={paint}
+        strokeWidth={width}
+        fill="none"
+      />
+    );
+
+  const statusCorner = status ? 'br' : null;
+  const sealCorner = verified ? (statusCorner ? 'bl' : 'br') : null;
+  const dot = Math.max(8, Math.round(px * 0.24));
+  const seal = Math.max(12, Math.round(px * 0.3));
+  const badgeH = Math.max(14, Math.round(px * 0.34));
+  const badgeText = typeof badge === 'number' ? (badge > 99 ? '99+' : String(badge)) : null;
+  const showBadge = badge === true || (typeof badge === 'number' && badge > 0);
+
+  /** Absolute position for a cut-out of diameter `d` centred on the face edge at a corner. */
+  const at = (c: 'br' | 'bl' | 'tr', d: number): ViewStyle => ({
+    position: 'absolute',
+    left: pad + (c === 'bl' ? near : far) - d / 2,
+    top: pad + (c === 'tr' ? near : far) - d / 2,
+  });
+
+  const body = (
+    <View style={{ width: outer, height: outer, alignItems: 'center', justifyContent: 'center' }}>
+      {hasRing ? (
+        <>
+          <Animated.View
+            pointerEvents="none"
+            style={[
+              StyleSheet.absoluteFill,
+              {
+                opacity: seenV.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }),
+                transform: [
+                  { rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] }) },
+                  { scale: seenV.interpolate({ inputRange: [0, 1], outputRange: [1, 0.96] }) },
+                ],
+              },
+            ]}
+          >
+            <Svg width={outer} height={outer}>
+              {ringLayer(ringPaint, stroke, spinning)}
+            </Svg>
+          </Animated.View>
+          <Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, { opacity: seenV }]}>
+            <Svg width={outer} height={outer}>
+              {ringLayer(hairline, Math.max(1, stroke * 0.5), false)}
+            </Svg>
+          </Animated.View>
+        </>
+      ) : null}
+
+      {face}
+
+      {statusCorner ? (
+        <View pointerEvents="none" style={at(statusCorner, dot + cut * 2)}>
+          {showPulse ? (
+            <Animated.View
+              style={[
+                styles.pulse,
+                {
+                  left: cut,
+                  top: cut,
+                  width: dot,
+                  height: dot,
+                  borderRadius: radius.full,
+                  backgroundColor: statusTone(status!, colors),
+                  opacity: pulseV.interpolate({ inputRange: [0, 1], outputRange: [0.55, 0] }),
+                  transform: [{ scale: pulseV.interpolate({ inputRange: [0, 1], outputRange: [1, 2.6] }) }],
+                },
+              ]}
+            />
+          ) : null}
+          <StatusDot status={status!} size={dot} cut={cut} surface={bg} />
+        </View>
+      ) : null}
+
+      {sealCorner ? (
+        <View pointerEvents="none" style={at(sealCorner, seal + cut * 2)}>
+          <VerifiedSeal size={seal} cut={cut} color={tint} surface={bg} />
+        </View>
+      ) : null}
+
+      {showBadge ? (
+        <View
+          pointerEvents="none"
+          style={[
+            styles.badge,
+            {
+              minWidth: badgeH + cut * 2,
+              height: badgeH + cut * 2,
+              borderRadius: radius.full,
+              borderWidth: cut,
+              borderColor: bg,
+              backgroundColor: colors.danger,
+              paddingHorizontal: badgeText && badgeText.length > 1 ? 3 + cut : 0,
+              left: pad + far - (badgeH + cut * 2) / 2,
+              top: pad + near - (badgeH + cut * 2) / 2,
+            },
+            badge === true ? { minWidth: dot + cut * 2, height: dot + cut * 2, left: pad + far - dot / 2 - cut, top: pad + near - dot / 2 - cut } : null,
+          ]}
+        >
+          {badgeText ? (
+            <Text
+              allowFontScaling={false}
+              style={[styles.badgeText, { color: colors.dangerForeground, fontSize: Math.max(9, badgeH * 0.6) }]}
+            >
+              {badgeText}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+
+  if (!onPress) {
+    return (
+      <View accessible accessibilityRole="image" accessibilityLabel={label} style={style}>
+        {body}
+      </View>
+    );
+  }
+
+  const springTo = (to: number) =>
+    Animated.spring(press, { toValue: to, useNativeDriver: true, ...motion.bouncy }).start();
+  return (
+    <Animated.View style={[{ transform: [{ scale: press }] }, style]}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={label}
+        hitSlop={outer < 44 ? Math.ceil((44 - outer) / 2) : undefined}
+        onPress={() => {
+          if (haptics) Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => {});
+          onPress();
+        }}
+        onPressIn={() => springTo(reduceMotion ? 1 : 0.93)}
+        onPressOut={() => springTo(1)}
+      >
+        {body}
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+/** Presence dot inside its cut-out: filled online, crescent away, bar busy, hollow offline. */
+function StatusDot({ status, size, cut, surface }: { status: AvatarStatus; size: number; cut: number; surface: string }) {
+  const { colors, radius } = useKit();
+  const tone = statusTone(status, colors);
+  const ring = Math.max(1.5, size * 0.2);
+  return (
+    <View
+      style={{
+        width: size + cut * 2,
+        height: size + cut * 2,
+        borderRadius: radius.full,
+        backgroundColor: surface,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <View
+        style={[
+          styles.dot,
+          {
+            width: size,
+            height: size,
+            borderRadius: radius.full,
+            backgroundColor: status === 'offline' ? surface : tone,
+            borderWidth: status === 'offline' ? ring : 0,
+            borderColor: tone,
+          },
+        ]}
+      >
+        {status === 'away' ? (
+          <View
+            style={{
+              position: 'absolute',
+              left: -size * 0.12,
+              top: -size * 0.12,
+              width: size * 0.62,
+              height: size * 0.62,
+              borderRadius: radius.full,
+              backgroundColor: surface,
+            }}
+          />
+        ) : null}
+        {status === 'busy' ? (
+          <View
+            style={{
+              width: size * 0.56,
+              height: Math.max(1.5, size * 0.18),
+              borderRadius: radius.full,
+              backgroundColor: surface,
+            }}
+          />
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+function statusTone(status: AvatarStatus, colors: ReturnType<typeof useKit>['colors']) {
+  return { online: colors.success, away: colors.warning, busy: colors.danger, offline: colors.mutedForeground }[status];
+}
+
+/** Eight-lobed rosette with a check, ringed by the surface colour so it reads as cut out. */
+function VerifiedSeal({ size, cut, color, surface }: { size: number; cut: number; color: string; surface: string }) {
+  const p = (cut * 24) / size;
+  const w = size + cut * 2;
+  const ink = contrast('#ffffff', color) >= 2.4 ? '#ffffff' : '#09090b';
+  return (
+    <Svg width={w} height={w} viewBox={`${-p} ${-p} ${24 + p * 2} ${24 + p * 2}`}>
+      <Path d={SEAL} fill={surface} stroke={surface} strokeWidth={p * 2} strokeLinejoin="round" />
+      <Path d={SEAL} fill={color} />
+      <Path d="M8 12.4l2.8 2.8 5.4-5.6" stroke={ink} strokeWidth={2.4} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+    </Svg>
+  );
+}
+
+const SEAL = (() => {
+  const n = 8;
+  const pts = Array.from({ length: n * 2 }, (_, k) => {
+    const a = (k * Math.PI) / n - Math.PI / 2;
+    const rr = k % 2 === 0 ? 12 : 10.1;
+    return [12 + rr * Math.cos(a), 12 + rr * Math.sin(a)] as const;
+  });
+  const mid = (a: readonly number[], b: readonly number[]) => [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
+  const f = (v: number) => v.toFixed(2);
+  const start = mid(pts[pts.length - 1], pts[0]);
+  let d = `M${f(start[0])} ${f(start[1])}`;
+  pts.forEach((pt, i) => {
+    const m = mid(pt, pts[(i + 1) % pts.length]);
+    d += `Q${f(pt[0])} ${f(pt[1])} ${f(m[0])} ${f(m[1])}`;
+  });
+  return d + 'Z';
+})();
+
+function PersonIcon({ size, color }: { size: number; color: string }) {
+  const s = size * 0.56;
+  return (
+    <Svg width={s} height={s} viewBox="0 0 24 24" fill="none">
+      <Circle cx={12} cy={9} r={3.6} fill={color} />
+      <Path d="M5.5 19.2c.9-3.2 3.4-5 6.5-5s5.6 1.8 6.5 5" stroke={color} strokeWidth={2.2} strokeLinecap="round" />
+    </Svg>
+  );
+}
+
+export interface AvatarGroupProps {
+  /** `<Avatar>` elements. The group sets their size, shape and surface. */
+  children: React.ReactNode;
+  /** Show at most this many, then a "+N" chip. */
+  max?: number;
+  size?: AvatarSize | number;
+  shape?: AvatarShape;
+  /** How far each avatar tucks under the previous one, as a fraction of its size (default 0.28). */
+  overlap?: number;
+  /** Real total when it is larger than the children you pass (e.g. 1,284 members). */
+  total?: number;
+  /** Staggered spring-in on mount (skipped with reduce motion). */
+  animated?: boolean;
+  /** Colour of the separating borders — match what the group sits on (default: theme background). */
+  surface?: string;
+  /** Makes the "+N" chip a button. */
+  onPressMore?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Overlapping avatars separated by cut-out borders, with a "+N" chip and a staggered spring-in. */
+export function AvatarGroup({
+  children,
+  max = 4,
+  size = 'md',
+  shape = 'circle',
+  overlap = 0.28,
+  total,
+  animated = true,
+  surface,
+  onPressMore,
+  style,
+}: AvatarGroupProps) {
+  const { colors, radius, dark } = useKit();
+  const reduceMotion = useReduceMotion();
+  const px = resolveSize(size);
+  const bg = surface ?? colors.background;
+  const items = React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement<AvatarProps>[];
+  const shown = items.slice(0, Math.max(0, max));
+  const extra = Math.max(0, (total ?? items.length) - shown.length);
+  const count = shown.length + (extra > 0 ? 1 : 0);
+  const border = Math.max(1.5, Math.round(px * 0.06 * 2) / 2);
+  const inner = shape === 'circle' ? radius.full : Math.min(px / 2, radius.scale(Math.round(px * 0.3)));
+  const wrapCorner = shape === 'circle' ? radius.full : inner + border;
+
+  const anims = useRef<Animated.Value[]>([]).current;
+  while (anims.length < count) anims.push(new Animated.Value(animated ? 0 : 1));
+
+  useEffect(() => {
+    if (!animated) return;
+    if (reduceMotion) {
+      anims.forEach((v) => v.setValue(1));
+      return;
+    }
+    Animated.stagger(
+      55,
+      anims.slice(0, count).map((v) => Animated.spring(v, { toValue: 1, useNativeDriver: true, ...motion.bouncy })),
+    ).start();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reduceMotion]);
+
+  const names = shown.map((c) => c.props.name).filter(Boolean) as string[];
+  const label =
+    names.length === 0
+      ? `${total ?? items.length} people`
+      : `${names.slice(0, 3).join(', ')}${(total ?? items.length) - Math.min(3, names.length) > 0 ? ` and ${(total ?? items.length) - Math.min(3, names.length)} more` : ''}`;
+
+  const wrap = (child: React.ReactNode, i: number, key: React.Key) => (
+    <Animated.View
+      key={key}
+      style={{
+        marginLeft: i === 0 ? 0 : -px * overlap,
+        borderRadius: wrapCorner,
+        padding: border,
+        backgroundColor: bg,
+        zIndex: count - i,
+        opacity: anims[i],
+        transform: [
+          { translateX: anims[i].interpolate({ inputRange: [0, 1], outputRange: [-8, 0] }) },
+          { scale: anims[i].interpolate({ inputRange: [0, 1], outputRange: [0.6, 1] }) },
+        ],
+      }}
+    >
+      {child}
+    </Animated.View>
+  );
+
+  const extraText = extra > 999 ? `${(extra / 1000).toFixed(extra >= 10000 ? 0 : 1).replace(/\.0$/, '')}k` : String(extra);
+  const more =
+    extra > 0 ? (
+      <Pressable
+        accessibilityRole={onPressMore ? 'button' : 'text'}
+        accessibilityLabel={`${extra} more`}
+        disabled={!onPressMore}
+        onPress={onPressMore}
+        hitSlop={px < 44 ? Math.ceil((44 - px) / 2) : undefined}
+        style={({ pressed }) => [
+          styles.more,
+          {
+            width: px,
+            height: px,
+            borderRadius: inner,
+            backgroundColor: alpha(colors.foreground, pressed ? (dark ? 0.18 : 0.12) : dark ? 0.12 : 0.07),
+          },
+        ]}
+      >
+        <Text
+          allowFontScaling={false}
+          numberOfLines={1}
+          style={[styles.moreText, { color: colors.foreground, fontSize: Math.max(8, px * (extraText.length <= 2 ? 0.34 : extraText.length === 3 ? 0.29 : 0.24)) }]}
+        >
+          +{extraText}
+        </Text>
+      </Pressable>
+    ) : null;
+
+  return (
+    <View
+      accessible={!onPressMore}
+      accessibilityRole={onPressMore ? undefined : 'image'}
+      accessibilityLabel={onPressMore ? undefined : label}
+      style={[styles.group, style]}
+    >
+      {shown.map((child, i) =>
+        wrap(
+          React.cloneElement(child, {
+            size: px,
+            shape,
+            surface: bg,
+            ring: 'none',
+            seen: false,
+            elevated: false,
+            badge: undefined,
+          }),
+          i,
+          child.key ?? i,
+        ),
+      )}
+      {more ? wrap(more, shown.length, 'more') : null}
+    </View>
+  );
+}
+
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((v) => alive && setReduce(v))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
+function hsl(h: number, s: number, l: number) {
+  const hue = ((h % 360) + 360) % 360;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = l - c / 2;
+  const [r, g, b] =
+    hue < 60 ? [c, x, 0] : hue < 120 ? [x, c, 0] : hue < 180 ? [0, c, x] : hue < 240 ? [0, x, c] : hue < 300 ? [x, 0, c] : [c, 0, x];
+  return '#' + [r, g, b].map((v) => Math.round((v + m) * 255).toString(16).padStart(2, '0')).join('');
+}
+
+function luminance(hex: string) {
+  const full = hex.length === 4 ? '#' + [...hex.slice(1)].map((c) => c + c).join('') : hex;
+  const n = parseInt(full.slice(1, 7), 16);
+  if (Number.isNaN(n)) return 0;
+  const lin = (v: number) => {
+    const c = v / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * lin((n >> 16) & 255) + 0.7152 * lin((n >> 8) & 255) + 0.0722 * lin(n & 255);
+}
+
+function contrast(a: string, b: string) {
+  const [x, y] = [luminance(a), luminance(b)].sort((p, q) => q - p);
+  return (x + 0.05) / (y + 0.05);
+}
+
+const styles = StyleSheet.create({
+  face: { overflow: 'visible' },
+  clip: { flex: 1, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' },
+  initials: { fontWeight: '400', includeFontPadding: false, textAlign: 'center' },
+  inkShadow: { textShadowColor: 'rgba(0,0,0,0.18)', textShadowRadius: 2, textShadowOffset: { width: 0, height: 0.5 } },
+  pulse: { position: 'absolute' },
+  dot: { alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },
+  badge: { position: 'absolute', alignItems: 'center', justifyContent: 'center' },
+  badgeText: { fontWeight: '400', letterSpacing: -0.2, includeFontPadding: false },
+  group: { flexDirection: 'row', alignItems: 'center' },
+  more: { alignItems: 'center', justifyContent: 'center' },
+  moreText: { fontWeight: '400', letterSpacing: -0.2 },
+});