@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/module/components/Avatar/Avatar.js

@@ -1,496 +1 @@
-"use strict";
-
-import React, { Children, cloneElement, forwardRef, isValidElement, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Easing, Image, StyleSheet, Text, View } from 'react-native';
-import { createAnimatedValue, useTheme } from "../../theme/index.js";
-import { tintOf } from "../../utils/color.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { AppIcon } from "../AppIcon/index.js";
-import { Skeleton } from "../Skeleton/index.js";
-
-/**
- * Props passed to a custom {@link AvatarProps.ImageComponent}. They mirror what
- * the built-in `<Image>` receives, so a plain RN `Image` is a valid drop-in.
- * Supply a custom component to render images that need authenticated fetching,
- * caching, or token refresh (the library stays auth-agnostic).
- */
-
-/**
- * Presence dots (`online`, `offline`, `busy`, `away`) and identity states
- * (`verified`: green ring with a check seal at the status corner, `pending`:
- * amber ring, no seal). The ring states keep the avatar's footprint and inset
- * the picture, so switching between them never reflows a layout.
- */
-
-/**
- * Theme colour of the initials disc: a soft tint of the tone behind initials
- * in the tone, the soft Button's recipe. `neutral` is the quiet grey on
- * primary text; `secondary` is the theme's secondary surface and its ink.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The soft Button's fill opacity, so a primary initials circle matches a
-// soft primary button beside it.
-const SOFT_FILL_OPACITY = 0.14;
-
-/** The fill and the ink of an initials disc in a tone. Shared with ProfilePicker's placeholder. */
-export const avatarToneColors = (theme, tone) => {
-  const soft = (accent, fallback) => tintOf(accent, SOFT_FILL_OPACITY, fallback);
-  switch (tone) {
-    case 'primary':
-      return {
-        background: soft(theme.colors.primary, theme.colors.primaryMuted),
-        color: theme.colors.primary
-      };
-    case 'secondary':
-      return {
-        background: theme.colors.secondary,
-        color: theme.colors.onSecondary
-      };
-    case 'success':
-      return {
-        background: soft(theme.colors.success, theme.colors.background.secondary),
-        color: theme.colors.success
-      };
-    case 'warning':
-      return {
-        background: soft(theme.colors.warning, theme.colors.background.secondary),
-        color: theme.colors.warning
-      };
-    case 'error':
-      return {
-        background: soft(theme.colors.error, theme.colors.background.secondary),
-        color: theme.colors.error
-      };
-    case 'info':
-      return {
-        background: soft(theme.colors.info, theme.colors.background.secondary),
-        color: theme.colors.info
-      };
-    default:
-      return {
-        background: theme.colors.background.tertiary,
-        color: theme.colors.text.primary
-      };
-  }
-};
-const sizeMap = {
-  xs: 24,
-  sm: 32,
-  md: 48,
-  lg: 64,
-  xl: 80
-};
-const resolveSize = size => typeof size === 'number' ? size : sizeMap[size];
-const resolveRadius = (shape, dimension) => {
-  switch (shape) {
-    case 'circle':
-      return dimension / 2;
-    case 'rounded':
-      return Math.max(6, Math.round(dimension * 0.22));
-    case 'square':
-    default:
-      return 0;
-  }
-};
-const initialsFromName = name => {
-  if (!name) {
-    return '';
-  }
-  const parts = name.trim().split(/\s+/u).filter(Boolean);
-  if (parts.length === 0) {
-    return '';
-  }
-  if (parts.length === 1) {
-    return parts[0].charAt(0).toUpperCase();
-  }
-  return (parts[0].charAt(0) + parts[1].charAt(0)).toUpperCase();
-};
-
-// Stable per-user colour is deliberate: the same name must always hash to
-// the same palette index, so don't "fix" this to something random.
-const hashColor = (seed, palette) => {
-  if (!seed) {
-    return palette[0];
-  }
-  let hash = 0;
-  for (let i = 0; i < seed.length; i += 1) {
-    hash = (hash << 5) - hash + seed.charCodeAt(i);
-    hash |= 0;
-  }
-  const idx = Math.abs(hash) % palette.length;
-  return palette[idx];
-};
-
-// Design spec: the verified / pending ring is a hairline 1.5 px at every size.
-const RING_WIDTH = 1.5;
-const isRingStatus = status => status === 'verified' || status === 'pending';
-const statusColor = (theme, status) => {
-  switch (status) {
-    case 'online':
-    case 'verified':
-      return theme.colors.success;
-    case 'busy':
-      return theme.colors.error;
-    case 'away':
-    case 'pending':
-      return theme.colors.warning;
-    case 'offline':
-    default:
-      return theme.colors.text.tertiary;
-  }
-};
-const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    source,
-    ImageComponent,
-    name,
-    size = 'md',
-    shape = 'circle',
-    status = null,
-    statusPosition = 'bottomRight',
-    tone,
-    backgroundColor,
-    color,
-    fontSize: fontSizeProp,
-    loading = false,
-    accessibilityLabel,
-    style,
-    textStyle,
-    testID
-  } = props;
-  const theme = useTheme();
-  const avatarTokens = theme.components.avatar;
-  const [imageFailed, setImageFailed] = useState(false);
-  const dimension = useMemo(() => resolveSize(size), [size]);
-  const borderRadius = useMemo(() => resolveRadius(shape, dimension), [shape, dimension]);
-  const borderWidth = avatarTokens?.borderWidth ?? 0;
-  const borderColor = avatarTokens?.borderColor ?? theme.colors.border.primary;
-  const statusBorder = avatarTokens?.statusBorderWidth ?? 2;
-  const statusBorderColor = avatarTokens?.statusBorderColor ?? theme.colors.background.elevated;
-  const initials = useMemo(() => initialsFromName(name), [name]);
-  const toneColors = useMemo(() => tone ? avatarToneColors(theme, tone) : null, [theme, tone]);
-  const resolvedBackground = useMemo(() => {
-    if (backgroundColor) {
-      return backgroundColor;
-    }
-    return toneColors?.background ?? hashColor(name ?? '', theme.colors.avatarPalette);
-  }, [backgroundColor, toneColors, name, theme.colors.avatarPalette]);
-  const resolvedTextColor = color ?? toneColors?.color ?? theme.colors.text.inverse;
-  const showImage = !!source && !imageFailed;
-  // Font size resolution: per-instance prop → absolute theme token → ratio
-  // token → library default (40% of avatar dimension, floored at 10px).
-  const fontSizeRatio = avatarTokens?.fontSizeRatio ?? 0.4;
-  const fontSize = fontSizeProp ?? avatarTokens?.fontSize ?? Math.max(10, Math.round(dimension * fontSizeRatio));
-  const statusSize = Math.max(8, Math.round(dimension * 0.25));
-
-  // Ring states (`verified` / `pending`) draw inside the requested footprint
-  // and inset the picture, so a list never reflows when a user's state flips.
-  // The gap between ring and picture is left unpainted so the page shows through.
-  const ringStatus = isRingStatus(status);
-  const ringWidth = avatarTokens?.ringWidth ?? RING_WIDTH;
-  const ringGap = avatarTokens?.ringGap ?? ringWidth;
-  const pictureInset = ringStatus ? ringWidth + ringGap : 0;
-  const pictureDimension = dimension - pictureInset * 2;
-  const pictureRadius = ringStatus ? resolveRadius(shape, pictureDimension) : borderRadius;
-  const ringColor = ringStatus ? statusColor(theme, status) : 'transparent';
-  const badgeSize = Math.max(12, Math.round(dimension * 0.32));
-  const badgeIconSize = Math.max(10, badgeSize - 4);
-  const surfaceBackground = showImage ? theme.colors.background.tertiary : resolvedBackground;
-  const idBase = testID ?? 'avatar';
-  const derivedLabel = name ? `${name}'s avatar` : 'Avatar';
-  const a11yLabel = accessibilityLabel ?? (status === 'verified' ? `${derivedLabel}, verified` : status === 'pending' ? `${derivedLabel}, pending verification` : derivedLabel);
-  const rendered = /*#__PURE__*/_jsxs(View, {
-    ref: ref,
-    style: [styles.root, {
-      width: dimension,
-      height: dimension,
-      borderRadius,
-      ...smoothCorners,
-      borderWidth: ringStatus ? 0 : borderWidth,
-      borderColor,
-      backgroundColor: ringStatus ? 'transparent' : surfaceBackground
-    }, style],
-    accessible: true,
-    accessibilityRole: "image",
-    accessibilityLabel: a11yLabel,
-    testID: testID,
-    children: [ringStatus ? /*#__PURE__*/_jsx(View, {
-      style: [styles.ring, {
-        borderRadius,
-        ...smoothCorners,
-        borderWidth: ringWidth,
-        borderColor: ringColor
-      }],
-      accessible: false,
-      pointerEvents: "none",
-      testID: `${idBase}-ring`
-    }) : null, /*#__PURE__*/_jsx(View, {
-      style: [styles.picture, {
-        width: pictureDimension,
-        height: pictureDimension,
-        borderRadius: pictureRadius,
-        ...smoothCorners,
-        borderWidth: ringStatus ? borderWidth : 0,
-        borderColor,
-        backgroundColor: ringStatus ? surfaceBackground : 'transparent'
-      }],
-      children: showImage ? (() => {
-        const ImageEl = ImageComponent ?? Image;
-        return /*#__PURE__*/_jsx(ImageEl, {
-          source: source,
-          onError: () => setImageFailed(true),
-          style: {
-            width: pictureDimension,
-            height: pictureDimension,
-            borderRadius: pictureRadius,
-            ...smoothCorners
-            // ImageStyle omits borderCurve; the native image view honours it.
-          },
-          resizeMode: "cover",
-          accessibilityIgnoresInvertColors: true
-        });
-      })() : /*#__PURE__*/_jsx(Text, {
-        style: [styles.initials, {
-          color: resolvedTextColor,
-          fontSize,
-          fontWeight: theme.typography.fontWeight[avatarTokens?.fontWeight ?? 'semibold']
-        }, textStyle],
-        numberOfLines: 1,
-        allowFontScaling: false,
-        children: initials ?? ' '
-      })
-    }), status === 'verified' ? /*#__PURE__*/_jsx(View, {
-      style: [styles.status, statusPosition === 'topRight' ? styles.badgeTopRight : styles.badgeBottomRight, {
-        width: badgeSize,
-        height: badgeSize,
-        borderRadius: badgeSize / 2,
-        ...smoothCorners,
-        backgroundColor: statusBorderColor
-      }],
-      accessible: false,
-      pointerEvents: "none",
-      testID: `${idBase}-badge`,
-      children: /*#__PURE__*/_jsx(AppIcon, {
-        name: "verify",
-        variant: "bold",
-        size: badgeIconSize,
-        color: ringColor
-      })
-    }) : null, status && !ringStatus ? /*#__PURE__*/_jsx(View, {
-      style: [styles.status, statusPosition === 'topRight' ? styles.statusTopRight : styles.statusBottomRight, {
-        width: statusSize,
-        height: statusSize,
-        borderRadius: statusSize / 2,
-        ...smoothCorners,
-        backgroundColor: statusColor(theme, status),
-        borderWidth: statusBorder,
-        borderColor: statusBorderColor
-      }],
-      accessible: false,
-      pointerEvents: "none"
-    }) : null]
-  });
-  if (loading) {
-    return /*#__PURE__*/_jsx(AvatarSkeleton, {
-      ...props
-    });
-  }
-  return rendered;
-});
-Avatar.displayName = 'Avatar';
-
-/**
- * Authored placeholder for `<Avatar>`. Matches the real shape (circle /
- * rounded / square at the requested size), so the layout doesn't shift
- * when the image / name resolves.
- */
-const AvatarSkeleton = ({
-  size = 'md',
-  shape = 'circle',
-  style
-}) => {
-  const dim = resolveSize(size);
-  const skeletonShape = shape === 'circle' ? 'circle' : shape === 'rounded' ? 'rounded' : 'rect';
-  return /*#__PURE__*/_jsx(Skeleton, {
-    shape: skeletonShape,
-    width: dim,
-    height: dim,
-    style: style
-  });
-};
-AvatarSkeleton.displayName = 'AvatarSkeleton';
-Avatar.Skeleton = AvatarSkeleton;
-const styles = StyleSheet.create({
-  root: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'visible',
-    position: 'relative'
-  },
-  initials: {
-    textAlign: 'center'
-  },
-  ring: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  },
-  picture: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden'
-  },
-  status: {
-    position: 'absolute'
-  },
-  badgeTopRight: {
-    top: -2,
-    right: -2,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  badgeBottomRight: {
-    bottom: -2,
-    right: -2,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  statusTopRight: {
-    top: 0,
-    right: 0
-  },
-  statusBottomRight: {
-    bottom: 0,
-    right: 0
-  }
-});
-const SPACING_OFFSET = {
-  tight: -16,
-  normal: -12,
-  loose: -8
-};
-const STAGGER_MS = 50;
-const ENTRANCE_DURATION_MS = 220;
-const AvatarGroupItem = ({
-  delay,
-  marginLeft,
-  borderColor,
-  borderWidth,
-  children
-}) => {
-  const opacity = useRef(createAnimatedValue(0)).current;
-  useEffect(() => {
-    const anim = Animated.timing(opacity, {
-      toValue: 1,
-      duration: ENTRANCE_DURATION_MS,
-      delay,
-      easing: Easing.out(Easing.cubic),
-      useNativeDriver: true
-    });
-    anim.start();
-    return () => anim.stop();
-  }, [delay, opacity]);
-  return /*#__PURE__*/_jsx(Animated.View, {
-    style: [groupStyles.item, {
-      marginLeft,
-      borderColor,
-      borderWidth,
-      opacity
-    }],
-    children: children
-  });
-};
-const AvatarGroup = props => {
-  const {
-    children,
-    max = 4,
-    size = 'md',
-    spacing = 'normal',
-    overflowVariant = 'count',
-    accessibilityLabel,
-    style,
-    testID
-  } = props;
-  const theme = useTheme();
-  const validChildren = useMemo(() => Children.toArray(children).filter(c => /*#__PURE__*/isValidElement(c)), [children]);
-  const total = validChildren.length;
-  const visible = validChildren.slice(0, max);
-  const overflow = Math.max(0, total - max);
-  const showOverflow = overflow > 0;
-  const offset = SPACING_OFFSET[spacing];
-  const borderColor = theme.colors.background.elevated;
-  const borderWidth = 1.5;
-  const a11yLabel = accessibilityLabel ?? `Group of ${total} ${total === 1 ? 'person' : 'people'}`;
-
-  // Render the "+N" / "+" overflow avatar styled to match.
-  const overflowDimension = useMemo(() => resolveSize(size), [size]);
-  const overflowFontSize = Math.max(10, Math.round(overflowDimension * 0.34));
-  return /*#__PURE__*/_jsxs(View, {
-    style: [groupStyles.row, style],
-    accessible: true,
-    accessibilityLabel: a11yLabel,
-    accessibilityRole: "summary",
-    testID: testID,
-    children: [visible.map((child, index) => {
-      const childKey = child.key ?? `avatar-${index}`;
-      const cloned = /*#__PURE__*/cloneElement(child, {
-        size
-      });
-      return /*#__PURE__*/_jsx(AvatarGroupItem, {
-        delay: index * STAGGER_MS,
-        marginLeft: index === 0 ? 0 : offset,
-        borderColor: borderColor,
-        borderWidth: borderWidth,
-        children: cloned
-      }, childKey);
-    }), showOverflow ? /*#__PURE__*/_jsx(AvatarGroupItem, {
-      delay: visible.length * STAGGER_MS,
-      marginLeft: visible.length === 0 ? 0 : offset,
-      borderColor: borderColor,
-      borderWidth: borderWidth,
-      children: /*#__PURE__*/_jsx(View, {
-        style: [groupStyles.overflow, {
-          width: overflowDimension,
-          height: overflowDimension,
-          borderRadius: overflowDimension / 2,
-          ...smoothCorners,
-          backgroundColor: theme.colors.surface.disabled
-        }],
-        accessible: true,
-        accessibilityRole: "text",
-        accessibilityLabel: overflowVariant === 'count' ? `${overflow} more` : 'More avatars',
-        children: /*#__PURE__*/_jsx(Text, {
-          style: {
-            color: theme.colors.text.secondary,
-            fontSize: overflowFontSize,
-            fontWeight: theme.typography.fontWeight.semibold
-          },
-          numberOfLines: 1,
-          allowFontScaling: false,
-          children: overflowVariant === 'count' ? `+${overflow}` : '+'
-        })
-      })
-    }, "avatar-overflow") : null]
-  });
-};
-const groupStyles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  item: {
-    borderRadius: 9999,
-    ...smoothCorners
-  },
-  overflow: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-const AvatarWithGroup = Avatar;
-AvatarWithGroup.Group = AvatarGroup;
-export { Avatar, AvatarGroup };
-export default AvatarWithGroup;
-//# sourceMappingURL=Avatar.js.map
+"use strict";import{Image}from"expo-image";import React,{Children,cloneElement,forwardRef,isValidElement,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{AppIcon}from"../AppIcon/index.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SOFT_FILL_OPACITY=.14;export const avatarToneColors=(e,r)=>{const soft=(e,r)=>tintOf(e,.14,r);switch(r){case"primary":return{background:soft(e.colors.primary,e.colors.primaryMuted),color:e.colors.primary};case"secondary":return{background:e.colors.secondary,color:e.colors.onSecondary};case"success":return{background:soft(e.colors.success,e.colors.background.secondary),color:e.colors.success};case"warning":return{background:soft(e.colors.warning,e.colors.background.secondary),color:e.colors.warning};case"error":return{background:soft(e.colors.error,e.colors.background.secondary),color:e.colors.error};case"info":return{background:soft(e.colors.info,e.colors.background.secondary),color:e.colors.info};default:return{background:e.colors.background.tertiary,color:e.colors.text.primary}}};const sizeMap={xs:24,sm:32,md:48,lg:64,xl:80},resolveSize=e=>"number"==typeof e?e:sizeMap[e],resolveRadius=(e,r)=>{switch(e){case"circle":return r/2;case"rounded":return Math.max(6,Math.round(.22*r));default:return 0}},initialsFromName=e=>{if(!e)return"";const r=e.trim().split(/\s+/u).filter(Boolean);return 0===r.length?"":1===r.length?r[0].charAt(0).toUpperCase():(r[0].charAt(0)+r[1].charAt(0)).toUpperCase()},hashColor=(e,r)=>{if(!e)return r[0];let t=0;for(let r=0;r<e.length;r+=1)t=(t<<5)-t+e.charCodeAt(r),t|=0;return r[Math.abs(t)%r.length]},RING_WIDTH=1.5,isRingStatus=e=>"verified"===e||"pending"===e,statusColor=(e,r)=>{switch(r){case"online":case"verified":return e.colors.success;case"busy":return e.colors.error;case"away":case"pending":return e.colors.warning;default:return e.colors.text.tertiary}},Avatar=forwardRef((e,r)=>{const{source:t,ImageComponent:o,name:s,size:a="md",shape:i="circle",status:n=null,statusPosition:l="bottomRight",tone:c,backgroundColor:d,color:u,fontSize:h,loading:m=!1,accessibilityLabel:g,style:b,textStyle:p,testID:y}=e,f=useTheme(),v=f.components.avatar,[x,C]=useState(!1),S=useMemo(()=>resolveSize(a),[a]),A=useMemo(()=>resolveRadius(i,S),[i,S]),w=v?.borderWidth??0,R=v?.borderColor??f.colors.border.primary,j=v?.statusBorderWidth??2,k=v?.statusBorderColor??f.colors.background.elevated,I=useMemo(()=>initialsFromName(s),[s]),M=useMemo(()=>c?avatarToneColors(f,c):null,[f,c]),_=useMemo(()=>d||(M?.background??hashColor(s??"",f.colors.avatarPalette)),[d,M,s,f.colors.avatarPalette]),T=u??M?.color??f.colors.onPrimary,W=!!t&&!x,E=v?.fontSizeRatio??.4,z=h??v?.fontSize??Math.max(10,Math.round(S*E)),G=Math.max(8,Math.round(.25*S)),V=isRingStatus(n),L=v?.ringWidth??1.5,F=S-2*(V?L+(v?.ringGap??L):0),N=V?resolveRadius(i,F):A,D=V?statusColor(f,n):"transparent",$=Math.max(12,Math.round(.32*S)),O=Math.max(10,$-4),B=W?f.colors.background.tertiary:_,P=y??"avatar",U=s?`${s}'s avatar`:"Avatar",H=g??("verified"===n?`${U}, verified`:"pending"===n?`${U}, pending verification`:U),Y=_jsxs(View,{ref:r,style:[styles.root,{width:S,height:S,borderRadius:A,...smoothCorners,borderWidth:V?0:w,borderColor:R,backgroundColor:V?"transparent":B},b],accessible:!0,accessibilityRole:"image",accessibilityLabel:H,testID:y,children:[V?_jsx(View,{style:[styles.ring,{borderRadius:A,...smoothCorners,borderWidth:L,borderColor:D}],accessible:!1,pointerEvents:"none",testID:`${P}-ring`}):null,_jsx(View,{style:[styles.picture,{width:F,height:F,borderRadius:N,...smoothCorners,borderWidth:V?w:0,borderColor:R,backgroundColor:V?B:"transparent"}],children:W?(()=>{const e={width:F,height:F,borderRadius:N,...smoothCorners},onError=()=>C(!0);return o?_jsx(o,{source:t,onError:onError,style:e,contentFit:"cover",resizeMode:"cover",accessibilityIgnoresInvertColors:!0}):_jsx(Image,{source:t,onError:onError,style:e,contentFit:"cover",accessibilityIgnoresInvertColors:!0})})():_jsx(Text,{style:[styles.initials,{color:T,fontSize:z,fontWeight:f.typography.fontWeight[v?.fontWeight??"semibold"]},p],numberOfLines:1,allowFontScaling:!1,children:I??" "})}),"verified"===n?_jsx(View,{style:[styles.status,"topRight"===l?styles.badgeTopRight:styles.badgeBottomRight,{width:$,height:$,borderRadius:$/2,...smoothCorners,backgroundColor:k}],accessible:!1,pointerEvents:"none",testID:`${P}-badge`,children:_jsx(AppIcon,{name:"verify",variant:"bold",size:O,color:D})}):null,n&&!V?_jsx(View,{style:[styles.status,"topRight"===l?styles.statusTopRight:styles.statusBottomRight,{width:G,height:G,borderRadius:G/2,...smoothCorners,backgroundColor:statusColor(f,n),borderWidth:j,borderColor:k}],accessible:!1,pointerEvents:"none"}):null]});return m?_jsx(AvatarSkeleton,{...e}):Y});Avatar.displayName="Avatar";const AvatarSkeleton=({size:e="md",shape:r="circle",style:t})=>{const o=resolveSize(e);return _jsx(Skeleton,{shape:"circle"===r?"circle":"rounded"===r?"rounded":"rect",width:o,height:o,style:t})};AvatarSkeleton.displayName="AvatarSkeleton",Avatar.Skeleton=AvatarSkeleton;const styles=StyleSheet.create({root:{alignItems:"center",justifyContent:"center",overflow:"visible",position:"relative"},initials:{textAlign:"center"},ring:{position:"absolute",top:0,right:0,bottom:0,left:0},picture:{alignItems:"center",justifyContent:"center",overflow:"hidden"},status:{position:"absolute"},badgeTopRight:{top:-2,right:-2,alignItems:"center",justifyContent:"center"},badgeBottomRight:{bottom:-2,right:-2,alignItems:"center",justifyContent:"center"},statusTopRight:{top:0,right:0},statusBottomRight:{bottom:0,right:0}}),SPACING_OFFSET={tight:-16,normal:-12,loose:-8},STAGGER_MS=50,ENTRANCE_DURATION_MS=220,AvatarGroupItem=({delay:e,marginLeft:r,borderColor:t,borderWidth:o,children:s})=>{const a=useRef(createAnimatedValue(0)).current;return useEffect(()=>{const r=Animated.timing(a,{toValue:1,duration:220,delay:e,easing:Easing.out(Easing.cubic),useNativeDriver:!0});return r.start(),()=>r.stop()},[e,a]),_jsx(Animated.View,{style:[groupStyles.item,{marginLeft:r,borderColor:t,borderWidth:o,opacity:a}],children:s})},AvatarGroup=e=>{const{children:r,max:t=4,size:o="md",spacing:s="normal",overflowVariant:a="count",accessibilityLabel:i,style:n,testID:l}=e,c=useTheme(),d=useMemo(()=>Children.toArray(r).filter(e=>isValidElement(e)),[r]),u=d.length,h=d.slice(0,t),m=Math.max(0,u-t),g=m>0,b=SPACING_OFFSET[s],p=c.colors.background.elevated,y=i??`Group of ${u} ${1===u?"person":"people"}`,f=useMemo(()=>resolveSize(o),[o]),v=Math.max(10,Math.round(.34*f));return _jsxs(View,{style:[groupStyles.row,n],accessible:!0,accessibilityLabel:y,accessibilityRole:"summary",testID:l,children:[h.map((e,r)=>{const t=e.key??`avatar-${r}`;return _jsx(AvatarGroupItem,{delay:50*r,marginLeft:0===r?0:b,borderColor:p,borderWidth:1.5,children:cloneElement(e,{size:o})},t)}),g?_jsx(AvatarGroupItem,{delay:50*h.length,marginLeft:0===h.length?0:b,borderColor:p,borderWidth:1.5,children:_jsx(View,{style:[groupStyles.overflow,{width:f,height:f,borderRadius:f/2,...smoothCorners,backgroundColor:c.colors.surface.disabled}],accessible:!0,accessibilityRole:"text",accessibilityLabel:"count"===a?`${m} more`:"More avatars",children:_jsx(Text,{style:{color:c.colors.text.secondary,fontSize:v,fontWeight:c.typography.fontWeight.semibold},numberOfLines:1,allowFontScaling:!1,children:"count"===a?`+${m}`:"+"})})},"avatar-overflow"):null]})},groupStyles=StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},item:{borderRadius:9999,...smoothCorners},overflow:{alignItems:"center",justifyContent:"center"}}),AvatarWithGroup=Avatar;AvatarWithGroup.Group=AvatarGroup;export{Avatar,AvatarGroup};export default AvatarWithGroup;

package/lib/module/components/Avatar/index.js

@@ -1,4 +1 @@
-"use strict";
-
-export { Avatar, AvatarGroup, avatarToneColors, default } from "./Avatar.js";
-//# sourceMappingURL=index.js.map
+"use strict";export{Avatar,AvatarGroup,avatarToneColors,default}from"./Avatar.js";