@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/commonjs/components/Avatar/Avatar.js

@@ -1,502 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.avatarToneColors = exports.AvatarGroup = exports.Avatar = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _index = require("../../theme/index.js");
-var _color = require("../../utils/color.js");
-var _corners = require("../../utils/corners.js");
-var _index2 = require("../AppIcon/index.js");
-var _index3 = require("../Skeleton/index.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * 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.
- */
-
-// 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. */
-const avatarToneColors = (theme, tone) => {
-  const soft = (accent, fallback) => (0, _color.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
-      };
-  }
-};
-exports.avatarToneColors = avatarToneColors;
-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 = exports.Avatar = /*#__PURE__*/(0, _react.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 = (0, _index.useTheme)();
-  const avatarTokens = theme.components.avatar;
-  const [imageFailed, setImageFailed] = (0, _react.useState)(false);
-  const dimension = (0, _react.useMemo)(() => resolveSize(size), [size]);
-  const borderRadius = (0, _react.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 = (0, _react.useMemo)(() => initialsFromName(name), [name]);
-  const toneColors = (0, _react.useMemo)(() => tone ? avatarToneColors(theme, tone) : null, [theme, tone]);
-  const resolvedBackground = (0, _react.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    ref: ref,
-    style: [styles.root, {
-      width: dimension,
-      height: dimension,
-      borderRadius,
-      ..._corners.smoothCorners,
-      borderWidth: ringStatus ? 0 : borderWidth,
-      borderColor,
-      backgroundColor: ringStatus ? 'transparent' : surfaceBackground
-    }, style],
-    accessible: true,
-    accessibilityRole: "image",
-    accessibilityLabel: a11yLabel,
-    testID: testID,
-    children: [ringStatus ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.ring, {
-        borderRadius,
-        ..._corners.smoothCorners,
-        borderWidth: ringWidth,
-        borderColor: ringColor
-      }],
-      accessible: false,
-      pointerEvents: "none",
-      testID: `${idBase}-ring`
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.picture, {
-        width: pictureDimension,
-        height: pictureDimension,
-        borderRadius: pictureRadius,
-        ..._corners.smoothCorners,
-        borderWidth: ringStatus ? borderWidth : 0,
-        borderColor,
-        backgroundColor: ringStatus ? surfaceBackground : 'transparent'
-      }],
-      children: showImage ? (() => {
-        const ImageEl = ImageComponent ?? _reactNative.Image;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageEl, {
-          source: source,
-          onError: () => setImageFailed(true),
-          style: {
-            width: pictureDimension,
-            height: pictureDimension,
-            borderRadius: pictureRadius,
-            ..._corners.smoothCorners
-            // ImageStyle omits borderCurve; the native image view honours it.
-          },
-          resizeMode: "cover",
-          accessibilityIgnoresInvertColors: true
-        });
-      })() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.initials, {
-          color: resolvedTextColor,
-          fontSize,
-          fontWeight: theme.typography.fontWeight[avatarTokens?.fontWeight ?? 'semibold']
-        }, textStyle],
-        numberOfLines: 1,
-        allowFontScaling: false,
-        children: initials ?? ' '
-      })
-    }), status === 'verified' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.status, statusPosition === 'topRight' ? styles.badgeTopRight : styles.badgeBottomRight, {
-        width: badgeSize,
-        height: badgeSize,
-        borderRadius: badgeSize / 2,
-        ..._corners.smoothCorners,
-        backgroundColor: statusBorderColor
-      }],
-      accessible: false,
-      pointerEvents: "none",
-      testID: `${idBase}-badge`,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.AppIcon, {
-        name: "verify",
-        variant: "bold",
-        size: badgeIconSize,
-        color: ringColor
-      })
-    }) : null, status && !ringStatus ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.status, statusPosition === 'topRight' ? styles.statusTopRight : styles.statusBottomRight, {
-        width: statusSize,
-        height: statusSize,
-        borderRadius: statusSize / 2,
-        ..._corners.smoothCorners,
-        backgroundColor: statusColor(theme, status),
-        borderWidth: statusBorder,
-        borderColor: statusBorderColor
-      }],
-      accessible: false,
-      pointerEvents: "none"
-    }) : null]
-  });
-  if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_index3.Skeleton, {
-    shape: skeletonShape,
-    width: dim,
-    height: dim,
-    style: style
-  });
-};
-AvatarSkeleton.displayName = 'AvatarSkeleton';
-Avatar.Skeleton = AvatarSkeleton;
-const styles = _reactNative.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 = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  (0, _react.useEffect)(() => {
-    const anim = _reactNative.Animated.timing(opacity, {
-      toValue: 1,
-      duration: ENTRANCE_DURATION_MS,
-      delay,
-      easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
-      useNativeDriver: true
-    });
-    anim.start();
-    return () => anim.stop();
-  }, [delay, opacity]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 = (0, _index.useTheme)();
-  const validChildren = (0, _react.useMemo)(() => _react.Children.toArray(children).filter(c => /*#__PURE__*/(0, _react.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 = (0, _react.useMemo)(() => resolveSize(size), [size]);
-  const overflowFontSize = Math.max(10, Math.round(overflowDimension * 0.34));
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _react.cloneElement)(child, {
-        size
-      });
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarGroupItem, {
-        delay: index * STAGGER_MS,
-        marginLeft: index === 0 ? 0 : offset,
-        borderColor: borderColor,
-        borderWidth: borderWidth,
-        children: cloned
-      }, childKey);
-    }), showOverflow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarGroupItem, {
-      delay: visible.length * STAGGER_MS,
-      marginLeft: visible.length === 0 ? 0 : offset,
-      borderColor: borderColor,
-      borderWidth: borderWidth,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [groupStyles.overflow, {
-          width: overflowDimension,
-          height: overflowDimension,
-          borderRadius: overflowDimension / 2,
-          ..._corners.smoothCorners,
-          backgroundColor: theme.colors.surface.disabled
-        }],
-        accessible: true,
-        accessibilityRole: "text",
-        accessibilityLabel: overflowVariant === 'count' ? `${overflow} more` : 'More avatars',
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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]
-  });
-};
-exports.AvatarGroup = AvatarGroup;
-const groupStyles = _reactNative.StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  item: {
-    borderRadius: 9999,
-    ..._corners.smoothCorners
-  },
-  overflow: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-const AvatarWithGroup = Avatar;
-AvatarWithGroup.Group = AvatarGroup;
-var _default = exports.default = AvatarWithGroup;
-//# sourceMappingURL=Avatar.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.avatarToneColors=exports.AvatarGroup=exports.Avatar=void 0;var _expoImage=require("expo-image"),_react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_index2=require("../AppIcon/index.js"),_index3=require("../Skeleton/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var s,a,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(s=r?o:t){if(s.has(e))return s.get(e);s.set(e,i)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((a=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(a.get||a.set)?s(i,r,a):i[r]=e[r]);return i})(e,r)}const SOFT_FILL_OPACITY=.14,avatarToneColors=(e,r)=>{const soft=(e,r)=>(0,_color.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}}};exports.avatarToneColors=avatarToneColors;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=exports.Avatar=(0,_react.forwardRef)((e,r)=>{const{source:t,ImageComponent:o,name:s,size:a="md",shape:i="circle",status:n=null,statusPosition:c="bottomRight",tone:l,backgroundColor:u,color:d,fontSize:h,loading:g=!1,accessibilityLabel:m,style:p,textStyle:b,testID:v}=e,y=(0,_index.useTheme)(),_=y.components.avatar,[x,f]=(0,_react.useState)(!1),R=(0,_react.useMemo)(()=>resolveSize(a),[a]),j=(0,_react.useMemo)(()=>resolveRadius(i,R),[i,R]),C=_?.borderWidth??0,A=_?.borderColor??y.colors.border.primary,S=_?.statusBorderWidth??2,w=_?.statusBorderColor??y.colors.background.elevated,k=(0,_react.useMemo)(()=>initialsFromName(s),[s]),I=(0,_react.useMemo)(()=>l?avatarToneColors(y,l):null,[y,l]),M=(0,_react.useMemo)(()=>u||(I?.background??hashColor(s??"",y.colors.avatarPalette)),[u,I,s,y.colors.avatarPalette]),N=d??I?.color??y.colors.onPrimary,W=!!t&&!x,T=_?.fontSizeRatio??.4,G=h??_?.fontSize??Math.max(10,Math.round(R*T)),z=Math.max(8,Math.round(.25*R)),E=isRingStatus(n),L=_?.ringWidth??1.5,O=R-2*(E?L+(_?.ringGap??L):0),q=E?resolveRadius(i,O):j,F=E?statusColor(y,n):"transparent",V=Math.max(12,Math.round(.32*R)),D=Math.max(10,V-4),P=W?y.colors.background.tertiary:M,$=v??"avatar",B=s?`${s}'s avatar`:"Avatar",U=m??("verified"===n?`${B}, verified`:"pending"===n?`${B}, pending verification`:B),H=(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:r,style:[styles.root,{width:R,height:R,borderRadius:j,..._corners.smoothCorners,borderWidth:E?0:C,borderColor:A,backgroundColor:E?"transparent":P},p],accessible:!0,accessibilityRole:"image",accessibilityLabel:U,testID:v,children:[E?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.ring,{borderRadius:j,..._corners.smoothCorners,borderWidth:L,borderColor:F}],accessible:!1,pointerEvents:"none",testID:`${$}-ring`}):null,(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.picture,{width:O,height:O,borderRadius:q,..._corners.smoothCorners,borderWidth:E?C:0,borderColor:A,backgroundColor:E?P:"transparent"}],children:W?(()=>{const e={width:O,height:O,borderRadius:q,..._corners.smoothCorners},onError=()=>f(!0);return o?(0,_jsxRuntime.jsx)(o,{source:t,onError:onError,style:e,contentFit:"cover",resizeMode:"cover",accessibilityIgnoresInvertColors:!0}):(0,_jsxRuntime.jsx)(_expoImage.Image,{source:t,onError:onError,style:e,contentFit:"cover",accessibilityIgnoresInvertColors:!0})})():(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.initials,{color:N,fontSize:G,fontWeight:y.typography.fontWeight[_?.fontWeight??"semibold"]},b],numberOfLines:1,allowFontScaling:!1,children:k??" "})}),"verified"===n?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.status,"topRight"===c?styles.badgeTopRight:styles.badgeBottomRight,{width:V,height:V,borderRadius:V/2,..._corners.smoothCorners,backgroundColor:w}],accessible:!1,pointerEvents:"none",testID:`${$}-badge`,children:(0,_jsxRuntime.jsx)(_index2.AppIcon,{name:"verify",variant:"bold",size:D,color:F})}):null,n&&!E?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.status,"topRight"===c?styles.statusTopRight:styles.statusBottomRight,{width:z,height:z,borderRadius:z/2,..._corners.smoothCorners,backgroundColor:statusColor(y,n),borderWidth:S,borderColor:w}],accessible:!1,pointerEvents:"none"}):null]});return g?(0,_jsxRuntime.jsx)(AvatarSkeleton,{...e}):H});Avatar.displayName="Avatar";const AvatarSkeleton=({size:e="md",shape:r="circle",style:t})=>{const o=resolveSize(e),s="circle"===r?"circle":"rounded"===r?"rounded":"rect";return(0,_jsxRuntime.jsx)(_index3.Skeleton,{shape:s,width:o,height:o,style:t})};AvatarSkeleton.displayName="AvatarSkeleton",Avatar.Skeleton=AvatarSkeleton;const styles=_reactNative.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=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current;return(0,_react.useEffect)(()=>{const r=_reactNative.Animated.timing(a,{toValue:1,duration:220,delay:e,easing:_reactNative.Easing.out(_reactNative.Easing.cubic),useNativeDriver:!0});return r.start(),()=>r.stop()},[e,a]),(0,_jsxRuntime.jsx)(_reactNative.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:c}=e,l=(0,_index.useTheme)(),u=(0,_react.useMemo)(()=>_react.Children.toArray(r).filter(e=>(0,_react.isValidElement)(e)),[r]),d=u.length,h=u.slice(0,t),g=Math.max(0,d-t),m=g>0,p=SPACING_OFFSET[s],b=l.colors.background.elevated,v=i??`Group of ${d} ${1===d?"person":"people"}`,y=(0,_react.useMemo)(()=>resolveSize(o),[o]),_=Math.max(10,Math.round(.34*y));return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[groupStyles.row,n],accessible:!0,accessibilityLabel:v,accessibilityRole:"summary",testID:c,children:[h.map((e,r)=>{const t=e.key??`avatar-${r}`,s=(0,_react.cloneElement)(e,{size:o});return(0,_jsxRuntime.jsx)(AvatarGroupItem,{delay:50*r,marginLeft:0===r?0:p,borderColor:b,borderWidth:1.5,children:s},t)}),m?(0,_jsxRuntime.jsx)(AvatarGroupItem,{delay:50*h.length,marginLeft:0===h.length?0:p,borderColor:b,borderWidth:1.5,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[groupStyles.overflow,{width:y,height:y,borderRadius:y/2,..._corners.smoothCorners,backgroundColor:l.colors.surface.disabled}],accessible:!0,accessibilityRole:"text",accessibilityLabel:"count"===a?`${g} more`:"More avatars",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:l.colors.text.secondary,fontSize:_,fontWeight:l.typography.fontWeight.semibold},numberOfLines:1,allowFontScaling:!1,children:"count"===a?`+${g}`:"+"})})},"avatar-overflow"):null]})};exports.AvatarGroup=AvatarGroup;const groupStyles=_reactNative.StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},item:{borderRadius:9999,..._corners.smoothCorners},overflow:{alignItems:"center",justifyContent:"center"}}),AvatarWithGroup=Avatar;AvatarWithGroup.Group=AvatarGroup;var _default=exports.default=AvatarWithGroup;

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

@@ -1,32 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Avatar", {
-  enumerable: true,
-  get: function () {
-    return _Avatar.Avatar;
-  }
-});
-Object.defineProperty(exports, "AvatarGroup", {
-  enumerable: true,
-  get: function () {
-    return _Avatar.AvatarGroup;
-  }
-});
-Object.defineProperty(exports, "avatarToneColors", {
-  enumerable: true,
-  get: function () {
-    return _Avatar.avatarToneColors;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Avatar.default;
-  }
-});
-var _Avatar = _interopRequireWildcard(require("./Avatar.js"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Avatar",{enumerable:!0,get:function(){return _Avatar.Avatar}}),Object.defineProperty(exports,"AvatarGroup",{enumerable:!0,get:function(){return _Avatar.AvatarGroup}}),Object.defineProperty(exports,"avatarToneColors",{enumerable:!0,get:function(){return _Avatar.avatarToneColors}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _Avatar.default}});var _Avatar=_interopRequireWildcard(require("./Avatar.js"));function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var n,o,u={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return u;if(n=r?a:t){if(n.has(e))return n.get(e);n.set(e,u)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((o=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(o.get||o.set)?n(u,r,o):u[r]=e[r]);return u})(e,r)}