@webority/mobile-ui 0.0.0-stage → 0.0.34

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

@@ -0,0 +1,502 @@
+"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

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

@@ -0,0 +1,32 @@
+"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