@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

package/dist/components/attachment-tile/attachment-tile.css

@@ -0,0 +1,92 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._tile_1v5fo_3 {
+    --_tile-size: var(--attachment-tile-size, 5rem);
+    --_tile-border-width: 1px;
+    --_tile-radius: var(
+    	--attachment-tile-radius,
+    	var(--sys-radius-sm)
+    );
+    --_tile-inner-radius: calc(
+    	var(--_tile-radius) - var(--_tile-border-width)
+    );
+    position: relative;
+    box-sizing: border-box;
+    inline-size: var(--_tile-size);
+    block-size: var(--_tile-size);
+    border: var(--_tile-border-width) solid transparent;
+    border-radius: var(--_tile-radius);
+    background: var(--attachment-tile-bg, var(--sys-color-surface-highest));
+    color: var(--attachment-tile-fg, var(--sys-color-text-muted));
+    cursor: default;
+  }
+  ._tile_1v5fo_3 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._tile_1v5fo_3:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._tile_1v5fo_3[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._tile_1v5fo_3[data-invalid] {
+    border-color: var(--sys-color-error-border);
+    background: var(--sys-color-error-bg);
+    color: var(--sys-color-error-fg);
+  }
+  ._link_1v5fo_38 {
+    display: block;
+    color: var(--attachment-tile-fg, var(--sys-color-text-muted));
+    text-decoration: none;
+    cursor: pointer;
+  }
+  ._link_1v5fo_38:hover {
+    border-color: var(--attachment-tile-hover-border, var(--sys-color-primary));
+    color: var(--attachment-tile-fg, var(--sys-color-text-muted));
+  }
+  ._preview_1v5fo_48 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--sys-unit-2);
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    border-radius: var(--_tile-inner-radius);
+  }
+  ._image_1v5fo_59 {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+  ._imageSkeleton_1v5fo_64 {
+    --skeleton-bg: var(--sys-color-outline);
+    position: absolute;
+    inset: 0;
+    border-radius: var(--_tile-inner-radius);
+    block-size: auto;
+  }
+  ._extension_1v5fo_71 {
+    font: var(--sys-font-label-small);
+    text-transform: uppercase;
+  }
+  ._name_1v5fo_75 {
+    position: absolute;
+    overflow: hidden;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    block-size: 1px;
+    white-space: nowrap;
+  }
+  ._remove_1v5fo_83 {
+    display: grid;
+    place-items: center;
+    position: absolute;
+    inset-block-start: calc(-1 * var(--sys-unit-2));
+    inset-inline-end: calc(-1 * var(--sys-unit-2));
+    border-radius: var(--sys-radius-circle);
+    background: var(--sys-color-surface);
+  }
+}

package/dist/components/attachment-tile/attachment-tile.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from "react";
+export type AttachmentTileProps = Readonly<{
+    id: string;
+    file: File;
+    /** Tooltip text for the tile, e.g. "nota.pdf (12 kB)". */
+    hint: string;
+    /** Accessible name for the remove button; without one the tile is fixed. */
+    removeLabel?: string;
+    /** Renders with an error treatment (e.g. an oversized file). */
+    invalid: boolean;
+    disabled: boolean;
+}>;
+/**
+ * A single staged attachment as a square thumbnail inside a `TagList`: an image
+ * preview where the file is one, its extension otherwise, and a pointer-only
+ * remove button in the corner. Removal is owned by the surrounding `TagGroup`.
+ *
+ * @example
+ * <AttachmentTile id={id} file={file} hint={hint} removeLabel={label} invalid={false} disabled={false} />
+ */
+export declare const AttachmentTile: ({ id, file, hint, removeLabel, invalid, disabled, }: AttachmentTileProps) => ReactNode;
+export type SentAttachmentTileProps = Readonly<{
+    name: string;
+    /** Tooltip text for the tile. */
+    hint: string;
+    /** Image source; without one the tile shows a glyph and the extension. */
+    src: string | undefined;
+    /** Whether an image source is still being produced. */
+    pending?: boolean;
+}> & (Readonly<{
+    /** Where the stored file is served from. */
+    href: string;
+    /** Accessible name for the download link, e.g. "Download nota.pdf". */
+    label: string;
+}> | Readonly<{
+    href?: never;
+    label?: never;
+}>);
+/**
+ * An attachment on a message that has been sent: the tile the composer stages,
+ * without the remove button, and as a download of the stored file once there is
+ * one.
+ *
+ * @example
+ * <SentAttachmentTile name="nota.pdf" hint="nota.pdf (12 kB)" src={url} href={url} label="Download nota.pdf" />
+ */
+export declare const SentAttachmentTile: (props: SentAttachmentTileProps) => ReactNode;
+//# sourceMappingURL=attachment-tile.d.ts.map

