@eui/eds-react 22.0.0-alpha.10

package/eds-avatar/eds-avatar-badge.css

@@ -0,0 +1,34 @@
+/* Pure-React port of eds-avatar-badge.scss. */
+
+.eds-avatar .eds-avatar-badge {
+    position: absolute;
+    display: inline-flex;
+}
+
+/* default position (size m) */
+.eds-avatar .eds-avatar-badge,
+.eds-avatar[data-size="m"] .eds-avatar-badge {
+    left: var(--eds-si-xl);
+    top: var(--eds-si-xl);
+}
+
+.eds-avatar[data-size="2xs"] .eds-avatar-badge {
+    left: var(--eds-si-xs);
+    top: var(--eds-si-xs);
+}
+.eds-avatar[data-size="xs"] .eds-avatar-badge {
+    left: var(--eds-si-m);
+    top: var(--eds-si-m);
+}
+.eds-avatar[data-size="s"] .eds-avatar-badge {
+    left: var(--eds-si-l);
+    top: var(--eds-si-l);
+}
+.eds-avatar[data-size="l"] .eds-avatar-badge {
+    left: var(--eds-si-2xl);
+    top: var(--eds-si-2xl);
+}
+.eds-avatar[data-size="xl"] .eds-avatar-badge {
+    left: var(--eds-si-4xl);
+    top: var(--eds-si-4xl);
+}

package/eds-avatar/eds-avatar-badge.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface EdsAvatarBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Whether the badge is positioned at the bottom of the avatar. Reflected as
+     * `data-position="bottom"` when true, `data-position="top"` when false.
+     * @default false
+     */
+    isPositionBottom?: boolean;
+    /** The badge content — typically an `EdsBadge` (`<ng-content/>` → `{children}`). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsAvatarBadge` — pure React port of the Angular `eds-avatar-badge`.
+ *
+ * An absolutely-positioned overlay slot on the avatar surface (top by default, bottom when
+ * `isPositionBottom`). Its offsets are driven by the ancestor `.eds-avatar[data-size]`.
+ * Carries the `.eds-avatar-badge` class and reflects `data-position`.
+ */
+export declare const EdsAvatarBadge: React.ForwardRefExoticComponent<EdsAvatarBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=eds-avatar-badge.d.ts.map

package/eds-avatar/eds-avatar-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-avatar-badge.d.ts","sourceRoot":"","sources":["../../src/eds-avatar/eds-avatar-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC9E;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oFAAoF;IACpF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,6FAa1B,CAAC"}

package/eds-avatar/eds-avatar-badge.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsAvatarBadge` — pure React port of the Angular `eds-avatar-badge`.
+ *
+ * An absolutely-positioned overlay slot on the avatar surface (top by default, bottom when
+ * `isPositionBottom`). Its offsets are driven by the ancestor `.eds-avatar[data-size]`.
+ * Carries the `.eds-avatar-badge` class and reflects `data-position`.
+ */
+export const EdsAvatarBadge = React.forwardRef(function EdsAvatarBadge({ isPositionBottom = false, children, className, ...rest }, ref) {
+    return (_jsx("span", { ref: ref, className: className ? `eds-avatar-badge ${className}` : 'eds-avatar-badge', "data-position": isPositionBottom ? 'bottom' : 'top', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-avatar-badge.js.map

package/eds-avatar/eds-avatar-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-avatar-badge.js","sourceRoot":"","sources":["../../src/eds-avatar/eds-avatar-badge.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAC1C,SAAS,cAAc,CAAC,EAAE,gBAAgB,GAAG,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IACnF,OAAO,CACH,eACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,oBAAoB,SAAS,EAAE,CAAC,CAAC,CAAC,kBAAkB,mBAC5D,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,KAC9C,IAAI,YAEP,QAAQ,GACN,CACV,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-avatar/eds-avatar-content-label.css

@@ -0,0 +1,5 @@
+/* Pure-React port of eds-avatar-content-label.scss. */
+
+.eds-avatar .eds-avatar-content-label {
+    font: var(--eds-f-paragraph-s-semi-bold);
+}

package/eds-avatar/eds-avatar-content-label.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface EdsAvatarContentLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Primary label text (`<ng-content/>` → `{children}`). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsAvatarContentLabel` — pure React port of the Angular `eds-avatar-content-label`.
+ *
+ * The primary (semi-bold) label line inside an `EdsAvatarContent`. Pure content projection
+ * carrying the `.eds-avatar-content-label` class.
+ */
+export declare const EdsAvatarContentLabel: React.ForwardRefExoticComponent<EdsAvatarContentLabelProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=eds-avatar-content-label.d.ts.map

