@webority/mobile-ui 0.0.38 → 0.1.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
+import{Image as r}from"expo-image";import e,{Children as o,cloneElement as t,forwardRef as i,isValidElement as n,useEffect as a,useMemo as s,useRef as c,useState as l}from"react";import{Animated as d,Easing as u,StyleSheet as g,Text as h,View as b}from"react-native";import{createAnimatedValue as m,useTheme as p}from"../../theme/index.js";import{tintOf as y}from"../../utils/color.js";import{smoothCorners as f}from"../../utils/corners.js";import{AppIcon as v}from"../AppIcon/index.js";import{Skeleton as C}from"../Skeleton/index.js";import{jsx as w,jsxs as x}from"react/jsx-runtime";export const avatarToneColors=(r,e)=>{const soft=(r,e)=>y(r,.14,e);switch(e){case"primary":return{background:soft(r.colors.primary,r.colors.primaryMuted),color:r.colors.primary};case"secondary":return{background:r.colors.secondary,color:r.colors.onSecondary};case"success":return{background:soft(r.colors.success,r.colors.background.secondary),color:r.colors.success};case"warning":return{background:soft(r.colors.warning,r.colors.background.secondary),color:r.colors.warning};case"error":return{background:soft(r.colors.error,r.colors.background.secondary),color:r.colors.error};case"info":return{background:soft(r.colors.info,r.colors.background.secondary),color:r.colors.info};default:return{background:r.colors.background.tertiary,color:r.colors.text.primary}}};const k={xs:24,sm:32,md:48,lg:64,xl:80},resolveSize=r=>"number"==typeof r?r:k[r],resolveRadius=(r,e)=>{switch(r){case"circle":return e/2;case"rounded":return Math.max(6,Math.round(.22*e));default:return 0}},statusColor=(r,e)=>{switch(e){case"online":case"verified":return r.colors.success;case"busy":return r.colors.error;case"away":case"pending":return r.colors.warning;default:return r.colors.text.tertiary}},R=i((e,o)=>{const{source:t,ImageComponent:i,name:n,size:a="md",shape:c="circle",status:d=null,statusPosition:u="bottomRight",tone:g,backgroundColor:m,color:y,fontSize:C,loading:k=!1,accessibilityLabel:R,style:M,textStyle:W,testID:j}=e,S=p(),z=S.components.avatar,[L,A]=l(!1),$=s(()=>resolveSize(a),[a]),D=s(()=>resolveRadius(c,$),[c,$]),B=z?.borderWidth??0,T=z?.borderColor??S.colors.border.primary,E=z?.statusBorderWidth??2,F=z?.statusBorderColor??S.colors.background.elevated,P=s(()=>(r=>{if(!r)return"";const e=r.trim().split(/\s+/u).filter(Boolean);return 0===e.length?"":1===e.length?e[0].charAt(0).toUpperCase():(e[0].charAt(0)+e[1].charAt(0)).toUpperCase()})(n),[n]),G=s(()=>g?avatarToneColors(S,g):null,[S,g]),N=s(()=>m||(G?.background??((r,e)=>{if(!r)return e[0];let o=0;for(let e=0;e<r.length;e+=1)o=(o<<5)-o+r.charCodeAt(e),o|=0;return e[Math.abs(o)%e.length]})(n??"",S.colors.avatarPalette)),[m,G,n,S.colors.avatarPalette]),V=y??G?.color??S.colors.onPrimary,O=!!t&&!L,U=z?.fontSizeRatio??.4,q=C??z?.fontSize??Math.max(10,Math.round($*U)),H=Math.max(8,Math.round(.25*$)),J=(r=>"verified"===r||"pending"===r)(d),K=z?.ringWidth??1.5,Q=$-2*(J?K+(z?.ringGap??K):0),X=J?resolveRadius(c,Q):D,Y=J?statusColor(S,d):"transparent",Z=Math.max(12,Math.round(.32*$)),_=Math.max(10,Z-4),rr=O?S.colors.background.tertiary:N,er=j??"avatar",or=n?`${n}'s avatar`:"Avatar",tr=R??("verified"===d?`${or}, verified`:"pending"===d?`${or}, pending verification`:or),ir=x(b,{ref:o,style:[I.root,{width:$,height:$,borderRadius:D,...f,borderWidth:J?0:B,borderColor:T,backgroundColor:J?"transparent":rr},M],accessible:!0,accessibilityRole:"image",accessibilityLabel:tr,testID:j,children:[J?w(b,{style:[I.ring,{borderRadius:D,...f,borderWidth:K,borderColor:Y}],accessible:!1,pointerEvents:"none",testID:`${er}-ring`}):null,w(b,{style:[I.picture,{width:Q,height:Q,borderRadius:X,...f,borderWidth:J?B:0,borderColor:T,backgroundColor:J?rr:"transparent"}],children:O?(()=>{const e={width:Q,height:Q,borderRadius:X,...f},onError=()=>A(!0);return i?w(i,{source:t,onError:onError,style:e,contentFit:"cover",resizeMode:"cover",accessibilityIgnoresInvertColors:!0}):w(r,{source:t,onError:onError,style:e,contentFit:"cover",accessibilityIgnoresInvertColors:!0})})():w(h,{style:[I.initials,{color:V,fontSize:q,fontWeight:S.typography.fontWeight[z?.fontWeight??"semibold"]},W],numberOfLines:1,allowFontScaling:!1,children:P??" "})}),"verified"===d?w(b,{style:[I.status,"topRight"===u?I.badgeTopRight:I.badgeBottomRight,{width:Z,height:Z,borderRadius:Z/2,...f,backgroundColor:F}],accessible:!1,pointerEvents:"none",testID:`${er}-badge`,children:w(v,{name:"verify",variant:"bold",size:_,color:Y})}):null,d&&!J?w(b,{style:[I.status,"topRight"===u?I.statusTopRight:I.statusBottomRight,{width:H,height:H,borderRadius:H/2,...f,backgroundColor:statusColor(S,d),borderWidth:E,borderColor:F}],accessible:!1,pointerEvents:"none"}):null]});return k?w(AvatarSkeleton,{...e}):ir});R.displayName="Avatar";const AvatarSkeleton=({size:r="md",shape:e="circle",style:o})=>{const t=resolveSize(r);return w(C,{shape:"circle"===e?"circle":"rounded"===e?"rounded":"rect",width:t,height:t,style:o})};AvatarSkeleton.displayName="AvatarSkeleton",R.Skeleton=AvatarSkeleton;const I=g.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}}),M={tight:-16,normal:-12,loose:-8},AvatarGroupItem=({delay:r,marginLeft:e,borderColor:o,borderWidth:t,children:i})=>{const n=c(m(0)).current;return a(()=>{const e=d.timing(n,{toValue:1,duration:220,delay:r,easing:u.out(u.cubic),useNativeDriver:!0});return e.start(),()=>e.stop()},[r,n]),w(d.View,{style:[W.item,{marginLeft:e,borderColor:o,borderWidth:t,opacity:n}],children:i})},AvatarGroup=r=>{const{children:e,max:i=4,size:a="md",spacing:c="normal",overflowVariant:l="count",accessibilityLabel:d,style:u,testID:g}=r,m=p(),y=s(()=>o.toArray(e).filter(r=>n(r)),[e]),v=y.length,C=y.slice(0,i),k=Math.max(0,v-i),R=k>0,I=M[c],j=m.colors.background.elevated,S=d??`Group of ${v} ${1===v?"person":"people"}`,z=s(()=>resolveSize(a),[a]),L=Math.max(10,Math.round(.34*z));return x(b,{style:[W.row,u],accessible:!0,accessibilityLabel:S,accessibilityRole:"summary",testID:g,children:[C.map((r,e)=>{const o=r.key??`avatar-${e}`;return w(AvatarGroupItem,{delay:50*e,marginLeft:0===e?0:I,borderColor:j,borderWidth:1.5,children:t(r,{size:a})},o)}),R?w(AvatarGroupItem,{delay:50*C.length,marginLeft:0===C.length?0:I,borderColor:j,borderWidth:1.5,children:w(b,{style:[W.overflow,{width:z,height:z,borderRadius:z/2,...f,backgroundColor:m.colors.surface.disabled}],accessible:!0,accessibilityRole:"text",accessibilityLabel:"count"===l?`${k} more`:"More avatars",children:w(h,{style:{color:m.colors.text.secondary,fontSize:L,fontWeight:m.typography.fontWeight.semibold},numberOfLines:1,allowFontScaling:!1,children:"count"===l?`+${k}`:"+"})})},"avatar-overflow"):null]})},W=g.create({row:{flexDirection:"row",alignItems:"center"},item:{borderRadius:9999,...f},overflow:{alignItems:"center",justifyContent:"center"}}),j=R;j.Group=AvatarGroup;export{R as Avatar,AvatarGroup};export default j;

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

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