package/dist/components/attachment-tile/attachment-tile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment-tile.d.ts","sourceRoot":"","sources":["../../../src/components/attachment-tile/attachment-tile.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAY9C,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,IAAI,CAAC;IACX,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,wDAOxB,mBAAmB,KAAG,SAsCxB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC,GACD,CACG,QAAQ,CAAC;IACT,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;CACb,CAAC,GACF,QAAQ,CAAC;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,CAC3C,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,UACvB,uBAAuB,KAC5B,SAqBF,CAAC"}

package/dist/components/attachment-tile/attachment-tile.js

@@ -0,0 +1,126 @@
+import SvgClose from "../../vendor/@material-design-icons/svg/outlined/close.js";
+import { Button as Button$1 } from "../button/button.js";
+import { AttachmentPreview, useAttachmentPreview } from "./attachment-preview.js";
+import attachment_tile_module_default from "./attachment-tile.module.js";
+import { c } from "react/compiler-runtime";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button, Tag } from "react-aria-components";
+// src/components/attachment-tile/attachment-tile.tsx
+/**
+* A single staged attachment as a square thumbnail inside a `TagList`: an image
+* preview where the file is one, its extension otherwise, and a pointer-only
+* remove button in the corner. Removal is owned by the surrounding `TagGroup`.
+*
+* @example
+* <AttachmentTile id={id} file={file} hint={hint} removeLabel={label} invalid={false} disabled={false} />
+*/
+var AttachmentTile = (t0) => {
+	const $ = c(15);
+	const { id, file, hint, removeLabel, invalid, disabled } = t0;
+	const preview = useAttachmentPreview(file);
+	const removeId = useId();
+	const t1 = invalid || void 0;
+	let t2;
+	if ($[0] !== file.name || $[1] !== hint || $[2] !== preview.pending || $[3] !== preview.src) {
+		t2 = /* @__PURE__ */ jsx(AttachmentPreview, {
+			name: file.name,
+			hint,
+			src: preview.src,
+			pending: preview.pending
+		});
+		$[0] = file.name;
+		$[1] = hint;
+		$[2] = preview.pending;
+		$[3] = preview.src;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== removeId || $[6] !== removeLabel) {
+		t3 = removeLabel === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			className: attachment_tile_module_default.remove,
+			children: /* @__PURE__ */ jsx(Button$1, {
+				variant: "tertiary",
+				size: "sm",
+				iconOnly: true,
+				icon: SvgClose,
+				label: removeLabel,
+				render: /* @__PURE__ */ jsx(Button, {
+					slot: "remove",
+					id: removeId,
+					"aria-labelledby": removeId,
+					excludeFromTabOrder: true
+				})
+			})
+		});
+		$[5] = removeId;
+		$[6] = removeLabel;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== disabled || $[9] !== file.name || $[10] !== id || $[11] !== t1 || $[12] !== t2 || $[13] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Tag, {
+			id,
+			textValue: file.name,
+			isDisabled: disabled,
+			className: attachment_tile_module_default.tile,
+			"data-invalid": t1,
+			children: [t2, t3]
+		});
+		$[8] = disabled;
+		$[9] = file.name;
+		$[10] = id;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	return t4;
+};
+/**
+* An attachment on a message that has been sent: the tile the composer stages,
+* without the remove button, and as a download of the stored file once there is
+* one.
+*
+* @example
+* <SentAttachmentTile name="nota.pdf" hint="nota.pdf (12 kB)" src={url} href={url} label="Download nota.pdf" />
+*/
+var SentAttachmentTile = (props) => {
+	const $ = c(10);
+	let t0;
+	if ($[0] !== props.hint || $[1] !== props.name || $[2] !== props.pending || $[3] !== props.src) {
+		t0 = /* @__PURE__ */ jsx(AttachmentPreview, {
+			name: props.name,
+			hint: props.hint,
+			src: props.src,
+			pending: props.pending
+		});
+		$[0] = props.hint;
+		$[1] = props.name;
+		$[2] = props.pending;
+		$[3] = props.src;
+		$[4] = t0;
+	} else t0 = $[4];
+	const preview = t0;
+	let t1;
+	if ($[5] !== preview || $[6] !== props.href || $[7] !== props.label || $[8] !== props.name) {
+		t1 = props.href === void 0 ? /* @__PURE__ */ jsx("span", {
+			className: attachment_tile_module_default.tile,
+			children: preview
+		}) : /* @__PURE__ */ jsx("a", {
+			className: clsx(attachment_tile_module_default.tile, attachment_tile_module_default.link),
+			href: props.href,
+			download: props.name,
+			"aria-label": props.label,
+			children: preview
+		});
+		$[5] = preview;
+		$[6] = props.href;
+		$[7] = props.label;
+		$[8] = props.name;
+		$[9] = t1;
+	} else t1 = $[9];
+	return t1;
+};
+export { AttachmentTile, SentAttachmentTile };