package/eds-avatar/eds-avatar-content-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-avatar-content-label.d.ts","sourceRoot":"","sources":["../../src/eds-avatar/eds-avatar-content-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,0BAA2B,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACrF,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,oGAYjC,CAAC"}

package/eds-avatar/eds-avatar-content-label.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsAvatarContentLabel` — pure React port of the Angular `eds-avatar-content-label`.
+ *
+ * The primary (semi-bold) label line inside an `EdsAvatarContent`. Pure content projection
+ * carrying the `.eds-avatar-content-label` class.
+ */
+export const EdsAvatarContentLabel = React.forwardRef(function EdsAvatarContentLabel({ children, className, ...rest }, ref) {
+    return (_jsx("span", { ref: ref, className: className ? `eds-avatar-content-label ${className}` : 'eds-avatar-content-label', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-avatar-content-label.js.map

package/eds-avatar/eds-avatar-content-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-avatar-content-label.js","sourceRoot":"","sources":["../../src/eds-avatar/eds-avatar-content-label.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC,UAAU,CACjD,SAAS,qBAAqB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAChE,OAAO,CACH,eACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,4BAA4B,SAAS,EAAE,CAAC,CAAC,CAAC,0BAA0B,KACvF,IAAI,YAEP,QAAQ,GACN,CACV,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-avatar/eds-avatar-content-sublabel.css

@@ -0,0 +1,5 @@
+/* Pure-React port of eds-avatar-content-sublabel.scss. */
+
+.eds-avatar .eds-avatar-content-sublabel {
+    font: var(--eds-f-paragraph-s);
+}

package/eds-avatar/eds-avatar-content-sublabel.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface EdsAvatarContentSublabelProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Secondary label text (`<ng-content/>` → `{children}`). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsAvatarContentSublabel` — pure React port of the Angular `eds-avatar-content-sublabel`.
+ *
+ * The secondary (regular-weight) label line inside an `EdsAvatarContent`. Pure content
+ * projection carrying the `.eds-avatar-content-sublabel` class.
+ */
+export declare const EdsAvatarContentSublabel: React.ForwardRefExoticComponent<EdsAvatarContentSublabelProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=eds-avatar-content-sublabel.d.ts.map

package/eds-avatar/eds-avatar-content-sublabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-avatar-content-sublabel.d.ts","sourceRoot":"","sources":["../../src/eds-avatar/eds-avatar-content-sublabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACxF,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,uGAYpC,CAAC"}

package/eds-avatar/eds-avatar-content-sublabel.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsAvatarContentSublabel` — pure React port of the Angular `eds-avatar-content-sublabel`.
+ *
+ * The secondary (regular-weight) label line inside an `EdsAvatarContent`. Pure content
+ * projection carrying the `.eds-avatar-content-sublabel` class.
+ */
+export const EdsAvatarContentSublabel = React.forwardRef(function EdsAvatarContentSublabel({ children, className, ...rest }, ref) {
+    return (_jsx("span", { ref: ref, className: className ? `eds-avatar-content-sublabel ${className}` : 'eds-avatar-content-sublabel', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-avatar-content-sublabel.js.map

package/eds-avatar/eds-avatar-content-sublabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-avatar-content-sublabel.js","sourceRoot":"","sources":["../../src/eds-avatar/eds-avatar-content-sublabel.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,KAAK,CAAC,UAAU,CACpD,SAAS,wBAAwB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IACnE,OAAO,CACH,eACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,+BAA+B,SAAS,EAAE,CAAC,CAAC,CAAC,6BAA6B,KAC7F,IAAI,YAEP,QAAQ,GACN,CACV,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-avatar/eds-avatar-content.css

@@ -0,0 +1,6 @@
+/* Pure-React port of eds-avatar-content.scss. */
+
+.eds-avatar .eds-avatar-content {
+    display: flex;
+    flex-direction: column;
+}

package/eds-avatar/eds-avatar-content.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export interface EdsAvatarContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The label / sublabel lines — typically an `EdsAvatarContentLabel` followed by an
+     * `EdsAvatarContentSublabel`. The Angular template projects `eds-avatar-content-label`
+     * then `eds-avatar-content-sublabel`; here they render in child order via `{children}`.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsAvatarContent` — pure React port of the Angular `eds-avatar-content`.
+ *
+ * A vertical (column) text block placed beside the avatar surface, holding the label and
+ * sublabel lines. Carries the `.eds-avatar-content` class.
+ */
+export declare const EdsAvatarContent: React.ForwardRefExoticComponent<EdsAvatarContentProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-avatar-content.d.ts.map

