@oxyhq/bloom 0.8.6 → 0.9.0

package/lib/typescript/module/avatar-group/types.d.ts

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+/**
+ * A single member of an {@link AvatarGroup}. Mirrors the minimal shape needed to
+ * render an {@link Avatar} plus drive the optional hover card. `uri` is the
+ * avatar image URL; `name`/`displayName` feed Avatar's deterministic
+ * name-based placeholder when no image resolves.
+ */
+export interface AvatarGroupItem {
+    /** Stable identity used as a React key and passed back to handlers. */
+    id?: string;
+    /** Avatar image URL (null/undefined → name-based placeholder). */
+    uri?: string | null;
+    /** Fallback name used for the avatar placeholder when `displayName` is absent. */
+    name?: string;
+    /** Canonical, already-resolved display name (preferred over `name`). */
+    displayName?: string;
+    /** Handle without the leading `@`. */
+    username?: string;
+}
+export interface AvatarGroupProps {
+    /** Members to render, in stacking order (first item sits on top). */
+    items: AvatarGroupItem[];
+    /** Diameter of each avatar in pixels. */
+    size?: number;
+    /** Maximum number of avatars to render before collapsing into the overflow chip. */
+    max?: number;
+    /**
+     * Real total count of members. When provided and larger than the number of
+     * rendered avatars, the overflow chip shows `+ (total - shown)`. When omitted,
+     * overflow is derived from `items.length - shown`.
+     */
+    total?: number;
+    /**
+     * Horizontal overlap between adjacent avatars in pixels. Defaults to ~35% of
+     * `size`. Larger values pull avatars closer together.
+     */
+    overlap?: number;
+    /**
+     * Color of the ring/border drawn around each avatar so they separate cleanly.
+     * Defaults to the theme `card` surface color.
+     */
+    ringColor?: string;
+    /**
+     * Per-avatar press handler. When provided, each avatar (and the overflow chip)
+     * becomes pressable. When omitted, the group is purely presentational.
+     */
+    onPressItem?: (item: AvatarGroupItem, index: number) => void;
+    /**
+     * Enables the hover card on web. Hovering an avatar reveals a
+     * {@link UserHoverCard} for that item. No-op on native.
+     */
+    hoverCard?: boolean;
+    /**
+     * Per-item action slot rendered inside the hover card — typically the app's
+     * SDK FollowButton. Only used when `hoverCard` is enabled (web).
+     */
+    renderItemAction?: (item: AvatarGroupItem, index: number) => ReactNode;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/module/avatar-group/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/avatar-group/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,uEAAuE;IACvE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kEAAkE;IAClE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,kFAAkF;IAClF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,qEAAqE;IACrE,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACvE,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/lib/typescript/module/index.d.ts

@@ -19,6 +19,10 @@ export * from './collapsible';
 export { ErrorBoundary } from './error-boundary';
 export type { ErrorBoundaryProps, ErrorBoundaryFallback, ErrorBoundaryFallbackContext, } from './error-boundary';
 export * from './avatar';
+export { AvatarGroup } from './avatar-group';
+export type { AvatarGroupProps, AvatarGroupItem } from './avatar-group';
+export { UserHoverCard } from './user-hover-card';
+export type { UserHoverCardProps, UserHoverCardStat } from './user-hover-card';
 export * from './loading';
 export * as PromptInput from './prompt-input';
 export * from './switch';

package/lib/typescript/module/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"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"}

package/lib/typescript/module/index.web.d.ts

@@ -19,6 +19,10 @@ export * from './collapsible';
 export { ErrorBoundary } from './error-boundary';
 export type { ErrorBoundaryProps, ErrorBoundaryFallback, ErrorBoundaryFallbackContext, } from './error-boundary';
 export * from './avatar';
+export { AvatarGroup } from './avatar-group/index.web';
+export type { AvatarGroupProps, AvatarGroupItem } from './avatar-group/index.web';
+export { UserHoverCard } from './user-hover-card';
+export type { UserHoverCardProps, UserHoverCardStat } from './user-hover-card';
 export * from './loading/index.web';
 export * as PromptInput from './prompt-input';
 export * from './switch';

package/lib/typescript/module/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../src/index.web.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../src/index.web.ts"],"names":[],"mappings":"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"}

package/lib/typescript/module/user-hover-card/UserHoverCard.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { UserHoverCardProps } from './types';
+export declare const UserHoverCard: React.NamedExoticComponent<UserHoverCardProps>;
+//# sourceMappingURL=UserHoverCard.d.ts.map