package/dist/components/attachment-tile/attachment-tile.module.js

@@ -0,0 +1,20 @@
+import './attachment-tile.css';// src/components/attachment-tile/attachment-tile.module.scss
+var tile = "_tile_1v5fo_3";
+var link = "_link_1v5fo_38";
+var preview = "_preview_1v5fo_48";
+var image = "_image_1v5fo_59";
+var imageSkeleton = "_imageSkeleton_1v5fo_64";
+var extension = "_extension_1v5fo_71";
+var name = "_name_1v5fo_75";
+var remove = "_remove_1v5fo_83";
+var attachment_tile_module_default = {
+	tile,
+	link,
+	preview,
+	image,
+	imageSkeleton,
+	extension,
+	name,
+	remove
+};
+export { attachment_tile_module_default as default, extension, image, imageSkeleton, link, name, preview, remove, tile };

package/dist/components/attachment-tile/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./attachment-preview.tsx";
+export * from "./attachment-tile.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/attachment-tile/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/attachment-tile/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC"}

package/dist/components/attachment-tile/index.js

@@ -0,0 +1,3 @@
+import { AttachmentPreview, useAttachmentPreview } from "./attachment-preview.js";
+import { AttachmentTile, SentAttachmentTile } from "./attachment-tile.js";
+export { AttachmentPreview, AttachmentTile, SentAttachmentTile, useAttachmentPreview };

package/dist/components/avatar/avatar.css

@@ -0,0 +1,48 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._avatar_1sy4c_3 {
+    --_avatar-bg: var(--sys-color-primary-container);
+    --_avatar-fg: var(--sys-color-on-primary-container);
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--sys-radius-circle);
+    background-color: var(--avatar-bg, var(--_avatar-bg));
+    color: var(--avatar-fg, var(--_avatar-fg));
+    font-weight: 600;
+    line-height: 1;
+    text-transform: uppercase;
+    overflow: hidden;
+  }
+  ._avatar_1sy4c_3[data-tone="1"] {
+    --_avatar-bg: var(--sys-color-identity-1-bg);
+    --_avatar-fg: var(--sys-color-identity-1-fg);
+  }
+  ._avatar_1sy4c_3[data-tone="2"] {
+    --_avatar-bg: var(--sys-color-identity-2-bg);
+    --_avatar-fg: var(--sys-color-identity-2-fg);
+  }
+  ._avatar_1sy4c_3[data-tone="3"] {
+    --_avatar-bg: var(--sys-color-identity-3-bg);
+    --_avatar-fg: var(--sys-color-identity-3-fg);
+  }
+  ._avatar_1sy4c_3[data-tone="4"] {
+    --_avatar-bg: var(--sys-color-identity-4-bg);
+    --_avatar-fg: var(--sys-color-identity-4-fg);
+  }
+  ._image_1sy4c_35 {
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: inherit;
+    object-fit: cover;
+  }
+  ._fallback_1sy4c_41 {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+}

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

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+export type AvatarProps = Readonly<{
+    /** Display name; drives the initials and the (stable) tone. */
+    name: string;
+    /** Portrait to show in place of the initials, where there is one. */
+    src?: string;
+    /** Diameter relative to the surrounding font size (in `em`). @default 2.5 */
+    size?: number;
+    className?: string;
+}>;
+/**
+ * A small circular avatar: the portrait at `src`, falling back to initials over
+ * a colour that stays the same for the same name. Decorative: the name it
+ * stands for is always beside it, so it is not announced.
+ *
+ * @example
+ * <Avatar name="Ada Lovelace" src={colleague.portraitUrl} />
+ */
+export declare const Avatar: ({ name, src, size, className, }: AvatarProps) => ReactNode;
+//# sourceMappingURL=avatar.d.ts.map

