@payfit/unity-components 2.64.4 → 2.64.6

package/dist/esm/components/actionable/Actionable.js

@@ -1,6 +1,7 @@
 import { forwardRef as e, useMemo as t, useState as n } from "react";
 import { uyTv as r } from "@payfit/unity-themes";
-import { mergeProps as i, useFocus as a, useFocusVisible as o, useHover as s, useObjectRef as c } from "react-aria";
+import { mergeProps as i, useFocus as a, useHover as o, useObjectRef as s } from "react-aria";
+import { useFocusRing as c } from "react-aria/useFocusRing";
 import { useButton as l } from "react-aria/useButton";
 import { jsx as u } from "react/jsx-runtime";
 //#region src/components/actionable/Actionable.tsx
@@ -17,44 +18,44 @@ var d = r({
 	defaultVariants: { isUnstyled: !1 }
 }), f = e((e, r) => {
 	let { asElement: f = "div", isUnstyled: p = !1, className: m, children: h, ...g } = e;
-	r = c(r);
-	let { isFocusVisible: _ } = o(), { isHovered: v, hoverProps: y } = s({
+	r = s(r);
+	let { isFocusVisible: _, focusProps: v } = c(), { isHovered: y, hoverProps: b } = o({
 		onHoverStart: g.onHoverStart,
 		onHoverEnd: g.onHoverEnd,
 		onHoverChange: g.onHoverChange,
 		isDisabled: g.isDisabled
-	}), [b, x] = n(!1), { focusProps: S } = a({
-		onFocusChange: x,
+	}), [x, S] = n(!1), { focusProps: C } = a({
+		onFocusChange: S,
 		isDisabled: g.isDisabled
-	}), { buttonProps: C, isPressed: w } = l({
+	}), { buttonProps: w, isPressed: T } = l({
 		...g,
 		isDisabled: g.isDisabled,
 		elementType: f
-	}, r), T = t(() => d({
+	}, r), E = t(() => d({
 		isUnstyled: p,
 		className: m
-	}), [m, p]), E = f, D = (e) => {
+	}), [m, p]), D = f, O = (e) => {
 		if (g.isDisabled) {
 			e.preventDefault(), e.stopPropagation();
 			return;
 		}
-		let t = i(C, y, S);
+		let t = i(w, b, C, v);
 		t.onClick && t.onClick(e);
-	}, { onClick: O, ...k } = i(C, y, S);
-	return /* @__PURE__ */ u(E, {
-		...k,
-		onClick: D,
-		className: T,
-		...w && { "data-pressed": w },
-		...b && { "data-focused": b },
-		...v && { "data-hovered": v },
+	}, { onClick: k, ...A } = i(w, b, C, v);
+	return /* @__PURE__ */ u(D, {
+		...A,
+		onClick: O,
+		className: E,
+		...T && { "data-pressed": T },
+		...x && { "data-focused": x },
+		...y && { "data-hovered": y },
 		...g.isDisabled && { "data-disabled": g.isDisabled },
 		..._ && { "data-focus-visible": _ },
 		ref: r,
 		children: typeof h == "function" ? h({
-			isHovered: v,
-			isPressed: w,
-			isFocused: b,
+			isHovered: y,
+			isPressed: T,
+			isFocused: x,
 			isDisabled: !!g.isDisabled,
 			isFocusVisible: _,
 			isPending: !1,

package/dist/esm/components/avatar/Avatar.js

@@ -1,38 +1,38 @@
 import { AvatarProvider as e } from "./Avatar.context.js";
 import { avatarBase as t } from "./Avatar.variants.js";
-import * as n from "react";
-import { uyTv as r } from "@payfit/unity-themes";
-import { jsx as i } from "react/jsx-runtime";
-import * as a from "@radix-ui/react-avatar";
+import { useAvatarGroupContext as n } from "../avatar-group/AvatarGroup.context.js";
+import * as r from "react";
+import { uyMerge as i, uyTv as a } from "@payfit/unity-themes";
+import { jsx as o } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-avatar";
 //#region src/components/avatar/Avatar.tsx
-var o = r({
+var c = a({
 	extend: t,
 	base: "uy:inline-block uy:relative uy:shrink-0",
 	defaultVariants: {
 		size: "md",
 		variant: "circle"
 	}
-}), s = n.forwardRef(({ size: t = "md", variant: n = "circle", color: r, className: s, ...c }, l) => {
-	let u = o({
-		variant: n,
-		size: t,
-		color: r,
-		className: s
-	});
-	return /* @__PURE__ */ i(e, {
-		variant: n,
-		size: t,
+}), l = r.forwardRef(({ size: t, variant: r = "circle", color: a, className: l, ...u }, d) => {
+	let f = n(), p = t ?? f?.defaultSize ?? "md", m = i(c({
+		variant: r,
+		size: p,
+		color: a
+	}), f?.variant === "stack" ? "uy:outline-1 uy:outline-solid uy:outline-grayscale-l0" : void 0, l);
+	return /* @__PURE__ */ o(e, {
+		variant: r,
+		size: p,
 		hasPair: !1,
-		color: r,
-		children: /* @__PURE__ */ i(a.Root, {
-			ref: l,
+		color: a,
+		children: /* @__PURE__ */ o(s.Root, {
+			ref: d,
 			role: "img",
-			className: u,
+			className: m,
 			"data-dd-privacy": "allow",
-			...c
+			...u
 		})
 	});
 });
-s.displayName = a.Root.displayName;
+l.displayName = s.Root.displayName;
 //#endregion
-export { s as Avatar };
+export { l as Avatar };

package/dist/esm/components/avatar/AvatarWithTooltip.d.ts

@@ -0,0 +1,46 @@
+import { AvatarProps } from './Avatar.js';
+import * as React from 'react';
+/** Props for a focusable Avatar that exposes a hover- and focus-triggered tooltip. */
+export type AvatarWithTooltipProps = AvatarProps & {
+    /** Text shown when the avatar receives hover or keyboard focus. */
+    tooltip: string;
+};
+/**
+ * Makes an Avatar focusable so people can identify it with a tooltip.
+ *
+ * Use `AvatarWithTooltip` when the avatar needs hover and keyboard-focus
+ * feedback but does not perform an action. Use `InteractiveAvatar` when the
+ * avatar also needs a press action.
+ * @param props - Avatar content, accessible naming, visual options, and tooltip text.
+ * @param props.tooltip - Text shown on hover and keyboard focus.
+ * @param props.aria-label - Accessible name announced for the avatar trigger.
+ * @param props.aria-labelledby - ID of visible text that names the avatar trigger.
+ * @param props.variant - Avatar shape: `circle` for people or `square` for entities.
+ * @param props.size - Avatar size. The AvatarGroup context supplies a responsive
+ * size when this prop is omitted.
+ * @see {@link AvatarWithTooltipProps} for all available props.
+ * @see {@link InteractiveAvatar} for an actionable avatar with the same tooltip behavior.
+ * @example
+ * ```tsx
+ * import {
+ *   AvatarFallback,
+ *   AvatarWithTooltip,
+ * } from '@payfit/unity-components'
+ *
+ * export function EmployeeAvatar() {
+ *   return (
+ *     <AvatarWithTooltip tooltip="Alex Wu" aria-label="Alex Wu">
+ *       <AvatarFallback variant="initials">AW</AvatarFallback>
+ *     </AvatarWithTooltip>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * The component renders a real button as the tooltip trigger, but it does not
+ * attach press callbacks and keeps the default cursor. The trigger receives
+ * the avatar's focus ring and the tooltip opens on hover or keyboard focus.
+ * Provide `aria-label` or `aria-labelledby`; the visible Avatar is hidden from
+ * assistive technologies because the outer trigger owns the accessible name.
+ */
+declare const AvatarWithTooltip: React.ForwardRefExoticComponent<AvatarWithTooltipProps & React.RefAttributes<HTMLButtonElement>>;
+export { AvatarWithTooltip };

package/dist/esm/components/avatar/AvatarWithTooltip.js

@@ -0,0 +1,39 @@
+import { Actionable as e } from "../actionable/Actionable.js";
+import { Tooltip as t } from "../tooltip/Tooltip.js";
+import { avatarBase as n } from "./Avatar.variants.js";
+import { useAvatarGroupContext as r } from "../avatar-group/AvatarGroup.context.js";
+import { Avatar as i } from "./Avatar.js";
+import * as a from "react";
+import { uyMerge as o } from "@payfit/unity-themes";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/avatar/AvatarWithTooltip.tsx
+var c = a.forwardRef(({ tooltip: a, "aria-label": c, "aria-labelledby": l, "aria-describedby": u, "aria-details": d, className: f, size: p, variant: m, ...h }, g) => {
+	let _ = r(), v = m ?? "circle", y = p ?? _?.defaultSize ?? "md", b = c ? { "aria-label": c } : { "aria-labelledby": l ?? "" };
+	return /* @__PURE__ */ s(t, {
+		title: a,
+		children: /* @__PURE__ */ s(e, {
+			ref: g,
+			asElement: "button",
+			type: "button",
+			"aria-label": c,
+			"aria-labelledby": l,
+			"aria-describedby": u,
+			"aria-details": d,
+			className: o(n({
+				variant: v,
+				size: y
+			}), "uy:cursor-default uy:leading-[0] uy:outline-none uy:data-[focus-visible=true]:ring-2 uy:data-[focus-visible=true]:ring-utility-focus-ring uy:data-[focus-visible=true]:ring-offset-2"),
+			children: /* @__PURE__ */ s(i, {
+				...h,
+				size: p,
+				variant: m,
+				className: f,
+				...b,
+				"aria-hidden": !0
+			})
+		})
+	});
+});
+c.displayName = "AvatarWithTooltip";
+//#endregion
+export { c as AvatarWithTooltip };

package/dist/esm/components/avatar/InteractiveAvatar.d.ts

@@ -0,0 +1,65 @@
+import { ActionableProps } from '../actionable/Actionable.js';
+import { AvatarProps } from './Avatar.js';
+import * as React from 'react';
+/** Props for an actionable Avatar with an accessible tooltip. */
+export type InteractiveAvatarProps = Omit<AvatarProps, 'aria-label' | 'aria-labelledby'> & {
+    /** Text shown on hover and keyboard focus to describe the action. */
+    tooltip: string;
+    /** Accessible name for the button. */
+    'aria-label': string;
+    /** Callback invoked when the avatar is pressed. */
+    onPress: NonNullable<ActionableProps['onPress']>;
+} & Pick<ActionableProps, 'onPressStart' | 'onPressEnd' | 'onPressChange'>;
+/**
+ * Combines an actionable Avatar with a tooltip that describes its action.
+ *
+ * Use `InteractiveAvatar` when a person or entity avatar activates an action,
+ * opens a Popover, or triggers navigation. Pass `onPress` for the action and
+ * provide the same action description through `tooltip` and `aria-label`.
+ * @param props - Avatar content, visual options, accessible naming, tooltip text, and press callbacks.
+ * @param props.tooltip - Text shown on hover and keyboard focus.
+ * @param props.aria-label - Accessible name announced for the button.
+ * @param props.onPress - Callback invoked after a pointer or keyboard press.
+ * @param props.onPressStart - Callback invoked when a press starts.
+ * @param props.onPressEnd - Callback invoked when a press ends.
+ * @param props.onPressChange - Callback invoked when the pressed state changes.
+ * @param props.variant - Avatar shape: `circle` for people or `square` for entities.
+ * @param props.size - Avatar size. The AvatarGroup context supplies a responsive
+ * size when this prop is omitted.
+ * @see {@link InteractiveAvatarProps} for all available props.
+ * @see {@link AvatarWithTooltip} for a focusable avatar without an action.
+ * @example
+ * ```tsx
+ * import {
+ *   AvatarFallback,
+ *   InteractiveAvatar,
+ * } from '@payfit/unity-components'
+ *
+ * export function EmployeeAction({ openProfile }: { openProfile: () => void }) {
+ *   return (
+ *     <InteractiveAvatar
+ *       tooltip="Open Alex Wu's profile"
+ *       aria-label="Open Alex Wu's profile"
+ *       onPress={openProfile}
+ *     >
+ *       <AvatarFallback variant="initials">AW</AvatarFallback>
+ *     </InteractiveAvatar>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * The component renders a real button and supports React Aria press
+ * callbacks, including keyboard activation. Its focus ring follows the
+ * selected `variant`. Provide `aria-label` because the inner visual Avatar is
+ * hidden from assistive technologies; use `PopoverTrigger` when the action
+ * opens a Popover.
+ */
+declare const InteractiveAvatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "aria-label" | "aria-labelledby"> & {
+    /** Text shown on hover and keyboard focus to describe the action. */
+    tooltip: string;
+    /** Accessible name for the button. */
+    'aria-label': string;
+    /** Callback invoked when the avatar is pressed. */
+    onPress: NonNullable<ActionableProps["onPress"]>;
+} & Pick<ActionableProps, "onPressStart" | "onPressEnd" | "onPressChange"> & React.RefAttributes<HTMLButtonElement>>;
+export { InteractiveAvatar };

package/dist/esm/components/avatar/InteractiveAvatar.js

@@ -0,0 +1,39 @@
+import { Actionable as e } from "../actionable/Actionable.js";
+import { Tooltip as t } from "../tooltip/Tooltip.js";
+import { avatarBase as n } from "./Avatar.variants.js";
+import { useAvatarGroupContext as r } from "../avatar-group/AvatarGroup.context.js";
+import { Avatar as i } from "./Avatar.js";
+import * as a from "react";
+import { uyMerge as o } from "@payfit/unity-themes";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/avatar/InteractiveAvatar.tsx
+var c = a.forwardRef(({ tooltip: a, onPress: c, onPressStart: l, onPressEnd: u, onPressChange: d, children: f, ...p }, m) => {
+	let h = r();
+	return /* @__PURE__ */ s(t, {
+		title: a,
+		children: /* @__PURE__ */ s(e, {
+			ref: m,
+			asElement: "button",
+			type: "button",
+			className: o(n({
+				variant: p.variant ?? "circle",
+				size: p.size ?? h?.defaultSize ?? "md"
+			}), "uy:cursor-pointer uy:leading-[0] uy:outline-none uy:data-[focus-visible=true]:ring-2 uy:data-[focus-visible=true]:ring-utility-focus-ring uy:data-[focus-visible=true]:ring-offset-2"),
+			onPress: c,
+			onPressStart: l,
+			onPressEnd: u,
+			onPressChange: d,
+			"aria-label": p["aria-label"],
+			"aria-describedby": p["aria-describedby"],
+			"aria-details": p["aria-details"],
+			children: /* @__PURE__ */ s(i, {
+				...p,
+				"aria-hidden": !0,
+				children: f
+			})
+		})
+	});
+});
+c.displayName = "InteractiveAvatar";
+//#endregion
+export { c as InteractiveAvatar };

package/dist/esm/components/avatar/parts/AvatarPair.js

@@ -24,7 +24,7 @@ var s = i({
 		isHidden: !1
 	}
 }), c = r.forwardRef(({ variant: n, isHidden: r, children: i, ...c }, l) => {
-	let { size: u } = t(), d = u === "xl", f = d ? "sm" : "xs", p = d ? 0 : 4, m = s({
+	let { size: u } = t(), d = u === "xl", f = d ? "sm" : "xs", p = d ? 8 : 4, m = s({
 		variant: n,
 		size: f,
 		isHidden: r

package/dist/esm/components/avatar-group/AvatarGroup.context.d.ts

@@ -0,0 +1,10 @@
+import { AvatarProps } from '../avatar/Avatar.js';
+type AvatarGroupContextValue = {
+    defaultSize: NonNullable<AvatarProps['size']>;
+    variant: 'pile' | 'stack';
+};
+export declare function AvatarGroupProvider({ defaultSize, variant, children, }: AvatarGroupContextValue & {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useAvatarGroupContext(): AvatarGroupContextValue | null;
+export {};

package/dist/esm/components/avatar-group/AvatarGroup.context.js

@@ -0,0 +1,18 @@
+import { createContext as e, useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/avatar-group/AvatarGroup.context.tsx
+var r = e(null);
+function i({ defaultSize: e, variant: t, children: i }) {
+	return /* @__PURE__ */ n(r.Provider, {
+		value: {
+			defaultSize: e,
+			variant: t
+		},
+		children: i
+	});
+}
+function a() {
+	return t(r);
+}
+//#endregion
+export { i as AvatarGroupProvider, a as useAvatarGroupContext };

package/dist/esm/components/avatar-group/AvatarGroup.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+/** Controls whether avatars are separated or overlap one another. */
+export type AvatarGroupVariant = 'pile' | 'stack';
+/** Renders one avatar from an item in the AvatarGroup render-prop API. */
+export type AvatarGroupRenderItem<TItem> = (item: TItem, index: number) => React.ReactNode;
+/** Renders the truncation indicator for a data-driven AvatarGroup. */
+export type AvatarGroupRenderCount<TItem> = (count: number, truncatedItems: TItem[]) => React.ReactNode;
+type AvatarGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'> & {
+    /**
+     * Controls the relationship between adjacent avatars.
+     * @default 'stack'
+     * @remarks `stack` overlaps avatars and adds a separating outline; `pile`
+     * keeps avatars separated with the design-system gap.
+     */
+    variant?: AvatarGroupVariant;
+    /**
+     * Maximum number of visible slots, including the truncation count.
+     * @default 4
+     * @remarks Set this to `-1` to disable truncation, or to an integer of at
+     * least 2. When `items` exceeds the limit, the group renders `maxItems - 1`
+     * avatars and one non-interactive `AvatarGroupCount` status.
+     */
+    maxItems?: number;
+};
+type AvatarGroupStaticProps = AvatarGroupBaseProps & {
+    items?: never;
+    getItemKey?: never;
+    renderCount?: never;
+    /**
+     * Static Avatar children for the Avatar Group. You must pass a minimum of 2 Avatars
+     */
+    children: React.ReactNode;
+};
+type AvatarGroupDynamicProps<TItem> = AvatarGroupBaseProps & {
+    /**
+     * Data used by the render-prop API.
+     * @remarks Provide at least two items and pair this prop with a render
+     * function as `children`. The group validates the minimum and truncates
+     * items beyond `maxItems`.
+     */
+    items: readonly TItem[];
+    /** Returns a stable React key for a rendered item. */
+    getItemKey: (item: TItem, index: number) => React.Key;
+    /**
+     * Renders the truncation indicator for the data-driven API.
+     * @remarks The callback receives the number of hidden items and the exact
+     * truncated item subset. Return an `AvatarGroupCount` with `isInteractive`
+     * when the count should trigger a Popover or another disclosure.
+     */
+    renderCount?: AvatarGroupRenderCount<TItem>;
+    /**
+     * Renders one Avatar for each item in the data-driven API.
+     * @remarks The callback receives `(item, index)` and must return the Avatar
+     * content for that item.
+     */
+    children: AvatarGroupRenderItem<TItem>;
+};
+export type AvatarGroupProps<TItem = unknown> = AvatarGroupStaticProps | AvatarGroupDynamicProps<TItem>;
+declare const AvatarGroupWithGenerics: <TItem = unknown>(props: AvatarGroupProps<TItem> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export { AvatarGroupWithGenerics as AvatarGroup };

package/dist/esm/components/avatar-group/AvatarGroup.js

@@ -0,0 +1,60 @@
+import { AvatarGroupProvider as e } from "./AvatarGroup.context.js";
+import { useResponsiveValue as t } from "../../hooks/use-responsive-value.js";
+import { avatarGroup as n } from "./AvatarGroup.variants.js";
+import { AvatarGroupCount as r } from "./parts/AvatarGroupCount.js";
+import * as i from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/avatar-group/AvatarGroup.tsx
+var c = 2, l = 4, u = 1, d = -1;
+function f(e) {
+	if (!Number.isInteger(e) || e !== d && e < c) throw Error(`AvatarGroup maxItems must be -1 or an integer greater than or equal to ${c}.`);
+}
+function p({ items: e, maxItems: t, getItemKey: n, renderItem: l, renderCount: f }) {
+	if (e.length < c) throw Error(`AvatarGroup expects at least ${c} items.`);
+	let p = t !== d && e.length > t, m = p ? t - u : e.length;
+	return /* @__PURE__ */ s(a, { children: [(p ? e.slice(0, m) : e).map((e, t) => /* @__PURE__ */ o(i.Fragment, { children: l(e, t) }, n(e, t))), p ? f?.(e.length - m, e.slice(m)) ?? /* @__PURE__ */ o(r, { count: e.length - m }) : null] });
+}
+function m(e, t) {
+	if (typeof e == "function") throw Error("AvatarGroup requires items, getItemKey, and a render function as children when using the dynamic API.");
+	let n = i.Children.count(e);
+	if (n < c || t !== d && n > t) {
+		let e = t === d ? `at least ${c}` : `between ${c} and ${t}`;
+		throw Error(`AvatarGroup expects ${e} visible children; received ${n}. Use the dynamic API for automatic truncation.`);
+	}
+	return e;
+}
+function h({ variant: r = "stack", maxItems: i = l, items: a, getItemKey: s, renderCount: c, children: u, "aria-label": d, ...h }, g) {
+	let _ = t({
+		base: "sm",
+		md: "md"
+	});
+	f(i);
+	let v = a !== void 0, y;
+	if (v) {
+		if (typeof u != "function" || typeof s != "function") throw Error("AvatarGroup dynamic API requires items, getItemKey, and a render function as children.");
+		y = p({
+			items: a,
+			maxItems: i,
+			getItemKey: s,
+			renderItem: u,
+			renderCount: c
+		});
+	} else y = m(u, i);
+	return /* @__PURE__ */ o(e, {
+		defaultSize: _,
+		variant: r,
+		children: /* @__PURE__ */ o("div", {
+			ref: g,
+			...h,
+			role: "group",
+			"aria-label": d,
+			className: n({ variant: r }),
+			children: y
+		})
+	});
+}
+var g = i.forwardRef(h);
+g.displayName = "AvatarGroup";
+var _ = g;
+//#endregion
+export { _ as AvatarGroup };

package/dist/esm/components/avatar-group/AvatarGroup.variants.d.ts

@@ -0,0 +1,32 @@
+export declare const avatarGroup: import('tailwind-variants').TVReturnType<{
+    variant: {
+        stack: "uy:[&>*]:relative uy:[&>*+*]:-ml-100";
+        pile: "uy:gap-50";
+    };
+}, undefined, "uy:relative uy:isolate uy:flex uy:items-center uy:leading-[0] uy:group/avatar-group", {
+    variant: {
+        stack: "uy:[&>*]:relative uy:[&>*+*]:-ml-100";
+        pile: "uy:gap-50";
+    };
+}, undefined, import('tailwind-variants').TVReturnTypeLike<{
+    variant: {
+        stack: "uy:[&>*]:relative uy:[&>*+*]:-ml-100";
+        pile: "uy:gap-50";
+    };
+}, undefined>>;
+export declare const avatarGroupCount: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: "uy:size-300";
+        md: "uy:size-400";
+    };
+}, undefined, "uy:inline-flex uy:size-400 uy:shrink-0 uy:items-center uy:justify-center uy:rounded-circle uy:bg-surface-neutral-lowest uy:text-content-neutral uy:typography-body-small-strong uy:border uy:border-solid uy:border-content-inverted", {
+    size: {
+        sm: "uy:size-300";
+        md: "uy:size-400";
+    };
+}, undefined, import('tailwind-variants').TVReturnTypeLike<{
+    size: {
+        sm: "uy:size-300";
+        md: "uy:size-400";
+    };
+}, undefined>>;

package/dist/esm/components/avatar-group/AvatarGroup.variants.js

@@ -0,0 +1,19 @@
+import { uyTv as e } from "@payfit/unity-themes";
+//#region src/components/avatar-group/AvatarGroup.variants.ts
+var t = e({
+	base: "uy:relative uy:isolate uy:flex uy:items-center uy:leading-[0] uy:group/avatar-group",
+	variants: { variant: {
+		stack: "uy:[&>*]:relative uy:[&>*+*]:-ml-100",
+		pile: "uy:gap-50"
+	} },
+	defaultVariants: { variant: "stack" }
+}), n = e({
+	base: "uy:inline-flex uy:size-400 uy:shrink-0 uy:items-center uy:justify-center uy:rounded-circle uy:bg-surface-neutral-lowest uy:text-content-neutral uy:typography-body-small-strong uy:border uy:border-solid uy:border-content-inverted",
+	variants: { size: {
+		sm: "uy:size-300",
+		md: "uy:size-400"
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { t as avatarGroup, n as avatarGroupCount };

package/dist/esm/components/avatar-group/figma/AvatarGroup.figma.d.ts

@@ -0,0 +1,10 @@
+import { default as figma } from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+    metadata: {
+        nestable: boolean;
+    };
+};
+export default _default;

package/dist/esm/components/avatar-group/parts/AvatarGroupCount.d.ts

@@ -0,0 +1,54 @@
+import { ActionableProps } from '../../actionable/Actionable.js';
+import * as React from 'react';
+export interface AvatarGroupCountProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, keyof React.DOMAttributes<HTMLSpanElement>> {
+    /** Number of avatars hidden by truncation. */
+    count: number;
+    /** Overrides the localized accessible label announced for the count. */
+    'aria-label'?: string;
+    /**
+     * Renders the count as a keyboard-accessible button.
+     * @default false
+     */
+    isInteractive?: boolean;
+    /** Action invoked when an interactive count is pressed. */
+    onPress?: ActionableProps['onPress'];
+    onPressStart?: ActionableProps['onPressStart'];
+    onPressEnd?: ActionableProps['onPressEnd'];
+    onPressChange?: ActionableProps['onPressChange'];
+    children?: React.ReactNode;
+}
+/**
+ * Displays the localized count of avatars hidden by an AvatarGroup.
+ * Use the default status presentation for automatic truncation. Set
+ * `isInteractive` to `true` when composing the count with `PopoverTrigger` or
+ * another disclosure that reveals the hidden avatars.
+ * @param props - Count content, interaction state, and press callbacks.
+ * @param props.count - Number of hidden avatars.
+ * @param props.aria-label - Optional accessible-label override. When omitted,
+ * the component uses the localized hidden-member count.
+ * @param props.isInteractive - Renders a button instead of a status.
+ * @param props.children - Optional visible content; defaults to `+{count}`.
+ * @param props.onPress - Callback invoked when an interactive count is pressed.
+ * @see {@link AvatarGroupCountProps} for all available props.
+ * @example
+ * ```tsx
+ * import {
+ *   AvatarGroupCount,
+ *   Popover,
+ *   PopoverTrigger,
+ * } from '@payfit/unity-components'
+ *
+ * <PopoverTrigger>
+ *   <AvatarGroupCount count={3} isInteractive />
+ *   <Popover title="Other members" isTitleSrOnly>
+ *     <p>Three hidden members</p>
+ *   </Popover>
+ * </PopoverTrigger>
+ * ```
+ * @remarks
+ * The default branch renders `role="status"` with a localized label such as
+ * “3 more members”. The interactive branch renders a real button with the
+ * same accessible label and supports React Aria press callbacks.
+ */
+declare const AvatarGroupCount: React.ForwardRefExoticComponent<AvatarGroupCountProps & React.RefAttributes<HTMLSpanElement | HTMLButtonElement>>;
+export { AvatarGroupCount };

package/dist/esm/components/avatar-group/parts/AvatarGroupCount.js

@@ -0,0 +1,38 @@
+import { Actionable as e } from "../../actionable/Actionable.js";
+import { useAvatarGroupContext as t } from "../AvatarGroup.context.js";
+import { avatarGroupCount as n } from "../AvatarGroup.variants.js";
+import * as r from "react";
+import { cn as i } from "@payfit/unity-themes";
+import { jsx as a } from "react/jsx-runtime";
+import { useIntl as o } from "react-intl";
+//#region src/components/avatar-group/parts/AvatarGroupCount.tsx
+var s = r.forwardRef(({ count: r, "aria-label": s, children: c, className: l, isInteractive: u = !1, onPress: d, onPressStart: f, onPressEnd: p, onPressChange: m, ...h }, g) => {
+	let _ = t(), v = o(), y = c ?? `+${r}`, b = v.formatMessage({
+		id: "unity:component:avatar-group:more-members-label",
+		defaultMessage: "{count, plural, one {# more member} other {# more members}}"
+	}, { count: r }), x = s ?? b, S = i(n({ size: _?.defaultSize === "sm" ? "sm" : "md" }), "uy:relative uy:z-10", u && "uy:cursor-pointer uy:outline-none uy:data-[focus-visible=true]:ring-2 uy:data-[focus-visible=true]:ring-utility-focus-ring uy:data-[focus-visible=true]:ring-offset-2", l);
+	return u ? /* @__PURE__ */ a(e, {
+		ref: g,
+		asElement: "button",
+		isUnstyled: !0,
+		type: "button",
+		"aria-label": x,
+		className: S,
+		onPress: d,
+		onPressStart: f,
+		onPressEnd: p,
+		onPressChange: m,
+		...h,
+		children: y
+	}) : /* @__PURE__ */ a("span", {
+		ref: g,
+		role: "status",
+		"aria-label": x,
+		className: S,
+		...h,
+		children: y
+	});
+});
+s.displayName = "AvatarGroupCount";
+//#endregion
+export { s as AvatarGroupCount };