package/lib/typescript/module/user-hover-card/UserHoverCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserHoverCard.d.ts","sourceRoot":"","sources":["../../../../src/user-hover-card/UserHoverCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAc7C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA4LlD,eAAO,MAAM,aAAa,gDAA+B,CAAC"}

package/lib/typescript/module/user-hover-card/index.d.ts

@@ -0,0 +1,3 @@
+export { UserHoverCard } from './UserHoverCard';
+export type { UserHoverCardProps, UserHoverCardStat } from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/user-hover-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/user-hover-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/lib/typescript/module/user-hover-card/types.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+/** A single labeled metric rendered in the {@link UserHoverCardProps.stats} row. */
+export interface UserHoverCardStat {
+    /** Human-readable label, e.g. `"Followers"`. */
+    label: string;
+    /** Pre-formatted value, e.g. `"1.2K"` or `42`. */
+    value: string | number;
+}
+export interface UserHoverCardProps {
+    /**
+     * Avatar image source — a URL string, or null/undefined to fall back to the
+     * deterministic name-based placeholder rendered by {@link Avatar}.
+     */
+    avatar?: string | null;
+    /** Canonical, already-resolved display name (an API contract — render directly). */
+    displayName: string;
+    /** Handle without the leading `@` (the component prefixes it). */
+    username?: string;
+    /** Optional short biography; truncated to a few lines. */
+    bio?: string;
+    /** Optional metrics row (e.g. Following / Followers). */
+    stats?: UserHoverCardStat[];
+    /** Whether to show the verified badge next to the display name. */
+    verified?: boolean;
+    /** Makes the identity area (avatar + name + handle) pressable. */
+    onPressProfile?: () => void;
+    /**
+     * Slot for a consumer-injected action — typically the app's SDK FollowButton.
+     * Bloom does NOT implement follow logic; it only renders the card.
+     */
+    action?: ReactNode;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/module/user-hover-card/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/user-hover-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,oFAAoF;AACpF,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,oFAAoF;IACpF,WAAW,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.8.6",
+  "version": "0.9.0",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -170,6 +170,33 @@
         "default": "./lib/commonjs/avatar/index.js"
       }
     },
