@mieweb/ui 0.10.0-dev.4 → 0.10.0-dev.41

package/dist/components/AlertDialog/index.d.ts

@@ -1,9 +1,46 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { ModalProps } from '../Modal/index.js';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
 
+declare const modalContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ModalProps extends VariantProps<typeof modalContentVariants> {
+    /** Whether the modal is open */
+    open: boolean;
+    /** Callback when the modal should close */
+    onOpenChange: (open: boolean) => void;
+    /** Modal content */
+    children: React.ReactNode;
+    /** Whether to close when clicking the overlay */
+    closeOnOverlayClick?: boolean;
+    /** Whether to close when pressing Escape */
+    closeOnEscape?: boolean;
+    /** Additional class name for the modal content */
+    className?: string;
+    /** ID for the modal, used for accessibility */
+    id?: string;
+    /** Accessible label for the modal */
+    'aria-label'?: string;
+    /** ID of the element that labels the modal */
+    'aria-labelledby'?: string;
+    /** ID of the element that describes the modal */
+    'aria-describedby'?: string;
+}
+
+type AlertDialogVariant = 'default' | 'destructive' | 'warning' | 'success' | 'info';
+interface AlertDialogLabels {
+    /** Cancel button */
+    cancel: string;
+    /** Action button */
+    action: string;
+    /** Action button while an async `onAction` is pending */
+    busy: string;
+    /** Action button of `useConfirm().alert()` */
+    acknowledge: string;
+}
+declare const defaultAlertDialogLabels: AlertDialogLabels;
 interface AlertDialogProps extends Pick<ModalProps, 'open' | 'onOpenChange'> {
     /** Dialog title */
     title: React.ReactNode;
@@ -11,29 +48,34 @@ interface AlertDialogProps extends Pick<ModalProps, 'open' | 'onOpenChange'> {
     description?: React.ReactNode;
     /** Custom body content (rendered below the description) */
     children?: React.ReactNode;
-    /** Label for the cancel button (default "Cancel") */
+    /** Label for the cancel button; overrides `labels.cancel` */
     cancelLabel?: React.ReactNode;
-    /** Label for the confirm/action button (default "Continue") */
+    /** Label for the confirm/action button; overrides `labels.action` */
     actionLabel?: React.ReactNode;
-    /** Called when the action button is clicked */
-    onAction?: () => void;
+    /**
+     * Called when the action button is clicked. Return a Promise to show a busy
+     * state; the dialog closes when it resolves and stays open if it rejects.
+     */
+    onAction?: () => void | Promise<unknown>;
     /** Called when the cancel button is clicked */
     onCancel?: () => void;
-    /** Visual emphasis for the action button */
-    variant?: 'default' | 'destructive';
+    /** Tone of the dialog: icon, action button colour and initial focus */
+    variant?: AlertDialogVariant;
     /** Disables the action button */
     actionDisabled?: boolean;
     /** Hides the cancel button */
     hideCancel?: boolean;
+    /** User-facing strings; English defaults in `defaultAlertDialogLabels` */
+    labels?: Partial<AlertDialogLabels>;
     /** Additional class name for the dialog content */
     className?: string;
 }
 /**
- * A modal dialog that interrupts the user with important content and expects
- * a response. Built on top of {@link Modal}.
+ * A modal dialog (`role="alertdialog"`) that interrupts the user with
+ * important content and expects a response. Built on top of {@link Modal}.
  *
- * Unlike a regular Modal, it does not close on overlay click or Escape by
- * default — the user must explicitly choose an action.
+ * It does not close on overlay click or Escape — the user must explicitly
+ * choose an action.
  *
  * @example
  * ```tsx
@@ -44,13 +86,49 @@ interface AlertDialogProps extends Pick<ModalProps, 'open' | 'onOpenChange'> {
  *   description="This action cannot be undone."
  *   variant="destructive"
  *   actionLabel="Delete"
- *   onAction={handleDelete}
+ *   onAction={() => deleteCase(id)}
  * />
  * ```
  */
-declare function AlertDialog({ open, onOpenChange, title, description, children, cancelLabel, actionLabel, onAction, onCancel, variant, actionDisabled, hideCancel, className, }: AlertDialogProps): react_jsx_runtime.JSX.Element;
+declare function AlertDialog({ open, onOpenChange, title, description, children, cancelLabel, actionLabel, onAction, onCancel, variant, actionDisabled, hideCancel, labels, className, }: AlertDialogProps): react_jsx_runtime.JSX.Element;
 declare namespace AlertDialog {
     var displayName: string;
 }
 
-export { AlertDialog, type AlertDialogProps };
+interface ConfirmOptions {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    actionLabel?: React.ReactNode;
+    cancelLabel?: React.ReactNode;
+    variant?: AlertDialogVariant;
+}
+type AlertOptions = Omit<ConfirmOptions, 'cancelLabel'>;
+interface ConfirmApi {
+    /** Resolves `true` when the user confirms, `false` when they cancel. */
+    confirm: (options: ConfirmOptions) => Promise<boolean>;
+    /** Shows a dialog with only an acknowledge button; resolves when dismissed. */
+    alert: (options: AlertOptions) => Promise<void>;
+}
+interface ConfirmDialogProviderProps {
+    children: React.ReactNode;
+    /** Default strings for every dialog the provider opens */
+    labels?: Partial<AlertDialogLabels>;
+}
+/**
+ * Renders one {@link AlertDialog} and exposes it imperatively through
+ * {@link useConfirm}. Mount once near the app root.
+ */
+declare function ConfirmDialogProvider({ children, labels, }: ConfirmDialogProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Promise-based confirm/alert dialogs. Requires a {@link ConfirmDialogProvider}
+ * ancestor.
+ *
+ * @example
+ * ```tsx
+ * const { confirm } = useConfirm();
+ * if (await confirm({ title: 'Delete case?', variant: 'destructive' })) remove();
+ * ```
+ */
+declare function useConfirm(): ConfirmApi;
+
+export { AlertDialog, type AlertDialogLabels, type AlertDialogProps, type AlertDialogVariant, type AlertOptions, type ConfirmApi, ConfirmDialogProvider, type ConfirmDialogProviderProps, type ConfirmOptions, defaultAlertDialogLabels, useConfirm };

package/dist/components/AlertDialog/index.js

@@ -1,10 +1,12 @@
-export { AlertDialog } from '../../chunk-VOKVG3ER.js';
-import '../../chunk-5JJ2DAE4.js';
+export { AlertDialog, ConfirmDialogProvider, defaultAlertDialogLabels, useConfirm } from '../../chunk-56VTM4OX.js';
+import '../../chunk-TWQSMUE6.js';
 import '../../chunk-4SMSH4OY.js';
 import '../../chunk-T4ME7QCT.js';
 import '../../chunk-VSQF22GL.js';
-import '../../chunk-GOALNQZ2.js';
-import '../../chunk-XCP454Q6.js';
+import '../../chunk-N5JDL4VE.js';
+import '../../chunk-WFBUBT54.js';
+import '../../chunk-GVM6DTR5.js';
+import '../../chunk-F4N67NAF.js';
 import '../../chunk-TQONQSJO.js';
 import '../../chunk-PX6F3LHL.js';
 //# sourceMappingURL=index.js.map

package/dist/components/AssociationList/index.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var chunkCLQW724U_cjs = require('../../chunk-CLQW724U.cjs');
+require('../../chunk-IWRBJHO3.cjs');
+require('../../chunk-7IRTD4JT.cjs');
+require('../../chunk-YGA35Z2P.cjs');
+require('../../chunk-VBWRH4UW.cjs');
+require('../../chunk-P22YCUVM.cjs');
+require('../../chunk-Q3YVLO52.cjs');
+require('../../chunk-GKDHMNUA.cjs');
+require('../../chunk-7E46YDOT.cjs');
+require('../../chunk-EACNRR3C.cjs');
+require('../../chunk-ANMX7YDL.cjs');
+require('../../chunk-DXEPYK3I.cjs');
+require('../../chunk-S5RVSXDV.cjs');
+require('../../chunk-EUAMEVVI.cjs');
+
+
+
+Object.defineProperty(exports, "AssociationList", {
+  enumerable: true,
+  get: function () { return chunkCLQW724U_cjs.AssociationList; }
+});
+Object.defineProperty(exports, "defaultAssociationListLabels", {
+  enumerable: true,
+  get: function () { return chunkCLQW724U_cjs.defaultAssociationListLabels; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/components/AssociationList/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}

package/dist/components/AssociationList/index.d.cts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+interface AssociationListItem {
+    id: string;
+    name: string;
+    subtitle?: string;
+    avatarUrl?: string;
+}
+interface AssociationListLabels {
+    loading: string;
+    empty: string;
+    error: string;
+    retry: string;
+    add: string;
+    /** Accessible name of an item's remove button. */
+    remove: (name: string) => string;
+    showAll: (count: number) => string;
+    showLess: string;
+}
+declare const defaultAssociationListLabels: AssociationListLabels;
+type AssociationListSlot = 'header' | 'list' | 'item' | 'toggle' | 'state';
+interface AssociationListProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'> {
+    /** Card heading, e.g. "Contacts". */
+    title: string;
+    items: AssociationListItem[];
+    loading?: boolean;
+    error?: Error | null;
+    onRetry?: () => void;
+    /** Items shown before "Show all". Defaults to 5. */
+    maxVisible?: number;
+    onOpen?: (id: string, item: AssociationListItem) => void;
+    getHref?: (id: string, item: AssociationListItem) => string;
+    /** Renders the header's add button. */
+    onAdd?: () => void;
+    /** Confirmation is the caller's; the row shows pending until the promise settles. */
+    onRemove?: (id: string, item: AssociationListItem) => void | Promise<void>;
+    /** Trailing content per row, e.g. a role badge. */
+    renderItemMeta?: (item: AssociationListItem) => React.ReactNode;
+    emptyState?: React.ReactNode;
+    labels?: Partial<AssociationListLabels>;
+    classNames?: Partial<Record<AssociationListSlot, string>>;
+    headingLevel?: 'h2' | 'h3' | 'h4';
+}
+/**
+ * A card of records related to the current one. Declared
+ * `parameters.catalog.collection` — its load states are part of the API.
+ */
+declare const AssociationList: React.ForwardRefExoticComponent<AssociationListProps & React.RefAttributes<HTMLElement>>;
+
+export { AssociationList, type AssociationListItem, type AssociationListLabels, type AssociationListProps, type AssociationListSlot, defaultAssociationListLabels };

package/dist/components/AssociationList/index.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+interface AssociationListItem {
+    id: string;
+    name: string;
+    subtitle?: string;
+    avatarUrl?: string;
+}
+interface AssociationListLabels {
+    loading: string;
+    empty: string;
+    error: string;
+    retry: string;
+    add: string;
+    /** Accessible name of an item's remove button. */
+    remove: (name: string) => string;
+    showAll: (count: number) => string;
+    showLess: string;
+}
+declare const defaultAssociationListLabels: AssociationListLabels;
+type AssociationListSlot = 'header' | 'list' | 'item' | 'toggle' | 'state';
+interface AssociationListProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'> {
+    /** Card heading, e.g. "Contacts". */
+    title: string;
+    items: AssociationListItem[];
+    loading?: boolean;
+    error?: Error | null;
+    onRetry?: () => void;
+    /** Items shown before "Show all". Defaults to 5. */
+    maxVisible?: number;
+    onOpen?: (id: string, item: AssociationListItem) => void;
+    getHref?: (id: string, item: AssociationListItem) => string;
+    /** Renders the header's add button. */
+    onAdd?: () => void;
+    /** Confirmation is the caller's; the row shows pending until the promise settles. */
+    onRemove?: (id: string, item: AssociationListItem) => void | Promise<void>;
+    /** Trailing content per row, e.g. a role badge. */
+    renderItemMeta?: (item: AssociationListItem) => React.ReactNode;
+    emptyState?: React.ReactNode;
+    labels?: Partial<AssociationListLabels>;
+    classNames?: Partial<Record<AssociationListSlot, string>>;
+    headingLevel?: 'h2' | 'h3' | 'h4';
+}
+/**
+ * A card of records related to the current one. Declared
+ * `parameters.catalog.collection` — its load states are part of the API.
+ */
+declare const AssociationList: React.ForwardRefExoticComponent<AssociationListProps & React.RefAttributes<HTMLElement>>;
+
+export { AssociationList, type AssociationListItem, type AssociationListLabels, type AssociationListProps, type AssociationListSlot, defaultAssociationListLabels };

package/dist/components/AssociationList/index.js

@@ -0,0 +1,16 @@
+export { AssociationList, defaultAssociationListLabels } from '../../chunk-5HKZR6UG.js';
+import '../../chunk-FTEZNCRI.js';
+import '../../chunk-Y424YL55.js';
+import '../../chunk-ZIUADGAR.js';
+import '../../chunk-IQ4KQJAO.js';
+import '../../chunk-H2Y7HZV5.js';
+import '../../chunk-DVDT7TX7.js';
+import '../../chunk-TI3TQQ7F.js';
+import '../../chunk-522WJIVI.js';
+import '../../chunk-N5JDL4VE.js';
+import '../../chunk-WFBUBT54.js';
+import '../../chunk-GVM6DTR5.js';
+import '../../chunk-TQONQSJO.js';
+import '../../chunk-PX6F3LHL.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/AssociationList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/components/AudioRecorder/index.d.cts

@@ -62,10 +62,10 @@ declare const audioRecorderVariants: (props?: ({
     variant?: "default" | "minimal" | "elevated" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const waveformContainerVariants: (props?: ({
-    state?: "paused" | "idle" | "recording" | "listening" | "stopped" | "playback" | null | undefined;
+    state?: "idle" | "listening" | "recording" | "paused" | "stopped" | "playback" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const controlButtonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "ghost" | "danger" | null | undefined;
+    variant?: "primary" | "secondary" | "danger" | "ghost" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function formatTime(seconds: number): string;

package/dist/components/AudioRecorder/index.d.ts

@@ -62,10 +62,10 @@ declare const audioRecorderVariants: (props?: ({
     variant?: "default" | "minimal" | "elevated" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const waveformContainerVariants: (props?: ({
-    state?: "paused" | "idle" | "recording" | "listening" | "stopped" | "playback" | null | undefined;
+    state?: "idle" | "listening" | "recording" | "paused" | "stopped" | "playback" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const controlButtonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "ghost" | "danger" | null | undefined;
+    variant?: "primary" | "secondary" | "danger" | "ghost" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function formatTime(seconds: number): string;

package/dist/components/Autocomplete/index.d.cts

@@ -1,8 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { inputVariants, RequiredMarkVariant } from '../Input/index.cjs';
-import 'class-variance-authority/types';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    hasError?: boolean | null | undefined;
+    labelVariant?: "stacked" | "floating" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type RequiredMarkVariant = 'default' | 'warning';
 
 interface AutocompleteProps<T> extends Pick<VariantProps<typeof inputVariants>, 'size'> {
     /** Candidate items to search through. */

package/dist/components/Autocomplete/index.d.ts

@@ -1,8 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { inputVariants, RequiredMarkVariant } from '../Input/index.js';
-import 'class-variance-authority/types';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    hasError?: boolean | null | undefined;
+    labelVariant?: "stacked" | "floating" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type RequiredMarkVariant = 'default' | 'warning';
 
 interface AutocompleteProps<T> extends Pick<VariantProps<typeof inputVariants>, 'size'> {
     /** Candidate items to search through. */

package/dist/components/Avatar/index.cjs

@@ -1,26 +1,28 @@
 'use strict';
 
-var chunkJEIW7BSV_cjs = require('../../chunk-JEIW7BSV.cjs');
+require('../../chunk-P22YCUVM.cjs');
+var chunkQ3YVLO52_cjs = require('../../chunk-Q3YVLO52.cjs');
+var chunkGKDHMNUA_cjs = require('../../chunk-GKDHMNUA.cjs');
 require('../../chunk-S5RVSXDV.cjs');
 require('../../chunk-EUAMEVVI.cjs');
 
 
 
-Object.defineProperty(exports, "Avatar", {
+Object.defineProperty(exports, "AvatarGroup", {
   enumerable: true,
-  get: function () { return chunkJEIW7BSV_cjs.Avatar; }
+  get: function () { return chunkQ3YVLO52_cjs.AvatarGroup; }
 });
-Object.defineProperty(exports, "AvatarGroup", {
+Object.defineProperty(exports, "Avatar", {
   enumerable: true,
-  get: function () { return chunkJEIW7BSV_cjs.AvatarGroup; }
+  get: function () { return chunkGKDHMNUA_cjs.Avatar; }
 });
 Object.defineProperty(exports, "avatarVariants", {
   enumerable: true,
-  get: function () { return chunkJEIW7BSV_cjs.avatarVariants; }
+  get: function () { return chunkGKDHMNUA_cjs.avatarVariants; }
 });
 Object.defineProperty(exports, "getInitials", {
   enumerable: true,
-  get: function () { return chunkJEIW7BSV_cjs.getInitials; }
+  get: function () { return chunkGKDHMNUA_cjs.getInitials; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/components/Avatar/index.d.cts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const avatarVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
     ring?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
@@ -36,27 +36,58 @@ declare function getInitials(name: string): string;
  * ```
  */
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
-interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Maximum number of avatars to show before +N indicator */
+
+type AvatarPresence = 'viewing' | 'editing';
+interface AvatarGroupItem {
+    /** Stable key, passed back to `onItemClick`. */
+    id: string;
+    /** Person's name — drives the initials fallback and the accessible name. */
+    name: string;
+    /** Avatar image URL. */
+    src?: string | null;
+    /** What the person is doing on the record; adds a ring, badge and label. */
+    presence?: AvatarPresence;
+    /** Accessible name / tooltip override, e.g. `Bo (2 windows)`. Defaults to `name`. */
+    label?: string;
+    /** CSS colour for the initials disc, e.g. a collaborator's cursor colour. */
+    color?: string;
+}
+interface AvatarGroupLabels {
+    /** Accessible name of the list. */
+    list: string;
+    /** Accessible name of a person with a presence state. */
+    presence: (name: string, presence: AvatarPresence) => string;
+    /** Accessible name / tooltip of the "+N" chip. */
+    overflow: (hiddenNames: string[]) => string;
+}
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface AvatarGroupProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
+    /** People to show, in order (editors are moved to the front). */
+    items?: AvatarGroupItem[];
+    /** Avatars shown before the rest collapse into a "+N" chip. */
     max?: number;
-    /** Size of avatars in the group */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /** Children should be Avatar components */
-    children: React.ReactNode;
+    /** Size applied to every avatar. */
+    size?: AvatarSize;
+    /** Makes each avatar a button that reports its item `id`. */
+    onItemClick?: (id: string) => void;
+    /** Overrides for any user-facing string. */
+    labels?: Partial<AvatarGroupLabels>;
+    /** Legacy API: `<Avatar>` children instead of `items`. */
+    children?: React.ReactNode;
 }
 /**
- * A component for displaying a group of overlapping avatars.
+ * Overlapping stack of {@link Avatar}s with an optional viewing / editing
+ * presence ring per person and a "+N" chip that names everyone it hides.
  *
  * @example
  * ```tsx
- * <AvatarGroup max={3}>
- *   <Avatar name="John Doe" />
- *   <Avatar name="Jane Smith" />
- *   <Avatar name="Bob Wilson" />
- *   <Avatar name="Alice Brown" />
- * </AvatarGroup>
+ * <AvatarGroup
+ *   max={3}
+ *   items={[{ id: '1', name: 'Ann Lee', presence: 'editing' }]}
+ *   onItemClick={openProfile}
+ * />
  * ```
  */
-declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLUListElement>>;
 
 export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, avatarVariants, getInitials };

package/dist/components/Avatar/index.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const avatarVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
     ring?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
@@ -36,27 +36,58 @@ declare function getInitials(name: string): string;
  * ```
  */
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
-interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Maximum number of avatars to show before +N indicator */
+
+type AvatarPresence = 'viewing' | 'editing';
+interface AvatarGroupItem {
+    /** Stable key, passed back to `onItemClick`. */
+    id: string;
+    /** Person's name — drives the initials fallback and the accessible name. */
+    name: string;
+    /** Avatar image URL. */
+    src?: string | null;
+    /** What the person is doing on the record; adds a ring, badge and label. */
+    presence?: AvatarPresence;
+    /** Accessible name / tooltip override, e.g. `Bo (2 windows)`. Defaults to `name`. */
+    label?: string;
+    /** CSS colour for the initials disc, e.g. a collaborator's cursor colour. */
+    color?: string;
+}
+interface AvatarGroupLabels {
+    /** Accessible name of the list. */
+    list: string;
+    /** Accessible name of a person with a presence state. */
+    presence: (name: string, presence: AvatarPresence) => string;
+    /** Accessible name / tooltip of the "+N" chip. */
+    overflow: (hiddenNames: string[]) => string;
+}
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface AvatarGroupProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
+    /** People to show, in order (editors are moved to the front). */
+    items?: AvatarGroupItem[];
+    /** Avatars shown before the rest collapse into a "+N" chip. */
     max?: number;
-    /** Size of avatars in the group */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /** Children should be Avatar components */
-    children: React.ReactNode;
+    /** Size applied to every avatar. */
+    size?: AvatarSize;
+    /** Makes each avatar a button that reports its item `id`. */
+    onItemClick?: (id: string) => void;
+    /** Overrides for any user-facing string. */
+    labels?: Partial<AvatarGroupLabels>;
+    /** Legacy API: `<Avatar>` children instead of `items`. */
+    children?: React.ReactNode;
 }
 /**
- * A component for displaying a group of overlapping avatars.
+ * Overlapping stack of {@link Avatar}s with an optional viewing / editing
+ * presence ring per person and a "+N" chip that names everyone it hides.
  *
  * @example
  * ```tsx
- * <AvatarGroup max={3}>
- *   <Avatar name="John Doe" />
- *   <Avatar name="Jane Smith" />
- *   <Avatar name="Bob Wilson" />
- *   <Avatar name="Alice Brown" />
- * </AvatarGroup>
+ * <AvatarGroup
+ *   max={3}
+ *   items={[{ id: '1', name: 'Ann Lee', presence: 'editing' }]}
+ *   onItemClick={openProfile}
+ * />
  * ```
  */
-declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLUListElement>>;
 
 export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, avatarVariants, getInitials };

package/dist/components/Avatar/index.js

@@ -1,4 +1,6 @@
-export { Avatar, AvatarGroup, avatarVariants, getInitials } from '../../chunk-HZ4MBUC3.js';
+import '../../chunk-H2Y7HZV5.js';
+export { AvatarGroup } from '../../chunk-DVDT7TX7.js';
+export { Avatar, avatarVariants, getInitials } from '../../chunk-TI3TQQ7F.js';
 import '../../chunk-TQONQSJO.js';
 import '../../chunk-PX6F3LHL.js';
 //# sourceMappingURL=index.js.map

package/dist/components/AvatarGroup/index.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+require('../../chunk-6TTCZY3P.cjs');
+var chunkQ3YVLO52_cjs = require('../../chunk-Q3YVLO52.cjs');
+require('../../chunk-GKDHMNUA.cjs');
+require('../../chunk-S5RVSXDV.cjs');
+require('../../chunk-EUAMEVVI.cjs');
+
+
+
+Object.defineProperty(exports, "AvatarGroup", {
+  enumerable: true,
+  get: function () { return chunkQ3YVLO52_cjs.AvatarGroup; }
+});
+Object.defineProperty(exports, "defaultAvatarGroupLabels", {
+  enumerable: true,
+  get: function () { return chunkQ3YVLO52_cjs.defaultAvatarGroupLabels; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/components/AvatarGroup/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}