package/dist/components/avatar/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA2BvC,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IAClC,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,oCAKhB,WAAW,KAAG,SAqBhB,CAAC"}

package/dist/components/avatar/avatar.js

@@ -0,0 +1,98 @@
+import avatar_module_default from "./avatar.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Avatar } from "@base-ui/react/avatar";
+// src/components/avatar/avatar.tsx
+var TONE_COUNT = 5;
+var INITIALS_RATIO = .4;
+var initialsOf = (name) => {
+	const [first, ...rest] = name.trim().split(/\s+/).filter(Boolean);
+	if (first === void 0) return "?";
+	const last = rest.at(-1) ?? "";
+	return (first.charAt(0) + last.charAt(0)).toUpperCase();
+};
+var toneOf = (name) => {
+	let hash = 0;
+	for (let i = 0; i < name.length; i++) hash = (hash + name.charCodeAt(i)) % TONE_COUNT;
+	return hash;
+};
+/**
+* A small circular avatar: the portrait at `src`, falling back to initials over
+* a colour that stays the same for the same name. Decorative: the name it
+* stands for is always beside it, so it is not announced.
+*
+* @example
+* <Avatar name="Ada Lovelace" src={colleague.portraitUrl} />
+*/
+var Avatar$1 = (t0) => {
+	const $ = c(18);
+	const { name, src, size: t1, className } = t0;
+	const size = t1 === void 0 ? 2.5 : t1;
+	let t2;
+	if ($[0] !== className) {
+		t2 = clsx(avatar_module_default.avatar, className);
+		$[0] = className;
+		$[1] = t2;
+	} else t2 = $[1];
+	const t3 = `${size * INITIALS_RATIO}em`;
+	let t4;
+	if ($[2] !== t3) {
+		t4 = {
+			fontSize: t3,
+			inlineSize: `${1 / INITIALS_RATIO}em`,
+			blockSize: `${1 / INITIALS_RATIO}em`
+		};
+		$[2] = t3;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== name) {
+		t5 = toneOf(name);
+		$[4] = name;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] !== src) {
+		t6 = src === void 0 ? null : /* @__PURE__ */ jsx(Avatar.Image, {
+			src,
+			alt: "",
+			className: avatar_module_default.image
+		});
+		$[6] = src;
+		$[7] = t6;
+	} else t6 = $[7];
+	let t7;
+	if ($[8] !== name) {
+		t7 = initialsOf(name);
+		$[8] = name;
+		$[9] = t7;
+	} else t7 = $[9];
+	let t8;
+	if ($[10] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Avatar.Fallback, {
+			className: avatar_module_default.fallback,
+			children: t7
+		});
+		$[10] = t7;
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== t2 || $[13] !== t4 || $[14] !== t5 || $[15] !== t6 || $[16] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Avatar.Root, {
+			className: t2,
+			style: t4,
+			"data-tone": t5,
+			"aria-hidden": "true",
+			children: [t6, t8]
+		});
+		$[12] = t2;
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = t6;
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
+	return t9;
+};
+export { Avatar$1 as Avatar };

package/dist/components/avatar/avatar.module.js

@@ -0,0 +1,10 @@
+import './avatar.css';// src/components/avatar/avatar.module.scss
+var avatar = "_avatar_1sy4c_3";
+var image = "_image_1sy4c_35";
+var fallback = "_fallback_1sy4c_41";
+var avatar_module_default = {
+	avatar,
+	image,
+	fallback
+};
+export { avatar, avatar_module_default as default, fallback, image };

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