+    "./avatar-group": {
+      "react-native": "./src/avatar-group/index.ts",
+      "browser": {
+        "types": "./lib/typescript/module/avatar-group/index.web.d.ts",
+        "import": "./lib/module/avatar-group/index.web.js",
+        "require": "./lib/commonjs/avatar-group/index.web.js"
+      },
+      "import": {
+        "types": "./lib/typescript/module/avatar-group/index.d.ts",
+        "default": "./lib/module/avatar-group/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/avatar-group/index.d.ts",
+        "default": "./lib/commonjs/avatar-group/index.js"
+      }
+    },
+    "./user-hover-card": {
+      "react-native": "./src/user-hover-card/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/user-hover-card/index.d.ts",
+        "default": "./lib/module/user-hover-card/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/user-hover-card/index.d.ts",
+        "default": "./lib/commonjs/user-hover-card/index.js"
+      }
+    },
     "./loading": {
       "react-native": "./src/loading/index.ts",
       "browser": {
@@ -698,6 +725,8 @@
     "button",
     "theme",
     "avatar",
+    "avatar-group",
+    "user-hover-card",
     "loading",
     "divider",
     "collapsible",

package/src/avatar-group/AvatarGroup.stories.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AvatarGroup } from './AvatarGroup';
+import type { AvatarGroupItem } from './types';
+
+const ITEMS: AvatarGroupItem[] = [
+  { id: '1', displayName: 'Ada Lovelace', username: 'ada' },
+  { id: '2', displayName: 'Grace Hopper', username: 'grace' },
+  { id: '3', displayName: 'Alan Turing', username: 'alan' },
+  { id: '4', displayName: 'Linus Torvalds', username: 'linus' },
+  { id: '5', displayName: 'Margaret Hamilton', username: 'margaret' },
+  { id: '6', displayName: 'Katherine Johnson', username: 'katherine' },
+  { id: '7', displayName: 'Dennis Ritchie', username: 'dennis' },
+];
+
+const WITH_PHOTOS: AvatarGroupItem[] = [
+  {
+    id: '1',
+    displayName: 'Nate Isern',
+    username: 'nate',
+    uri: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop',
+  },
+  {
+    id: '2',
+    displayName: 'Jordan Lee',
+    username: 'jordan',
+    uri: 'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?w=200&h=200&fit=crop',
+  },
+  {
+    id: '3',
+    displayName: 'Sam Rivera',
+    username: 'sam',
+    uri: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop',
+  },
+  { id: '4', displayName: 'Priya Patel', username: 'priya' },
+  { id: '5', displayName: 'Chris Doe', username: 'chris' },
+];
+
+const meta: Meta<typeof AvatarGroup> = {
+  title: 'Components/AvatarGroup',
+  component: AvatarGroup,
+  argTypes: {
+    size: { control: { type: 'number', min: 16, max: 96, step: 4 } },
+    max: { control: { type: 'number', min: 1, max: 10, step: 1 } },
+    overlap: { control: { type: 'number', min: 0, max: 48, step: 1 } },
+    hoverCard: { control: 'boolean' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AvatarGroup>;
+
+/** Header / starter-pack use-case: purely presentational, no interaction. */
+export const Presentational: Story = {
+  args: { items: ITEMS, size: 32, max: 5 },
+};
+
+export const WithPhotos: Story = {
+  args: { items: WITH_PHOTOS, size: 40, max: 5 },
+  name: 'With photos',
+};
+
+/** Overflow chip showing `+N` derived from `total`. */
+export const WithTotal: Story = {
+  args: { items: ITEMS, size: 36, max: 4, total: 128 },
+  name: 'With explicit total',
+};
+
+/** Each avatar is pressable — the consumer navigates to the profile. */
+export const Pressable: Story = {
+  render: (args) => (
+    <View style={{ gap: 12 }}>
+      <AvatarGroup
+        {...args}
+        items={ITEMS}
+        size={40}
+        max={5}
+        onPressItem={(item) => {
+          // eslint-disable-next-line no-alert
+          if (typeof window !== 'undefined') window.alert(`@${item.username}`);
+        }}
+      />
+      <Text>Tap an avatar to fire onPressItem.</Text>
+    </View>
+  ),
+};
+
+/** Web-only: hovering an avatar reveals the UserHoverCard. */
+export const HoverCard: Story = {
+  render: (args) => (
+    <View style={{ gap: 12, minHeight: 240 }}>
+      <AvatarGroup
+        {...args}
+        items={WITH_PHOTOS}
+        size={44}
+        max={5}
+        hoverCard
+        onPressItem={(item) => {
+          // eslint-disable-next-line no-alert
+          if (typeof window !== 'undefined') window.alert(`@${item.username}`);
+        }}
+        renderItemAction={(item) => (
+          <View
+            style={{
+              paddingHorizontal: 12,
+              paddingVertical: 6,
+              borderRadius: 999,
+              backgroundColor: '#1A73E8',
+            }}
+          >
+            <Text style={{ color: '#fff', fontWeight: '600', fontSize: 13 }}>
+              Follow
+            </Text>
+          </View>
+        )}
+      />
+      <Text>Hover an avatar (web) to see the card with an injected action.</Text>
+    </View>
+  ),
+  name: 'Hover card (web)',
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <AvatarGroup items={ITEMS} size={24} max={5} />
+      <AvatarGroup items={ITEMS} size={32} max={5} />
+      <AvatarGroup items={ITEMS} size={48} max={5} />
+      <AvatarGroup items={ITEMS} size={64} max={5} />
+    </View>
+  ),
+};

package/src/avatar-group/AvatarGroup.tsx

@@ -0,0 +1,19 @@
+import React, { memo } from 'react';
+
+import { AvatarGroupBase } from './AvatarGroupBase';
+import type { AvatarGroupProps } from './types';
+
+/**
+ * Native `AvatarGroup` — an overlapping, ringed stack of {@link Avatar}s with a
+ * trailing `+N` overflow chip.
+ *
+ * Hover behavior is web-only; on native the `hoverCard` / `renderItemAction`
+ * props are accepted for API parity but intentionally do nothing (no hover on
+ * touch devices). The web fork (`AvatarGroup.web.tsx`) wires up the hover card.
+ */
+const AvatarGroupComponent: React.FC<AvatarGroupProps> = (props) => {
+  return <AvatarGroupBase {...props} />;
+};
+
+export const AvatarGroup = memo(AvatarGroupComponent);
+AvatarGroup.displayName = 'AvatarGroup';

package/src/avatar-group/AvatarGroup.web.tsx

@@ -0,0 +1,145 @@
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import { Portal } from '../portal';
+import { Z_INDEX } from '../styles/z-index';
+import { UserHoverCard } from '../user-hover-card';
+import {
+  AvatarGroupBase,
+  type AvatarGroupCellHoverHandlers,
+} from './AvatarGroupBase';
+import type { AvatarGroupItem, AvatarGroupProps } from './types';
+
+/** Delay before dismissing the card so the cursor can travel into it. */
+const CLOSE_DELAY_MS = 120;
+/** Gap between the anchored avatar and the floating card. */
+const CARD_GAP = 8;
+const CARD_WIDTH = 280;
+
+interface HoverState {
+  item: AvatarGroupItem;
+  index: number;
+  top: number;
+  left: number;
+}
+
+function getItemName(item: AvatarGroupItem): string {
+  return item.displayName ?? item.name ?? item.username ?? '';
+}
+
+/**
+ * Web `AvatarGroup`. Identical stack rendering to native via
+ * {@link AvatarGroupBase}, plus an optional hover card: when `hoverCard` is
+ * enabled, hovering an avatar reveals a {@link UserHoverCard} positioned beneath
+ * it. The card receives the per-item `renderItemAction` slot so the app can drop
+ * its SDK FollowButton inside.
+ */
+const AvatarGroupWebComponent: React.FC<AvatarGroupProps> = (props) => {
+  const { hoverCard, renderItemAction, onPressItem } = props;
+  const [hover, setHover] = useState<HoverState | null>(null);
+  const cellRefs = useRef<Map<number, View>>(new Map());
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const cancelClose = useCallback(() => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  }, []);
+
+  const scheduleClose = useCallback(() => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => setHover(null), CLOSE_DELAY_MS);
+  }, [cancelClose]);
+
+  const registerCellRef = useCallback((index: number, node: View | null) => {
+    if (node) cellRefs.current.set(index, node);
+    else cellRefs.current.delete(index);
+  }, []);
+
+  const handleHoverIn = useCallback(
+    (item: AvatarGroupItem, index: number) => {
+      cancelClose();
+      const node = cellRefs.current.get(index);
+      if (!node) return;
+      node.measureInWindow((x, y, width, height) => {
+        // Center the card under the avatar, clamped to the viewport.
+        const viewportWidth =
+          typeof window !== 'undefined' ? window.innerWidth : CARD_WIDTH;
+        let left = x + width / 2 - CARD_WIDTH / 2;
+        left = Math.max(
+          CARD_GAP,
+          Math.min(left, viewportWidth - CARD_WIDTH - CARD_GAP),
+        );
+        setHover({
+          item,
+          index,
+          top: y + height + CARD_GAP,
+          left,
+        });
+      });
+    },
+    [cancelClose],
+  );
+
+  const hoverHandlers = useMemo<AvatarGroupCellHoverHandlers | undefined>(() => {
+    if (!hoverCard) return undefined;
+    return {
+      onHoverIn: handleHoverIn,
+      onHoverOut: scheduleClose,
+      registerCellRef,
+    };
+  }, [hoverCard, handleHoverIn, scheduleClose, registerCellRef]);
+
+  return (
+    <>
+      <AvatarGroupBase {...props} hoverHandlers={hoverHandlers} />
+      {hoverCard && hover && (
+        <Portal>
+          {/*
+            A Pressable hosts the hover-bridge: `onHoverIn`/`onHoverOut` are
+            typed in React Native (and map to mouseenter/mouseleave on
+            react-native-web), so the card stays open while the cursor is over
+            it without any web-only DOM-prop type suppression.
+          */}
+          <Pressable
+            onHoverIn={cancelClose}
+            onHoverOut={scheduleClose}
+            accessibilityRole="none"
+            pointerEvents="auto"
+            style={[
+              webStyles.floating,
+              { top: hover.top, left: hover.left, width: CARD_WIDTH },
+            ]}
+          >
+            <UserHoverCard
+              avatar={hover.item.uri ?? undefined}
+              displayName={getItemName(hover.item)}
+              username={hover.item.username}
+              onPressProfile={
+                onPressItem
+                  ? () => onPressItem(hover.item, hover.index)
+                  : undefined
+              }
+              action={renderItemAction?.(hover.item, hover.index)}
+              style={webStyles.card}
+            />
+          </Pressable>
+        </Portal>
+      )}
+    </>
+  );
+};
+
+const webStyles = StyleSheet.create({
+  floating: {
+    position: 'fixed' as 'absolute',
+    zIndex: Z_INDEX.tooltip,
+  },
+  card: {
+    width: CARD_WIDTH,
+  },
+});
+
+export const AvatarGroup = memo(AvatarGroupWebComponent);
+AvatarGroup.displayName = 'AvatarGroup';