package/eds-avatar/eds-avatar-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-avatar-content.d.ts","sourceRoot":"","sources":["../../src/eds-avatar/eds-avatar-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,8FAY5B,CAAC"}

package/eds-avatar/eds-avatar-content.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsAvatarContent` — pure React port of the Angular `eds-avatar-content`.
+ *
+ * A vertical (column) text block placed beside the avatar surface, holding the label and
+ * sublabel lines. Carries the `.eds-avatar-content` class.
+ */
+export const EdsAvatarContent = React.forwardRef(function EdsAvatarContent({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-avatar-content ${className}` : 'eds-avatar-content', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-avatar-content.js.map

package/eds-avatar/eds-avatar-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-avatar-content.js","sourceRoot":"","sources":["../../src/eds-avatar/eds-avatar-content.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAC5C,SAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAC3D,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,sBAAsB,SAAS,EAAE,CAAC,CAAC,CAAC,oBAAoB,KAC3E,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-avatar/eds-avatar-icon.css

@@ -0,0 +1,13 @@
+/* Pure-React port of eds-avatar-icon.scss. */
+
+.eds-avatar .eds-avatar-icon {
+    display: inline-flex;
+    color: var(--_color);
+}
+
+.eds-avatar .eds-avatar-icon .eds-icon-svg svg {
+    height: var(--_icon-size) !important;
+    width: var(--_icon-size) !important;
+    fill: var(--_color) !important;
+    color: var(--_color) !important;
+}