@@ -0,0 +1,2 @@
+export * from "./avatar.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/avatar/index.js

@@ -0,0 +1 @@
+export { Avatar } from "./avatar.js";

package/dist/components/avatar-group/avatar-group.css

@@ -0,0 +1,75 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._group_1vran_3 {
+    display: flex;
+    align-items: center;
+    inline-size: fit-content;
+    border-radius: var(--sys-radius-full);
+    cursor: default;
+  }
+  ._group_1vran_3 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._group_1vran_3:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._label_1vran_17 {
+    position: absolute;
+    overflow: hidden;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    block-size: 1px;
+    white-space: nowrap;
+  }
+  ._member_1vran_25 {
+    display: inline-flex;
+    flex-shrink: 0;
+    border-radius: var(--sys-radius-circle);
+    box-shadow: 0 0 0 2px var(--avatar-group-ring, var(--sys-color-surface));
+  }
+  ._overflow_1vran_31 {
+    align-items: center;
+    justify-content: center;
+    background-color: var(--avatar-group-overflow-bg, var(--sys-color-surface-high));
+    color: var(--avatar-group-overflow-fg, var(--sys-color-text));
+    font-weight: 600;
+    line-height: 1;
+  }
+  ._popup_1vran_39 {
+    box-sizing: border-box;
+    border: none;
+    border-radius: var(--sys-radius-md);
+    background: var(--sys-color-surface-overlay);
+    padding: var(--sys-unit-4);
+    color: var(--sys-color-text);
+    transform-origin: var(--transform-origin);
+    scrollbar-width: thin;
+    scrollbar-color: var(--sys-color-outline) transparent;
+    box-shadow: var(--sys-elevation-1);
+  }
+  @media not (prefers-reduced-motion) {
+    ._popup_1vran_39 {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), transform var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._popup_1vran_39[data-starting-style], ._popup_1vran_39[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  ._list_1vran_60 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-unit-4);
+    list-style: none;
+  }
+  ._item_1vran_66 {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-unit-4);
+    font: var(--sys-font-body-medium);
+  }
+  ._you_1vran_72 {
+    color: var(--sys-color-text-muted);
+  }
+}

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

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+/** One person in an `AvatarGroup`. */
+export type AvatarGroupPerson = Readonly<{
+    id: string;
+    /** Display name, shown in the list and drawn as initials. */
+    name: string;
+    /** Portrait to show in place of the initials, where there is one. */
+    src?: string;
+}>;
+export type AvatarGroupProps = Readonly<{
+    /** The people to show as stacked avatars. */
+    people: ReadonlyArray<AvatarGroupPerson>;
+    /** Accessible name of the group and its list, such as "Invitees". */
+    label: string;
+    /**
+     * The person viewing, and what their row in the list says after their name,
+     * such as "(you)".
+     */
+    currentUser?: Readonly<{
+        id: string;
+        label: string;
+    }>;
+    /** How many avatars to show before the rest fold into a count. @default 4 */
+    max?: number;
+    /** Avatar diameter relative to the surrounding font size (in `em`). @default 1.5 */
+    size?: number;
+    className?: string;
+}>;
+/**
+ * A compact stack of avatars that folds everyone past `max` into a count.
+ * Hovering or pressing it lists everyone by name.
+ *
+ * @example
+ * <AvatarGroup
+ * 	people={invitees}
+ * 	label="Invitees"
+ * 	currentUser={{ id: me.id, label: "(you)" }}
+ * />
+ */
+export declare const AvatarGroup: ({ people, label, currentUser, max, size, className, }: AvatarGroupProps) => ReactNode;
+//# sourceMappingURL=avatar-group.d.ts.map

package/dist/components/avatar-group/avatar-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../../src/components/avatar-group/avatar-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,sCAAsC;AACtC,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,6DAA6D;IAC7D,IAAI,EAAE,MAAM,CAAC;IACb,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACvC,6CAA6C;IAC7C,MAAM,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACzC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACtD,6EAA6E;IAC7E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oFAAoF;IACpF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,0DAOrB,gBAAgB,KAAG,SA+ErB,CAAC"}