package/eds-avatar/eds-avatar-icon.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface EdsAvatarIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Projected content — an `EdsIcon`, `EdsAvatarText`, or `EdsAvatarImage`. */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsAvatarIcon` — pure React port of the Angular `eds-avatar-icon`.
+ *
+ * A pure content-projection wrapper (`<ng-content/>` → `{children}`) that carries the
+ * `.eds-avatar-icon` class. It inherits the avatar's `--_color` / `--_icon-size` privates
+ * from the `.eds-avatar` ancestor and sizes the projected icon accordingly.
+ */
+export declare const EdsAvatarIcon: React.ForwardRefExoticComponent<EdsAvatarIconProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=eds-avatar-icon.d.ts.map

package/eds-avatar/eds-avatar-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-avatar-icon.d.ts","sourceRoot":"","sources":["../../src/eds-avatar/eds-avatar-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC7E,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,4FAaxB,CAAC"}

package/eds-avatar/eds-avatar-icon.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsAvatarIcon` — pure React port of the Angular `eds-avatar-icon`.
+ *
+ * A pure content-projection wrapper (`<ng-content/>` → `{children}`) that carries the
+ * `.eds-avatar-icon` class. It inherits the avatar's `--_color` / `--_icon-size` privates
+ * from the `.eds-avatar` ancestor and sizes the projected icon accordingly.
+ */
+export const EdsAvatarIcon = React.forwardRef(function EdsAvatarIcon({ children, className, ...rest }, ref) {
+    return (_jsx("span", { ref: ref, className: className ? `eds-avatar-icon ${className}` : 'eds-avatar-icon', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-avatar-icon.js.map

package/eds-avatar/eds-avatar-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-avatar-icon.js","sourceRoot":"","sources":["../../src/eds-avatar/eds-avatar-icon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAsC,SAAS,aAAa,CACrG,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAChC,GAAG;IAEH,OAAO,CACH,eACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,mBAAmB,SAAS,EAAE,CAAC,CAAC,CAAC,iBAAiB,KACrE,IAAI,YAEP,QAAQ,GACN,CACV,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-avatar/eds-avatar-image.css

@@ -0,0 +1,24 @@
+/* Pure-React port of eds-avatar-image.scss. */
+
+.eds-avatar .eds-avatar-image .eds-avatar-image-wrapper {
+    background-size: cover;
+    height: var(--_size);
+    width: var(--_size);
+}
+
+.eds-avatar .eds-avatar-image .eds-avatar-image-wrapper img {
+    border-radius: var(--eds-br-full);
+    height: var(--_size);
+    width: var(--_size);
+}
+
+.eds-avatar .eds-avatar-image .eds-icon-svg svg {
+    height: var(--_size);
+    width: var(--_size);
+}
+
+.eds-avatar .eds-avatar-image[data-default] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

package/eds-avatar/eds-avatar-image.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export interface EdsAvatarImageProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * URL of the image to display. When empty, a default user icon (`user:core`) is shown
+     * and the `data-default` attribute is set (matching the Angular `[attr.default]`).
+     * @default ''
+     */
+    imageUrl?: string;
+}
+/**
+ * `EdsAvatarImage` — pure React port of the Angular `eds-avatar-image`.
+ *
+ * Renders the avatar's image (`<img src>` in a `.eds-avatar-image-wrapper`) when `imageUrl`
+ * is provided, otherwise the default `EdsIcon` (`user:core`, neutral) fallback. Carries the
+ * `.eds-avatar-image` class and reflects `data-default` when no image URL is set. Image size
+ * comes from the avatar's `--_size` private on the `.eds-avatar` ancestor.
+ */
+export declare const EdsAvatarImage: React.ForwardRefExoticComponent<EdsAvatarImageProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=eds-avatar-image.d.ts.map

package/eds-avatar/eds-avatar-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-avatar-image.d.ts","sourceRoot":"","sources":["../../src/eds-avatar/eds-avatar-image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC9E;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,6FAoB1B,CAAC"}

package/eds-avatar/eds-avatar-image.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { EdsIcon } from '../eds-icon/eds-icon.js';
+/**
+ * `EdsAvatarImage` — pure React port of the Angular `eds-avatar-image`.
+ *
+ * Renders the avatar's image (`<img src>` in a `.eds-avatar-image-wrapper`) when `imageUrl`
+ * is provided, otherwise the default `EdsIcon` (`user:core`, neutral) fallback. Carries the
+ * `.eds-avatar-image` class and reflects `data-default` when no image URL is set. Image size
+ * comes from the avatar's `--_size` private on the `.eds-avatar` ancestor.
+ */
+export const EdsAvatarImage = React.forwardRef(function EdsAvatarImage({ imageUrl = '', className, ...rest }, ref) {
+    const isDefault = !imageUrl;
+    return (_jsx("span", { ref: ref, className: className ? `eds-avatar-image ${className}` : 'eds-avatar-image', "data-default": isDefault ? '' : undefined, ...rest, children: imageUrl ? (_jsx("div", { className: "eds-avatar-image-wrapper", children: _jsx("img", { src: imageUrl, alt: "Avatar" }) })) : (_jsx(EdsIcon, { icon: "user:core", color: "neutral" })) }));
+});
+//# sourceMappingURL=eds-avatar-image.js.map

package/eds-avatar/eds-avatar-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-avatar-image.js","sourceRoot":"","sources":["../../src/eds-avatar/eds-avatar-image.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAWlD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAC1C,SAAS,cAAc,CAAC,EAAE,QAAQ,GAAG,EAAE,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAC9D,MAAM,SAAS,GAAG,CAAC,QAAQ,CAAC;IAC5B,OAAO,CACH,eACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,oBAAoB,SAAS,EAAE,CAAC,CAAC,CAAC,kBAAkB,kBAC7D,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,KACpC,IAAI,YAEP,QAAQ,CAAC,CAAC,CAAC,CACR,cAAK,SAAS,EAAC,0BAA0B,YACrC,cAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAC,QAAQ,GAAG,GACjC,CACT,CAAC,CAAC,CAAC,CACA,KAAC,OAAO,IAAC,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,SAAS,GAAG,CAC/C,GACE,CACV,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-avatar/eds-avatar-list.css

@@ -0,0 +1,21 @@
+/* Pure-React port of eds-avatar-list.scss. */
+
+.eds-avatar-list {
+    display: inline-flex;
+}
+
+.eds-avatar-list .eds-avatar {
+    border: var(--eds-bw-s) solid var(--eds-c-border-inverted);
+}
+
+.eds-avatar-list .eds-avatar[data-size="s"]:not(:first-child) {
+    margin-left: calc(-1 * var(--eds-sp-s));
+}
+
+.eds-avatar-list .eds-avatar[data-size="m"]:not(:first-child) {
+    margin-left: calc(-1 * var(--eds-sp-m));
+}
+
+.eds-avatar-list .eds-avatar[data-size="l"]:not(:first-child) {
+    margin-left: calc(-1 * var(--eds-sp-l));
+}

package/eds-avatar/eds-avatar-list.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface EdsAvatarListProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The grouped `EdsAvatar` elements (`<ng-content/>` → `{children}`). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsAvatarList` — pure React port of the Angular `eds-avatar-list`.
+ *
+ * A horizontal overlapping stack of avatars. Carries the `.eds-avatar-list` class; its CSS
+ * adds an inverted border to each descendant `.eds-avatar` and negative margins to overlap
+ * them by size (matching the Angular `::ng-deep .eds-avatar` rules).
+ */
+export declare const EdsAvatarList: React.ForwardRefExoticComponent<EdsAvatarListProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-avatar-list.d.ts.map

package/eds-avatar/eds-avatar-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-avatar-list.d.ts","sourceRoot":"","sources":["../../src/eds-avatar/eds-avatar-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,yEAAyE;IACzE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,2FAYzB,CAAC"}

package/eds-avatar/eds-avatar-list.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsAvatarList` — pure React port of the Angular `eds-avatar-list`.
+ *
+ * A horizontal overlapping stack of avatars. Carries the `.eds-avatar-list` class; its CSS
+ * adds an inverted border to each descendant `.eds-avatar` and negative margins to overlap
+ * them by size (matching the Angular `::ng-deep .eds-avatar` rules).
+ */
+export const EdsAvatarList = React.forwardRef(function EdsAvatarList({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-avatar-list ${className}` : 'eds-avatar-list', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-avatar-list.js.map

package/eds-avatar/eds-avatar-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-avatar-list.js","sourceRoot":"","sources":["../../src/eds-avatar/eds-avatar-list.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CACzC,SAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IACxD,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,mBAAmB,SAAS,EAAE,CAAC,CAAC,CAAC,iBAAiB,KACrE,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-avatar/eds-avatar-text.css

@@ -0,0 +1,7 @@
+/* Pure-React port of eds-avatar-text.scss. */
+
+.eds-avatar .eds-avatar-text {
+    color: var(--_color);
+    font-weight: var(--_font-weight);
+    font-size: var(--_font-size);
+}

package/eds-avatar/eds-avatar-text.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface EdsAvatarTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Text / initials rendered inside the avatar (`<ng-content/>` → `{children}`). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsAvatarText` — pure React port of the Angular `eds-avatar-text`.
+ *
+ * Renders initials or short text inside the avatar surface. Pure content projection carrying
+ * the `.eds-avatar-text` class; its color / font-size come from the avatar's `--_color` /
+ * `--_font-size` privates set on the `.eds-avatar` ancestor.
+ */
+export declare const EdsAvatarText: React.ForwardRefExoticComponent<EdsAvatarTextProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=eds-avatar-text.d.ts.map

package/eds-avatar/eds-avatar-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-avatar-text.d.ts","sourceRoot":"","sources":["../../src/eds-avatar/eds-avatar-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC7E,mFAAmF;IACnF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,4FAaxB,CAAC"}

package/eds-avatar/eds-avatar-text.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsAvatarText` — pure React port of the Angular `eds-avatar-text`.
+ *
+ * Renders initials or short text inside the avatar surface. Pure content projection carrying
+ * the `.eds-avatar-text` class; its color / font-size come from the avatar's `--_color` /
+ * `--_font-size` privates set on the `.eds-avatar` ancestor.
+ */
+export const EdsAvatarText = React.forwardRef(function EdsAvatarText({ children, className, ...rest }, ref) {
+    return (_jsx("span", { ref: ref, className: className ? `eds-avatar-text ${className}` : 'eds-avatar-text', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-avatar-text.js.map

package/eds-avatar/eds-avatar-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-avatar-text.js","sourceRoot":"","sources":["../../src/eds-avatar/eds-avatar-text.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAsC,SAAS,aAAa,CACrG,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAChC,GAAG;IAEH,OAAO,CACH,eACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,mBAAmB,SAAS,EAAE,CAAC,CAAC,CAAC,iBAAiB,KACrE,IAAI,YAEP,QAAQ,GACN,CACV,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-avatar/eds-avatar.css

@@ -0,0 +1,128 @@
+/* Pure-React port of eds-avatar.scss (attribute-scoped light-DOM CSS). */
+
+.eds-avatar {
+    /* surface channels consumed by projected sub-components (icon/text) */
+    --_surface: var(--eds-c-surface-neutral-subtler);
+    --_on-surface: var(--eds-c-on-surface-neutral-subtler);
+
+    /* default size = m */
+    --_size: var(--eds-si-4xl);
+    --_icon-size: var(--eds-is-m);
+    --_font-size: var(--eds-f-s-xl);
+
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    gap: var(--eds-sp-s);
+    border-radius: var(--eds-br-full);
+}
+
+.eds-avatar .eds-avatar-wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--eds-br-full);
+    background-color: var(--_surface);
+    color: var(--_on-surface);
+    height: var(--_size);
+    width: var(--_size);
+    position: relative;
+}
+
+/* SIZE VARIANTS
+   ------------- */
+
+.eds-avatar[data-size="2xs"] {
+    --_size: var(--eds-si-m);
+    --_icon-size: var(--eds-is-2xs);
+    --_font-size: var(--eds-f-s-xs);
+}
+.eds-avatar[data-size="xs"] {
+    --_size: var(--eds-si-xl);
+    --_icon-size: var(--eds-is-xs);
+    --_font-size: var(--eds-f-s-s);
+}
+.eds-avatar[data-size="s"] {
+    --_size: var(--eds-si-3xl);
+    --_icon-size: var(--eds-is-s);
+    --_font-size: var(--eds-f-s-l);
+}
+.eds-avatar[data-size="m"] {
+    --_size: var(--eds-si-4xl);
+    --_icon-size: var(--eds-is-m);
+    --_font-size: var(--eds-f-s-xl);
+}
+.eds-avatar[data-size="l"] {
+    --_size: var(--eds-si-6xl);
+    --_icon-size: var(--eds-is-l);
+    --_font-size: var(--eds-f-s-2xl);
+}
+.eds-avatar[data-size="xl"] {
+    --_size: var(--eds-si-9xl);
+    --_icon-size: var(--eds-is-xl);
+    --_font-size: var(--eds-f-s-4xl);
+}
+
+/* COLOR PALETTE VARIANTS (expanded from base.$color-cm-map)
+   -------------------------------------------------------- */
+
+.eds-avatar[data-color="cm-blue-navy"] {
+    --_surface: var(--eds-c-surface-cm-blue-navy-subtler);
+    --_on-surface: var(--eds-c-on-surface-cm-blue-navy-subtler);
+}
+.eds-avatar[data-color="cm-blue-electric"] {
+    --_surface: var(--eds-c-surface-cm-blue-electric-subtler);
+    --_on-surface: var(--eds-c-on-surface-cm-blue-electric-subtler);
+}
+.eds-avatar[data-color="cm-blue-ocean"] {
+    --_surface: var(--eds-c-surface-cm-blue-ocean-subtler);
+    --_on-surface: var(--eds-c-on-surface-cm-blue-ocean-subtler);
+}
+.eds-avatar[data-color="cm-green"] {
+    --_surface: var(--eds-c-surface-cm-green-subtler);
+    --_on-surface: var(--eds-c-on-surface-cm-green-subtler);
+}
+.eds-avatar[data-color="cm-green-dark"] {
+    --_surface: var(--eds-c-surface-cm-green-dark-subtler);
+    --_on-surface: var(--eds-c-on-surface-cm-green-dark-subtler);
+}
+.eds-avatar[data-color="cm-orange"] {
+    --_surface: var(--eds-c-surface-cm-orange-subtler);
+    --_on-surface: var(--eds-c-on-surface-cm-orange-subtler);
+}
+.eds-avatar[data-color="cm-purple"] {
+    --_surface: var(--eds-c-surface-cm-purple-subtler);
+    --_on-surface: var(--eds-c-on-surface-cm-purple-subtler);
+}
+.eds-avatar[data-color="cm-green-lemon"] {
+    --_surface: var(--eds-c-surface-cm-green-lemon-subtler);
+    --_on-surface: var(--eds-c-on-surface-cm-green-lemon-subtler);
+}
+.eds-avatar[data-color="cm-green-pine"] {
+    --_surface: var(--eds-c-surface-cm-green-pine-subtler);
+    --_on-surface: var(--eds-c-on-surface-cm-green-pine-subtler);
+}
+.eds-avatar[data-color="cm-red-crayola"] {
+    --_surface: var(--eds-c-surface-cm-red-crayola-subtler);
+    --_on-surface: var(--eds-c-on-surface-cm-red-crayola-subtler);
+}
+.eds-avatar[data-color="cm-yellow-gold"] {
+    --_surface: var(--eds-c-surface-cm-yellow-gold-subtler);
+    --_on-surface: var(--eds-c-on-surface-cm-yellow-gold-subtler);
+}
+.eds-avatar[data-color="cm-orange-abricot"] {
+    --_surface: var(--eds-c-surface-cm-orange-abricot-subtler);
+    --_on-surface: var(--eds-c-on-surface-cm-orange-abricot-subtler);
+}
+.eds-avatar[data-color="cm-purple-violet"] {
+    --_surface: var(--eds-c-surface-cm-purple-violet-subtler);
+    --_on-surface: var(--eds-c-on-surface-cm-purple-violet-subtler);
+}
+.eds-avatar[data-color="cm-red-tomato"] {
+    --_surface: var(--eds-c-surface-cm-red-tomato-subtler);
+    --_on-surface: var(--eds-c-on-surface-cm-red-tomato-subtler);
+}
+.eds-avatar[data-color="cm-warm-grey"] {
+    --_surface: var(--eds-c-surface-cm-warm-grey-subtler);
+    --_on-surface: var(--eds-c-on-surface-cm-warm-grey-subtler);
+}

package/eds-avatar/eds-avatar.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+/** Local narrowed size union — the avatar's size contract (ported 1:1 from Angular `eds-avatar`). */
+export type EdsAvatarSize = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+export interface EdsAvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
+    /** Data attribute for E2E testing. @default 'eds-avatar' */
+    e2eAttr?: string;
+    /** Size of the avatar. @default 'm' */
+    size?: EdsAvatarSize;
+    /**
+     * ARIA label for accessibility. When `null`/omitted no `aria-label` is rendered — ensure
+     * visible text or an explicit label is provided. @default null
+     */
+    ariaLabel?: string | null;
+    /**
+     * Extra color palette applied to the avatar surface (maps to an EDS color palette, e.g.
+     * `info`, `success`, or a `cm-*` palette). Empty string uses the default neutral surface.
+     * @default ''
+     */
+    color?: string;
+    /**
+     * Avatar content — the surface slots (`EdsAvatarIcon` / `EdsAvatarText` / `EdsAvatarImage`
+     * / `EdsAvatarBadge`) rendered inside the round wrapper, plus an optional `EdsAvatarContent`
+     * rendered beside it. Mirrors the Angular `<ng-content select="…">` split.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsAvatar` — pure React port of the Angular `eds-avatar`.
+ *
+ * A round identity surface with a color palette and six sizes, holding a projected icon /
+ * text / image and an optional overlay badge, plus an optional label column beside it. The
+ * Angular template splits projection into a round `.eds-avatar-wrapper` (icon / text / image
+ * / badge) and a sibling content slot (`eds-avatar-content`); here `children` are split by
+ * element type into the same two regions. `size` / `color` reflect as `data-*`; `data-image`
+ * is set when an `EdsAvatarImage` is present (mirroring the Angular `contentChild` query).
+ */
+export declare const EdsAvatar: React.ForwardRefExoticComponent<EdsAvatarProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-avatar.d.ts.map

package/eds-avatar/eds-avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-avatar.d.ts","sourceRoot":"","sources":["../../src/eds-avatar/eds-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,qGAAqG;AACrG,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAElE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAcD;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,uFAoCpB,CAAC"}