@doist/reactist 31.3.0 → 32.0.0

package/es/avatar/avatar.js

@@ -1,113 +1,182 @@
 import _extends from '@babel/runtime/helpers/extends';
 import { c } from 'react-compiler-runtime';
 import * as React from 'react';
-import { getClassNames } from '../utils/responsive-props.js';
-import { getInitials, emailToIndex } from './utils.js';
+import classNames from 'classnames';
+import { polymorphicComponent } from '../utils/polymorphism.js';
+import { getAvatarImageIdentityKey, normalizeAvatarName, getSources, getAvailableImageSources, getInitials, getAvatarMetaColorIndex } from './utils.js';
 import modules_08f3eeac from './avatar.module.css.js';
 import { Box } from '../box/box.js';
 
-const AVATAR_COLORS = ['#fcc652', '#e9952c', '#e16b2d', '#d84b40', '#e8435a', '#e5198a', '#ad3889', '#86389c', '#a8a8a8', '#98be2f', '#5d9d50', '#5f9f85', '#5bbcb6', '#32a3bf', '#2bafeb', '#2d88c3', '#3863cc', '#5e5e5e'];
-function Avatar(t0) {
-  const $ = c(26);
-  let avatarUrl;
-  let className;
-  let exceptionallySetClassName;
-  let props;
+/**
+ * Props for the `Avatar` component.
+ */
+
+/**
+ * Displays an avatar from an image URL, a source map keyed by intrinsic
+ * image width, or initials derived from the provided name (with a background
+ * color).
+ */
+const Avatar = polymorphicComponent(function Avatar({
+  as,
+  size,
+  shape = 'circle',
+  name,
+  image,
+  alt,
+  exceptionallySetClassName,
+  'data-testid': testId,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel,
+  ...restProps
+}, ref) {
+  const label = getAvatarLabel({
+    alt,
+    name,
+    'aria-label': ariaLabel
+  });
+  const isDecorative = Boolean(ariaHidden ?? label === '');
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
+    ref: ref,
+    className: classNames(modules_08f3eeac.avatar, modules_08f3eeac[`size-${size}`], modules_08f3eeac[`shape-${shape}`], exceptionallySetClassName),
+    "data-testid": testId,
+    display: "inlineFlex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    overflow: "hidden",
+    textAlign: "center"
+  }, restProps), /*#__PURE__*/React.createElement(AvatarImage
+  // Allows `AvatarImage` to remount when the image map changes,
+  // which resets error states without replacing the avatar root.
+  , {
+    key: getAvatarImageIdentityKey(image),
+    size: size,
+    name: name,
+    image: image,
+    label: label,
+    "aria-hidden": isDecorative
+  }));
+});
+function getAvatarLabel({
+  alt,
+  name,
+  'aria-label': ariaLabel
+}) {
+  return ariaLabel ?? alt ?? normalizeAvatarName(name);
+}
+function AvatarImage(t0) {
+  const $ = c(22);
+  const {
+    size,
+    name,
+    image,
+    label,
+    "aria-hidden": ariaHidden
+  } = t0;
+  const imageSources = getSources(image, size);
   let t1;
-  let t2;
-  let user;
-  if ($[0] !== t0) {
-    ({
-      user,
-      avatarUrl,
-      size: t1,
-      className,
-      colorList: t2,
-      exceptionallySetClassName,
-      ...props
-    } = t0);
-    $[0] = t0;
-    $[1] = avatarUrl;
-    $[2] = className;
-    $[3] = exceptionallySetClassName;
-    $[4] = props;
-    $[5] = t1;
-    $[6] = t2;
-    $[7] = user;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [];
+    $[0] = t1;
   } else {
-    avatarUrl = $[1];
-    className = $[2];
-    exceptionallySetClassName = $[3];
-    props = $[4];
-    t1 = $[5];
-    t2 = $[6];
-    user = $[7];
+    t1 = $[0];
   }
-  const size = t1 === undefined ? "l" : t1;
-  const colorList = t2 === undefined ? AVATAR_COLORS : t2;
-  let t3;
-  if ($[8] !== user.email || $[9] !== user.name) {
-    t3 = getInitials(user.name) || getInitials(user.email);
-    $[8] = user.email;
-    $[9] = user.name;
-    $[10] = t3;
+  const [failedImageSources, setFailedImageSources] = React.useState(t1);
+  const availableImageSources = getAvailableImageSources(imageSources, failedImageSources);
+  let t2;
+  if ($[1] !== availableImageSources || $[2] !== name) {
+    t2 = availableImageSources ? "" : getInitials(name);
+    $[1] = availableImageSources;
+    $[2] = name;
+    $[3] = t2;
   } else {
-    t3 = $[10];
+    t2 = $[3];
   }
-  const userInitials = t3;
-  const avatarSize = size ? size : "l";
-  let t4;
-  if ($[11] !== avatarUrl || $[12] !== colorList || $[13] !== user.email) {
-    t4 = avatarUrl ? {
-      backgroundImage: `url(${avatarUrl})`,
-      textIndent: "-9999px"
-    } : {
-      backgroundColor: colorList[emailToIndex(user.email, colorList.length)]
-    };
-    $[11] = avatarUrl;
-    $[12] = colorList;
-    $[13] = user.email;
-    $[14] = t4;
-  } else {
-    t4 = $[14];
+  const initials = t2;
+  const hasInitials = initials !== "";
+  if (availableImageSources) {
+    let t3;
+    if ($[4] !== availableImageSources || $[5] !== setFailedImageSources) {
+      t3 = event => {
+        const failedSource = getFailedImageSource(availableImageSources, event.currentTarget);
+        setFailedImageSources(currentFailedSources => currentFailedSources.includes(failedSource) ? currentFailedSources : [...currentFailedSources, failedSource]);
+      };
+      $[4] = availableImageSources;
+      $[5] = setFailedImageSources;
+      $[6] = t3;
+    } else {
+      t3 = $[6];
+    }
+    let t4;
+    if ($[7] !== ariaHidden || $[8] !== availableImageSources.sizes || $[9] !== availableImageSources.src || $[10] !== availableImageSources.srcSet || $[11] !== label || $[12] !== t3) {
+      t4 = /*#__PURE__*/React.createElement("img", {
+        className: modules_08f3eeac.image,
+        src: availableImageSources.src,
+        srcSet: availableImageSources.srcSet,
+        sizes: availableImageSources.sizes,
+        alt: label,
+        "aria-hidden": ariaHidden,
+        onError: t3
+      });
+      $[7] = ariaHidden;
+      $[8] = availableImageSources.sizes;
+      $[9] = availableImageSources.src;
+      $[10] = availableImageSources.srcSet;
+      $[11] = label;
+      $[12] = t3;
+      $[13] = t4;
+    } else {
+      t4 = $[13];
+    }
+    return t4;
   }
-  const style = t4;
-  let t5;
-  if ($[15] !== avatarSize) {
-    t5 = getClassNames(modules_08f3eeac, "size", avatarSize);
-    $[15] = avatarSize;
-    $[16] = t5;
-  } else {
-    t5 = $[16];
+  if (hasInitials) {
+    const t3 = modules_08f3eeac[`meta-color-${getAvatarMetaColorIndex(name)}`];
+    let t4;
+    if ($[14] !== t3) {
+      t4 = classNames(modules_08f3eeac.initials, t3);
+      $[14] = t3;
+      $[15] = t4;
+    } else {
+      t4 = $[15];
+    }
+    const t5 = label ? "img" : undefined;
+    let t6;
+    if ($[16] !== ariaHidden || $[17] !== initials || $[18] !== label || $[19] !== t4 || $[20] !== t5) {
+      t6 = /*#__PURE__*/React.createElement("div", {
+        className: t4,
+        role: t5,
+        "aria-label": label,
+        "aria-hidden": ariaHidden
+      }, initials);
+      $[16] = ariaHidden;
+      $[17] = initials;
+      $[18] = label;
+      $[19] = t4;
+      $[20] = t5;
+      $[21] = t6;
+    } else {
+      t6 = $[21];
+    }
+    return t6;
   }
-  const sizeClassName = t5;
-  let t6;
-  if ($[17] !== className || $[18] !== exceptionallySetClassName || $[19] !== sizeClassName) {
-    t6 = [className, modules_08f3eeac.avatar, sizeClassName, exceptionallySetClassName];
-    $[17] = className;
-    $[18] = exceptionallySetClassName;
-    $[19] = sizeClassName;
-    $[20] = t6;
-  } else {
-    t6 = $[20];
-  }
-  let t7;
-  if ($[21] !== props || $[22] !== style || $[23] !== t6 || $[24] !== userInitials) {
-    t7 = /*#__PURE__*/React.createElement(Box, _extends({
-      className: t6,
-      style: style
-    }, props), userInitials);
-    $[21] = props;
-    $[22] = style;
-    $[23] = t6;
-    $[24] = userInitials;
-    $[25] = t7;
-  } else {
-    t7 = $[25];
+  return null;
+}
+function getAbsoluteImageSource(src, image) {
+  try {
+    return new URL(src, image.ownerDocument.baseURI).href;
+  } catch {
+    return src;
   }
-  return t7;
 }
-Avatar.displayName = 'Avatar';
+function getFailedImageSource(imageProps, image) {
+  const failedSrc = image.currentSrc || image.src || imageProps.src;
+  const matchingSource = imageProps.sources?.find(({
+    src
+  }) => src === failedSrc || getAbsoluteImageSource(src, image) === failedSrc);
+  return matchingSource?.src ?? imageProps.src;
+}
 
 export { Avatar };
 //# sourceMappingURL=avatar.js.map

package/es/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '../box'\nimport { getClassNames } from '../utils/responsive-props'\n\nimport { emailToIndex, getInitials } from './utils'\n\nimport styles from './avatar.module.css'\n\nimport type { ObfuscatedClassName } from '../utils/common-types'\nimport type { ResponsiveProp } from '../utils/responsive-props'\n\nconst AVATAR_COLORS = [\n    '#fcc652',\n    '#e9952c',\n    '#e16b2d',\n    '#d84b40',\n    '#e8435a',\n    '#e5198a',\n    '#ad3889',\n    '#86389c',\n    '#a8a8a8',\n    '#98be2f',\n    '#5d9d50',\n    '#5f9f85',\n    '#5bbcb6',\n    '#32a3bf',\n    '#2bafeb',\n    '#2d88c3',\n    '#3863cc',\n    '#5e5e5e',\n]\n\ntype AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'\n\ntype Props = ObfuscatedClassName & {\n    /** @deprecated Please use `exceptionallySetClassName` */\n    className?: string\n    /** @deprecated */\n    colorList?: string[]\n    size?: ResponsiveProp<AvatarSize>\n    avatarUrl?: string\n    user: { name?: string; email: string }\n}\n\nfunction Avatar({\n    user,\n    avatarUrl,\n    size = 'l',\n    className,\n    colorList = AVATAR_COLORS,\n    exceptionallySetClassName,\n    ...props\n}: Props) {\n    const userInitials = getInitials(user.name) || getInitials(user.email)\n    const avatarSize = size ? size : 'l'\n\n    const style = avatarUrl\n        ? {\n              backgroundImage: `url(${avatarUrl})`,\n              textIndent: '-9999px', // hide the initials\n          }\n        : {\n              backgroundColor: colorList[emailToIndex(user.email, colorList.length)],\n          }\n\n    const sizeClassName = getClassNames(styles, 'size', avatarSize)\n\n    return (\n        <Box\n            className={[className, styles.avatar, sizeClassName, exceptionallySetClassName]}\n            style={style}\n            {...props}\n        >\n            {userInitials}\n        </Box>\n    )\n}\nAvatar.displayName = 'Avatar'\n\nexport { Avatar }\n"],"names":["AVATAR_COLORS","Avatar","t0","$","_c","avatarUrl","className","exceptionallySetClassName","props","t1","t2","user","size","colorList","undefined","t3","email","name","getInitials","userInitials","avatarSize","t4","backgroundImage","textIndent","backgroundColor","emailToIndex","length","style","t5","getClassNames","styles","sizeClassName","t6","avatar","t7","React","createElement","Box","_extends","displayName"],"mappings":"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"}
+{"version":3,"file":"avatar.js","sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../utils/polymorphism'\n\nimport {\n    getAvailableImageSources,\n    getAvatarImageIdentityKey,\n    getAvatarMetaColorIndex,\n    getInitials,\n    getSources,\n    normalizeAvatarName,\n} from './utils'\n\nimport styles from './avatar.module.css'\n\nimport type { ObfuscatedClassName } from '../utils/common-types'\nimport type { PolymorphicComponentProps } from '../utils/polymorphism'\nimport type { AvatarImage as AvatarImageProp, AvatarShape, AvatarSize, ImageSources } from './utils'\n\n/**\n * Props for the `Avatar` component.\n */\ntype AvatarOwnProps = ObfuscatedClassName & {\n    /**\n     * The rendered avatar size, in CSS pixels.\n     */\n    size: AvatarSize\n\n    /**\n     * The avatar shape.\n     *\n     * @default 'circle'\n     */\n    shape?: AvatarShape\n\n    /**\n     * The display name represented by the avatar.\n     *\n     * Used as the default accessible label, to generate fallback initials, and\n     * to assign the deterministic background color when rendering initials.\n     */\n    name?: string\n\n    /**\n     * The avatar image.\n     *\n     * Pass a string for a single image URL, or a source map keyed by intrinsic\n     * image width. Source maps render as native `srcSet`/`sizes` hints, with\n     * the largest valid source used as the fallback `src`.\n     */\n    image?: AvatarImageProp\n\n    /**\n     * Accessible text for the avatar image.\n     *\n     * Defaults to `name`. Pass an empty string when the avatar is decorative.\n     */\n    alt?: string\n\n    /**\n     * Test identifier applied to the avatar root element.\n     */\n    'data-testid'?: string\n\n    /**\n     * Avatar owns its root sizing styles. Use `exceptionallySetClassName` for the styling escape\n     * hatch.\n     */\n    style?: never\n}\n\ntype AvatarProps<ComponentType extends React.ElementType = 'div'> = PolymorphicComponentProps<\n    ComponentType,\n    AvatarOwnProps,\n    'omitClassName'\n>\n\n/**\n * Displays an avatar from an image URL, a source map keyed by intrinsic\n * image width, or initials derived from the provided name (with a background\n * color).\n */\nconst Avatar = polymorphicComponent<'div', AvatarOwnProps, 'omitClassName'>(function Avatar(\n    {\n        as,\n        size,\n        shape = 'circle',\n        name,\n        image,\n        alt,\n        exceptionallySetClassName,\n        'data-testid': testId,\n        'aria-hidden': ariaHidden,\n        'aria-label': ariaLabel,\n        ...restProps\n    },\n    ref,\n) {\n    const label = getAvatarLabel({ alt, name, 'aria-label': ariaLabel })\n    const isDecorative = Boolean(ariaHidden ?? label === '')\n\n    return (\n        <Box\n            as={as}\n            ref={ref}\n            className={classNames(\n                styles.avatar,\n                styles[`size-${size}`],\n                styles[`shape-${shape}`],\n                exceptionallySetClassName,\n            )}\n            data-testid={testId}\n            display=\"inlineFlex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            flexShrink={0}\n            overflow=\"hidden\"\n            textAlign=\"center\"\n            {...restProps}\n        >\n            <AvatarImage\n                // Allows `AvatarImage` to remount when the image map changes,\n                // which resets error states without replacing the avatar root.\n                key={getAvatarImageIdentityKey(image)}\n                size={size}\n                name={name}\n                image={image}\n                label={label}\n                aria-hidden={isDecorative}\n            />\n        </Box>\n    )\n})\n\nfunction getAvatarLabel({\n    alt,\n    name,\n    'aria-label': ariaLabel,\n}: Pick<AvatarProps, 'alt' | 'name' | 'aria-label'>) {\n    return ariaLabel ?? alt ?? normalizeAvatarName(name)\n}\n\ntype AvatarImageProps = {\n    size: AvatarSize\n    name?: string\n    image?: AvatarImageProp\n    label?: string\n    'aria-hidden'?: boolean\n}\n\nfunction AvatarImage({ size, name, image, label, 'aria-hidden': ariaHidden }: AvatarImageProps) {\n    const imageSources = getSources(image, size)\n    const [failedImageSources, setFailedImageSources] = React.useState<string[]>([])\n    const availableImageSources = getAvailableImageSources(imageSources, failedImageSources)\n    const initials = availableImageSources ? '' : getInitials(name)\n    const hasInitials = initials !== ''\n\n    if (availableImageSources) {\n        return (\n            <img\n                className={styles.image}\n                src={availableImageSources.src}\n                srcSet={availableImageSources.srcSet}\n                sizes={availableImageSources.sizes}\n                alt={label}\n                aria-hidden={ariaHidden}\n                onError={(event) => {\n                    const failedSource = getFailedImageSource(\n                        availableImageSources,\n                        event.currentTarget,\n                    )\n\n                    setFailedImageSources((currentFailedSources) =>\n                        currentFailedSources.includes(failedSource)\n                            ? currentFailedSources\n                            : [...currentFailedSources, failedSource],\n                    )\n                }}\n            />\n        )\n    }\n    if (hasInitials) {\n        return (\n            <div\n                className={classNames(\n                    styles.initials,\n                    styles[`meta-color-${getAvatarMetaColorIndex(name)}`],\n                )}\n                role={label ? 'img' : undefined}\n                aria-label={label}\n                aria-hidden={ariaHidden}\n            >\n                {initials}\n            </div>\n        )\n    }\n\n    return null\n}\n\nfunction getAbsoluteImageSource(src: string, image: HTMLImageElement) {\n    try {\n        return new URL(src, image.ownerDocument.baseURI).href\n    } catch {\n        return src\n    }\n}\n\nfunction getFailedImageSource(imageProps: ImageSources, image: HTMLImageElement) {\n    const failedSrc = image.currentSrc || image.src || imageProps.src\n    const matchingSource = imageProps.sources?.find(\n        ({ src }) => src === failedSrc || getAbsoluteImageSource(src, image) === failedSrc,\n    )\n\n    return matchingSource?.src ?? imageProps.src\n}\n\nexport { Avatar }\nexport type { AvatarProps }\nexport type { AvatarImage, AvatarShape, AvatarSize } from './utils'\n"],"names":["Avatar","polymorphicComponent","as","size","shape","name","image","alt","exceptionallySetClassName","testId","ariaHidden","ariaLabel","restProps","ref","label","getAvatarLabel","isDecorative","Boolean","React","createElement","Box","_extends","className","classNames","styles","avatar","display","alignItems","justifyContent","flexShrink","overflow","textAlign","AvatarImage","key","getAvatarImageIdentityKey","normalizeAvatarName","t0","$","_c","imageSources","getSources","t1","Symbol","for","failedImageSources","setFailedImageSources","useState","availableImageSources","getAvailableImageSources","t2","getInitials","initials","hasInitials","t3","event","failedSource","getFailedImageSource","currentTarget","currentFailedSources","includes","t4","sizes","src","srcSet","onError","getAvatarMetaColorIndex","t5","undefined","t6","role","getAbsoluteImageSource","URL","ownerDocument","baseURI","href","imageProps","failedSrc","currentSrc","matchingSource","sources","find"],"mappings":"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"}

package/es/avatar/avatar.module.css.js

@@ -1,4 +1,4 @@
-var modules_08f3eeac = {"avatar":"_38a1be89","size-xxs":"d32e92ae","size-xs":"_0667d719","size-s":"cf529fcf","size-m":"_6e268eab","size-l":"d64c62cf","size-xl":"_44fb77de","size-xxl":"_01f85e0e","size-xxxl":"_41a5fe19","tablet-size-xxs":"_6ab1577d","tablet-size-xs":"b52a4963","tablet-size-s":"_714a8419","tablet-size-m":"_81cd4d51","tablet-size-l":"bf0a4edb","tablet-size-xl":"e4f0dabd","tablet-size-xxl":"_67ea065d","tablet-size-xxxl":"_2af7f76f","desktop-size-xxs":"_759081dc","desktop-size-xs":"_8290d1c1","desktop-size-s":"_48ea172d","desktop-size-m":"_758f6641","desktop-size-l":"f9ada088","desktop-size-xl":"d3bb7470","desktop-size-xxl":"_9a312ee3","desktop-size-xxxl":"a1d30c23"};
+var modules_08f3eeac = {"avatar":"acf9ee3d","size-80":"_5b32f21b","size-72":"_5dd2ceae","size-62":"_0737423f","size-50":"_47744c53","size-40":"_087775aa","size-36":"_02c89bce","size-30":"_3ed61ce0","size-28":"c9fa2651","size-24":"_89506d0e","size-20":"d7ab9fd7","size-18":"_32fef877","size-16":"_8962c0a0","size-12":"a06fa349","initials":"_80b6bfbf","meta-color-0":"_64da0562","meta-color-1":"ee7c29c0","meta-color-2":"_70215fb1","meta-color-3":"_488b23cd","meta-color-4":"f6b3e824","meta-color-5":"_88b828ae","meta-color-6":"f931ad92","meta-color-7":"_504e515a","meta-color-8":"_277cc6cd","meta-color-9":"db85100e","meta-color-10":"c76af5ed","meta-color-11":"ab7368dc","meta-color-12":"c2a85a75","meta-color-13":"_0e942ae0","meta-color-14":"_2f79016f","meta-color-15":"_118f815d","meta-color-16":"_6e5574e6","meta-color-17":"_49d688e7","meta-color-18":"d5233bf3","meta-color-19":"_710699d5","shape-circle":"_2b4e8069","shape-rounded":"_28fdd710","image":"bda7eadb"};
 
 export { modules_08f3eeac as default };
 //# sourceMappingURL=avatar.module.css.js.map

package/es/avatar/utils.js

@@ -1,24 +1,120 @@
+/**
+ * Supported avatar sizes, in CSS pixels.
+ */
+
+/**
+ * Supported avatar clipping shapes.
+ */
+
+/**
+ * Avatar image source.
+ *
+ * Use a string for a single image URL, or a source map keyed by intrinsic image width. Source maps
+ * are converted to native `srcSet` width descriptors.
+ */
+
+const AVATAR_META_COLOR_COUNT = 20;
+const WHITESPACE_REGEXP = new RegExp('\\p{White_Space}+', 'gu');
+const GRAPHEME_SEGMENTER = typeof Intl !== 'undefined' && 'Segmenter' in Intl ? new Intl.Segmenter('und', {
+  granularity: 'grapheme'
+}) : undefined;
+function normalizeAvatarName(name) {
+  return name?.normalize('NFC').trim().replace(WHITESPACE_REGEXP, ' ') ?? '';
+}
+function getGraphemeClusters(value) {
+  if (GRAPHEME_SEGMENTER) {
+    return Array.from(GRAPHEME_SEGMENTER.segment(value), ({
+      segment
+    }) => segment);
+  }
+  return Array.from(value);
+}
+function getInitialGrapheme(value) {
+  return getGraphemeClusters(value?.toUpperCase() ?? '')[0] ?? '';
+}
 function getInitials(name) {
-  if (!name) {
+  const nameParts = normalizeAvatarName(name).split(' ').filter(Boolean);
+  if (nameParts.length === 0) {
     return '';
   }
-  const seed = name.trim().split(' ');
-  const firstInitial = seed[0];
-  const lastInitial = seed[seed.length - 1];
-  let initials = firstInitial?.[0];
-  if (firstInitial != null && lastInitial != null && initials != null &&
-  // Better readable this way.
-  // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with
-  firstInitial[0] !== lastInitial[0]) {
-    initials += lastInitial[0];
+  if (nameParts.length === 1) {
+    return getGraphemeClusters(nameParts[0].toUpperCase()).slice(0, 2).join('');
+  }
+  return `${getInitialGrapheme(nameParts[0])}${getInitialGrapheme(nameParts[nameParts.length - 1])}`;
+}
+function getSortedImageSources(image) {
+  return Object.entries(image).map(([sourceSize, src]) => ({
+    sourceSize: Number(sourceSize),
+    src
+  })).filter(({
+    sourceSize,
+    src
+  }) => Number.isFinite(sourceSize) && sourceSize > 0 && src).sort((a, b) => a.sourceSize - b.sourceSize);
+}
+function getImagePropsFromSources(sources, sizes) {
+  if (sources.length === 0) {
+    return undefined;
+  }
+  return {
+    src: sources[sources.length - 1].src,
+    srcSet: sources.map(({
+      sourceSize,
+      src
+    }) => `${src} ${sourceSize}w`).join(', '),
+    sizes,
+    sources
+  };
+}
+function getSources(image, size) {
+  if (!image) {
+    return undefined;
+  }
+  if (typeof image === 'string') {
+    return {
+      src: image
+    };
+  }
+  const sources = getSortedImageSources(image);
+  return getImagePropsFromSources(sources, `${size}px`);
+}
+function getAvatarImageIdentityKey(image) {
+  if (!image) {
+    return 'fallback';
+  }
+  if (typeof image === 'string') {
+    return image;
+  }
+  const sources = getSortedImageSources(image);
+  if (sources.length === 0) {
+    return 'fallback';
   }
-  return initials?.toUpperCase();
+  return sources.map(({
+    sourceSize,
+    src
+  }) => `${sourceSize}:${src}`).join('|');
 }
-function emailToIndex(email, maxIndex) {
-  const seed = email.split('@')[0];
-  const hash = seed ? seed.charCodeAt(0) + seed.charCodeAt(seed.length - 1) || 0 : 0;
-  return hash % maxIndex;
+function getAvailableImageSources(imageProps, failedSources) {
+  if (!imageProps) {
+    return undefined;
+  }
+  if (failedSources.length === 0) {
+    return imageProps;
+  }
+  if (!imageProps.sources) {
+    return failedSources.includes(imageProps.src) ? undefined : imageProps;
+  }
+  return getImagePropsFromSources(imageProps.sources.filter(({
+    src
+  }) => !failedSources.includes(src)), imageProps.sizes);
+}
+function getAvatarMetaColorIndex(name) {
+  const normalizedName = normalizeAvatarName(name);
+  let hash = 0;
+  for (const char of normalizedName) {
+    hash = hash * 31 + (char.codePointAt(0) ?? 0) >>> 0;
+  }
+  return hash % AVATAR_META_COLOR_COUNT;
 }
 
-export { emailToIndex, getInitials };
+export { AVATAR_META_COLOR_COUNT, getAvailableImageSources, getAvatarImageIdentityKey, getAvatarMetaColorIndex, getInitials, getSources, normalizeAvatarName };
 //# sourceMappingURL=utils.js.map

package/es/avatar/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/avatar/utils.ts"],"sourcesContent":["function getInitials(name?: string) {\n    if (!name) {\n        return ''\n    }\n\n    const seed = name.trim().split(' ')\n    const firstInitial = seed[0]\n    const lastInitial = seed[seed.length - 1]\n\n    let initials = firstInitial?.[0]\n    if (\n        firstInitial != null &&\n        lastInitial != null &&\n        initials != null &&\n        // Better readable this way.\n        // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with\n        firstInitial[0] !== lastInitial[0]\n    ) {\n        initials += lastInitial[0]\n    }\n    return initials?.toUpperCase()\n}\n\nfunction emailToIndex(email: string, maxIndex: number) {\n    const seed = email.split('@')[0]\n    const hash = seed ? seed.charCodeAt(0) + seed.charCodeAt(seed.length - 1) || 0 : 0\n    return hash % maxIndex\n}\n\nexport { emailToIndex, getInitials }\n"],"names":["getInitials","name","seed","trim","split","firstInitial","lastInitial","length","initials","toUpperCase","emailToIndex","email","maxIndex","hash","charCodeAt"],"mappings":"AAAA,SAASA,WAAWA,CAACC,IAAa,EAAE;EAChC,IAAI,CAACA,IAAI,EAAE;AACP,IAAA,OAAO,EAAE,CAAA;AACb,GAAA;EAEA,MAAMC,IAAI,GAAGD,IAAI,CAACE,IAAI,EAAE,CAACC,KAAK,CAAC,GAAG,CAAC,CAAA;AACnC,EAAA,MAAMC,YAAY,GAAGH,IAAI,CAAC,CAAC,CAAC,CAAA;EAC5B,MAAMI,WAAW,GAAGJ,IAAI,CAACA,IAAI,CAACK,MAAM,GAAG,CAAC,CAAC,CAAA;AAEzC,EAAA,IAAIC,QAAQ,GAAGH,YAAY,GAAG,CAAC,CAAC,CAAA;EAChC,IACIA,YAAY,IAAI,IAAI,IACpBC,WAAW,IAAI,IAAI,IACnBE,QAAQ,IAAI,IAAI;AAChB;AACA;EACAH,YAAY,CAAC,CAAC,CAAC,KAAKC,WAAW,CAAC,CAAC,CAAC,EACpC;AACEE,IAAAA,QAAQ,IAAIF,WAAW,CAAC,CAAC,CAAC,CAAA;AAC9B,GAAA;AACA,EAAA,OAAOE,QAAQ,EAAEC,WAAW,EAAE,CAAA;AAClC,CAAA;AAEA,SAASC,YAAYA,CAACC,KAAa,EAAEC,QAAgB,EAAE;EACnD,MAAMV,IAAI,GAAGS,KAAK,CAACP,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;EAChC,MAAMS,IAAI,GAAGX,IAAI,GAAGA,IAAI,CAACY,UAAU,CAAC,CAAC,CAAC,GAAGZ,IAAI,CAACY,UAAU,CAACZ,IAAI,CAACK,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;EAClF,OAAOM,IAAI,GAAGD,QAAQ,CAAA;AAC1B;;;;"}
+{"version":3,"file":"utils.js","sources":["../../src/avatar/utils.ts"],"sourcesContent":["const AVATAR_SIZES = [80, 72, 62, 50, 40, 36, 30, 28, 24, 20, 18, 16, 12] as const\n\n/**\n * Supported avatar sizes, in CSS pixels.\n */\ntype AvatarSize = (typeof AVATAR_SIZES)[number]\n\n/**\n * Supported avatar clipping shapes.\n */\ntype AvatarShape = 'circle' | 'rounded'\n\n/**\n * Avatar image source.\n *\n * Use a string for a single image URL, or a source map keyed by intrinsic image width. Source maps\n * are converted to native `srcSet` width descriptors.\n */\ntype AvatarImage = string | Record<number, string>\n\ntype AvatarImageSource = {\n    sourceSize: number\n    src: string\n}\n\ntype ImageSources = {\n    src: string\n    srcSet?: string\n    sizes?: string\n    sources?: AvatarImageSource[]\n}\n\nconst AVATAR_META_COLOR_COUNT = 20\n\nconst WHITESPACE_REGEXP = new RegExp('\\\\p{White_Space}+', 'gu')\nconst GRAPHEME_SEGMENTER =\n    typeof Intl !== 'undefined' && 'Segmenter' in Intl\n        ? new Intl.Segmenter('und', { granularity: 'grapheme' })\n        : undefined\n\nfunction normalizeAvatarName(name?: string) {\n    return name?.normalize('NFC').trim().replace(WHITESPACE_REGEXP, ' ') ?? ''\n}\n\nfunction getGraphemeClusters(value: string) {\n    if (GRAPHEME_SEGMENTER) {\n        return Array.from(GRAPHEME_SEGMENTER.segment(value), ({ segment }) => segment)\n    }\n\n    return Array.from(value)\n}\n\nfunction getInitialGrapheme(value?: string) {\n    return getGraphemeClusters(value?.toUpperCase() ?? '')[0] ?? ''\n}\n\nfunction getInitials(name?: string) {\n    const nameParts = normalizeAvatarName(name).split(' ').filter(Boolean)\n\n    if (nameParts.length === 0) {\n        return ''\n    }\n\n    if (nameParts.length === 1) {\n        return getGraphemeClusters(nameParts[0]!.toUpperCase()).slice(0, 2).join('')\n    }\n\n    return `${getInitialGrapheme(nameParts[0])}${getInitialGrapheme(nameParts[nameParts.length - 1])}`\n}\n\nfunction getSortedImageSources(image: Record<number, string>): AvatarImageSource[] {\n    return Object.entries(image)\n        .map(([sourceSize, src]) => ({ sourceSize: Number(sourceSize), src }))\n        .filter(({ sourceSize, src }) => Number.isFinite(sourceSize) && sourceSize > 0 && src)\n        .sort((a, b) => a.sourceSize - b.sourceSize)\n}\n\nfunction getImagePropsFromSources(\n    sources: AvatarImageSource[],\n    sizes?: string,\n): ImageSources | undefined {\n    if (sources.length === 0) {\n        return undefined\n    }\n\n    return {\n        src: sources[sources.length - 1]!.src,\n        srcSet: sources.map(({ sourceSize, src }) => `${src} ${sourceSize}w`).join(', '),\n        sizes,\n        sources,\n    }\n}\n\nfunction getSources(image: AvatarImage | undefined, size: AvatarSize): ImageSources | undefined {\n    if (!image) {\n        return undefined\n    }\n\n    if (typeof image === 'string') {\n        return { src: image }\n    }\n\n    const sources = getSortedImageSources(image)\n    return getImagePropsFromSources(sources, `${size}px`)\n}\n\nfunction getAvatarImageIdentityKey(image?: AvatarImage) {\n    if (!image) {\n        return 'fallback'\n    }\n\n    if (typeof image === 'string') {\n        return image\n    }\n\n    const sources = getSortedImageSources(image)\n    if (sources.length === 0) {\n        return 'fallback'\n    }\n\n    return sources.map(({ sourceSize, src }) => `${sourceSize}:${src}`).join('|')\n}\n\nfunction getAvailableImageSources(\n    imageProps: ImageSources | undefined,\n    failedSources: readonly string[],\n) {\n    if (!imageProps) {\n        return undefined\n    }\n\n    if (failedSources.length === 0) {\n        return imageProps\n    }\n\n    if (!imageProps.sources) {\n        return failedSources.includes(imageProps.src) ? undefined : imageProps\n    }\n\n    return getImagePropsFromSources(\n        imageProps.sources.filter(({ src }) => !failedSources.includes(src)),\n        imageProps.sizes,\n    )\n}\n\nfunction getAvatarMetaColorIndex(name?: string) {\n    const normalizedName = normalizeAvatarName(name)\n    let hash = 0\n\n    for (const char of normalizedName) {\n        hash = (hash * 31 + (char.codePointAt(0) ?? 0)) >>> 0\n    }\n\n    return hash % AVATAR_META_COLOR_COUNT\n}\n\nexport {\n    AVATAR_META_COLOR_COUNT,\n    AVATAR_SIZES,\n    getAvailableImageSources,\n    getAvatarImageIdentityKey,\n    getAvatarMetaColorIndex,\n    getInitials,\n    getSources,\n    normalizeAvatarName,\n}\nexport type { AvatarImage, AvatarImageSource, AvatarShape, AvatarSize, ImageSources }\n"],"names":["AVATAR_META_COLOR_COUNT","WHITESPACE_REGEXP","RegExp","GRAPHEME_SEGMENTER","Intl","Segmenter","granularity","undefined","normalizeAvatarName","name","normalize","trim","replace","getGraphemeClusters","value","Array","from","segment","getInitialGrapheme","toUpperCase","getInitials","nameParts","split","filter","Boolean","length","slice","join","getSortedImageSources","image","Object","entries","map","sourceSize","src","Number","isFinite","sort","a","b","getImagePropsFromSources","sources","sizes","srcSet","getSources","size","getAvatarImageIdentityKey","getAvailableImageSources","imageProps","failedSources","includes","getAvatarMetaColorIndex","normalizedName","hash","char","codePointAt"],"mappings":"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"}

package/es/utils/polymorphism.js.map

@@ -1 +1 @@
-{"version":3,"file":"polymorphism.js","sources":["../../src/utils/polymorphism.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport * as React from 'react'\n\nimport type { ObfuscatedClassName } from './common-types'\n\ntype Merge<P1, P2> = Omit<P1, keyof P2> & P2\n\ntype EmptyObject = {\n    [K in any]: never\n}\n\ntype ObfuscateClassNameMode = 'keepClassName' | 'obfuscateClassName' | 'omitClassName'\n\n/**\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This can be customized via the second generic parameter, as there are cases where it may be\n * needed to omit this behaviour and keep the `className`. You can also instruct it to remove the\n * `className` prop while not replacing it with the `exceptionallySetClassName` one.\n *\n * @see ObfuscatedClassName['exceptionallySetClassName'] for details about this prop\n * @see PolymorphicComponent for details about this feature\n */\ntype WithObfuscatedClassName<\n    Props,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode,\n> = 'className' extends keyof Props\n    ? ShouldObfuscateClassName extends 'obfuscateClassName'\n        ? Omit<Props, 'className'> & ObfuscatedClassName\n        : ShouldObfuscateClassName extends 'omitClassName'\n          ? Omit<Props, 'className'>\n          : ShouldObfuscateClassName extends 'keepClassName'\n            ? Props\n            : never\n    : Props\n\ntype PolymorphicProp<ComponentType extends React.ElementType> = {\n    /**\n     * Used to instruct this component what React element to render as. It can be both a string\n     * representing a HTML tag name, or a React component.\n     *\n     * When using this prop, the component you apply it to will also recognize in its props types\n     * all the props from the component or HTML element you are rendering it as.\n     *\n     * Some uses for this feature:\n     *\n     * - Using some of our layout components, while at the same time being able to set them to use\n     *   semantic HTML elements needed for accessibility purposes (e.g. `nav`, `main`, etc).\n     * - Using a design system link component, but have it internally use a client-side router link\n     *   implemented via a React component (e.g. react-router's `Link`).\n     *\n     * Keep in mind that not all compositions of this kind may work well, especially when composing\n     * with another React component and not with a HTML tag name. In particular, if the components\n     * being composed have opposing concerns of clashing features (e.g. they have contradicting\n     * styles applied to them) things may not go well. In those cases prefer to nest them instead.\n     *\n     * @see PolymorphicComponent\n     */\n    as?: ComponentType\n}\n\n/**\n * Given a component or element type, and a set of additional props, this builds the entire set of\n * props for a polymorphic component.\n *\n * It does three things:\n *\n * 1. it merges the element type props with the `OwnProps`\n * 2. it adds the `as` prop to allow for polymorphism to happen\n * 3. it optionally obfuscates or omits the className prop if present\n *\n * @see PolymorphicProp\n * @see WithObfuscatedClassName\n */\ntype PolymorphicComponentProps<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode,\n> = Merge<\n    WithObfuscatedClassName<React.ComponentProps<ComponentType>, ShouldObfuscateClassName>,\n    OwnProps & PolymorphicProp<ComponentType>\n>\n\ntype ElementTagNameMap = HTMLElementTagNameMap &\n    Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>\n\ntype ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName]\n\ntype ElementByTagOrAny<ComponentType extends React.ElementType> =\n    ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any\n\n/**\n * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via\n * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.\n *\n * @see PolymorphicComponentProps\n * @see WithObfuscatedClassName\n */\ninterface ForwardRefFunction<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode,\n> {\n    (\n        props: PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>,\n        ref:\n            | ((instance: ElementByTagOrAny<ComponentType> | null) => void)\n            | React.MutableRefObject<ElementByTagOrAny<ComponentType> | null>\n            | null,\n    ): React.ReactElement | null\n    displayName?: string\n}\n\n/**\n * A component that can customize the React element type that it renders (a.k.a. a polymorphic\n * component). This is achieved by passing a prop `as={ElementType}` or `as=\"html-tag-name\"`.\n *\n * It transparently takes care of forwarding refs, and properly sets the ref type depending on the\n * element type.\n *\n * ## Recognizing props based on the polymorphic type\n *\n * The `ComponentType` argument sets the default type for the `as` prop. Whatever the `as` prop\n * component or HTML element is, the type system will automatically allow you to pass props that are\n * not explicitly defined by you, but that are recognized as valid props to be passed to the\n * component you are rendering.\n *\n * For instance, see the following example:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor=\"field-id\">Hello</Box>\n * ```\n *\n * The `htmlFor` prop is exclusive to label elements. If you omit the `as=\"label\"` prop, the type\n * system will consider the `htmlFor` prop to be an error. The same happens if you pass a value of\n * an incorrect type to such prop. For instance, the example below will issue a type error:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor={123}>Hello</Box>\n * ```\n *\n * ## Omitting or obfuscating the `className` prop\n *\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This is to discourage customizing design system components via custom styling, while still\n * leaving the door open to do it as an escape hatch when the design system still has shortcomings\n * with respect to the product designs we want to achieve.\n *\n * The cumbersome name also serves the purpose of aiding in easily searching for the places in the\n * code where this escape hatch was needed, in order to identify areas where the design system\n * components need to improve to better match our needs.\n *\n * This behaviour can be customized via an optional second generic argument that allows to disable\n * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop\n * name.\n *\n * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)\n */\ninterface PolymorphicComponent<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName',\n> {\n    <TT extends React.ElementType = ComponentType>(\n        props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>,\n    ): React.ReactElement | null\n    readonly $$typeof: symbol\n    defaultProps?: Partial<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    propTypes?: React.WeakValidationMap<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    displayName?: string\n}\n\n/**\n * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a\n * convenience over merely using React.forwardRef directly, and then manually forcing the resulting\n * value to be typed using `as PolymorphicComponent<…>`.\n *\n * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)\n */\nfunction polymorphicComponent<\n    ComponentType extends React.ElementType = 'div',\n    OwnProps = EmptyObject,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName',\n>(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>) {\n    return React.forwardRef(render) as PolymorphicComponent<\n        ComponentType,\n        OwnProps,\n        ShouldObfuscateClassName\n    >\n}\n\nexport type { PolymorphicComponent }\nexport { polymorphicComponent }\n"],"names":["polymorphicComponent","render","React","forwardRef"],"mappings":";;AAAA;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAuCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkBA;AACA;AACA;AACA;AACA;AACA;AACA;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAmBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,oBAAoBA,CAI3BC,MAA6E,EAAE;AAC7E,EAAA,oBAAOC,KAAK,CAACC,UAAU,CAACF,MAAM,CAAC,CAAA;AAKnC;;;;"}
+{"version":3,"file":"polymorphism.js","sources":["../../src/utils/polymorphism.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport * as React from 'react'\n\nimport type { ObfuscatedClassName } from './common-types'\n\ntype Merge<P1, P2> = Omit<P1, keyof P2> & P2\n\ntype EmptyObject = {\n    [K in any]: never\n}\n\ntype ObfuscateClassNameMode = 'keepClassName' | 'obfuscateClassName' | 'omitClassName'\n\n/**\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This can be customized via the second generic parameter, as there are cases where it may be\n * needed to omit this behaviour and keep the `className`. You can also instruct it to remove the\n * `className` prop while not replacing it with the `exceptionallySetClassName` one.\n *\n * @see ObfuscatedClassName['exceptionallySetClassName'] for details about this prop\n * @see PolymorphicComponent for details about this feature\n */\ntype WithObfuscatedClassName<\n    Props,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode,\n> = 'className' extends keyof Props\n    ? ShouldObfuscateClassName extends 'obfuscateClassName'\n        ? Omit<Props, 'className'> & ObfuscatedClassName\n        : ShouldObfuscateClassName extends 'omitClassName'\n          ? Omit<Props, 'className'>\n          : ShouldObfuscateClassName extends 'keepClassName'\n            ? Props\n            : never\n    : Props\n\ntype PolymorphicProp<ComponentType extends React.ElementType> = {\n    /**\n     * Used to instruct this component what React element to render as. It can be both a string\n     * representing a HTML tag name, or a React component.\n     *\n     * When using this prop, the component you apply it to will also recognize in its props types\n     * all the props from the component or HTML element you are rendering it as.\n     *\n     * Some uses for this feature:\n     *\n     * - Using some of our layout components, while at the same time being able to set them to use\n     *   semantic HTML elements needed for accessibility purposes (e.g. `nav`, `main`, etc).\n     * - Using a design system link component, but have it internally use a client-side router link\n     *   implemented via a React component (e.g. react-router's `Link`).\n     *\n     * Keep in mind that not all compositions of this kind may work well, especially when composing\n     * with another React component and not with a HTML tag name. In particular, if the components\n     * being composed have opposing concerns of clashing features (e.g. they have contradicting\n     * styles applied to them) things may not go well. In those cases prefer to nest them instead.\n     *\n     * @see PolymorphicComponent\n     */\n    as?: ComponentType\n}\n\n/**\n * Given a component or element type, and a set of additional props, this builds the entire set of\n * props for a polymorphic component.\n *\n * It does three things:\n *\n * 1. it merges the element type props with the `OwnProps`\n * 2. it adds the `as` prop to allow for polymorphism to happen\n * 3. it optionally obfuscates or omits the className prop if present\n *\n * @see PolymorphicProp\n * @see WithObfuscatedClassName\n */\ntype PolymorphicComponentProps<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode,\n> = Merge<\n    WithObfuscatedClassName<React.ComponentProps<ComponentType>, ShouldObfuscateClassName>,\n    OwnProps & PolymorphicProp<ComponentType>\n>\n\ntype ElementTagNameMap = HTMLElementTagNameMap &\n    Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>\n\ntype ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName]\n\ntype ElementByTagOrAny<ComponentType extends React.ElementType> =\n    ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any\n\n/**\n * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via\n * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.\n *\n * @see PolymorphicComponentProps\n * @see WithObfuscatedClassName\n */\ninterface ForwardRefFunction<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode,\n> {\n    (\n        props: PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>,\n        ref:\n            | ((instance: ElementByTagOrAny<ComponentType> | null) => void)\n            | React.MutableRefObject<ElementByTagOrAny<ComponentType> | null>\n            | null,\n    ): React.ReactElement | null\n    displayName?: string\n}\n\n/**\n * A component that can customize the React element type that it renders (a.k.a. a polymorphic\n * component). This is achieved by passing a prop `as={ElementType}` or `as=\"html-tag-name\"`.\n *\n * It transparently takes care of forwarding refs, and properly sets the ref type depending on the\n * element type.\n *\n * ## Recognizing props based on the polymorphic type\n *\n * The `ComponentType` argument sets the default type for the `as` prop. Whatever the `as` prop\n * component or HTML element is, the type system will automatically allow you to pass props that are\n * not explicitly defined by you, but that are recognized as valid props to be passed to the\n * component you are rendering.\n *\n * For instance, see the following example:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor=\"field-id\">Hello</Box>\n * ```\n *\n * The `htmlFor` prop is exclusive to label elements. If you omit the `as=\"label\"` prop, the type\n * system will consider the `htmlFor` prop to be an error. The same happens if you pass a value of\n * an incorrect type to such prop. For instance, the example below will issue a type error:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor={123}>Hello</Box>\n * ```\n *\n * ## Omitting or obfuscating the `className` prop\n *\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This is to discourage customizing design system components via custom styling, while still\n * leaving the door open to do it as an escape hatch when the design system still has shortcomings\n * with respect to the product designs we want to achieve.\n *\n * The cumbersome name also serves the purpose of aiding in easily searching for the places in the\n * code where this escape hatch was needed, in order to identify areas where the design system\n * components need to improve to better match our needs.\n *\n * This behaviour can be customized via an optional second generic argument that allows to disable\n * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop\n * name.\n *\n * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)\n */\ninterface PolymorphicComponent<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName',\n> {\n    <TT extends React.ElementType = ComponentType>(\n        props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>,\n    ): React.ReactElement | null\n    readonly $$typeof: symbol\n    defaultProps?: Partial<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    propTypes?: React.WeakValidationMap<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    displayName?: string\n}\n\n/**\n * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a\n * convenience over merely using React.forwardRef directly, and then manually forcing the resulting\n * value to be typed using `as PolymorphicComponent<…>`.\n *\n * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)\n */\nfunction polymorphicComponent<\n    ComponentType extends React.ElementType = 'div',\n    OwnProps = EmptyObject,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName',\n>(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>) {\n    return React.forwardRef(render) as PolymorphicComponent<\n        ComponentType,\n        OwnProps,\n        ShouldObfuscateClassName\n    >\n}\n\nexport type { PolymorphicComponent, PolymorphicComponentProps }\nexport { polymorphicComponent }\n"],"names":["polymorphicComponent","render","React","forwardRef"],"mappings":";;AAAA;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAuCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkBA;AACA;AACA;AACA;AACA;AACA;AACA;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAmBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,oBAAoBA,CAI3BC,MAA6E,EAAE;AAC7E,EAAA,oBAAOC,KAAK,CAACC,UAAU,CAACF,MAAM,CAAC,CAAA;AAKnC;;;;"}

package/lib/avatar/avatar.d.ts

@@ -1,21 +1,59 @@
 import * as React from 'react';
 import type { ObfuscatedClassName } from '../utils/common-types';
-import type { ResponsiveProp } from '../utils/responsive-props';
-type AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
-type Props = ObfuscatedClassName & {
-    /** @deprecated Please use `exceptionallySetClassName` */
-    className?: string;
-    /** @deprecated */
-    colorList?: string[];
-    size?: ResponsiveProp<AvatarSize>;
-    avatarUrl?: string;
-    user: {
-        name?: string;
-        email: string;
-    };
+import type { PolymorphicComponentProps } from '../utils/polymorphism';
+import type { AvatarImage as AvatarImageProp, AvatarShape, AvatarSize } from './utils';
+/**
+ * Props for the `Avatar` component.
+ */
+type AvatarOwnProps = ObfuscatedClassName & {
+    /**
+     * The rendered avatar size, in CSS pixels.
+     */
+    size: AvatarSize;
+    /**
+     * The avatar shape.
+     *
+     * @default 'circle'
+     */
+    shape?: AvatarShape;
+    /**
+     * The display name represented by the avatar.
+     *
+     * Used as the default accessible label, to generate fallback initials, and
+     * to assign the deterministic background color when rendering initials.
+     */
+    name?: string;
+    /**
+     * The avatar image.
+     *
+     * Pass a string for a single image URL, or a source map keyed by intrinsic
+     * image width. Source maps render as native `srcSet`/`sizes` hints, with
+     * the largest valid source used as the fallback `src`.
+     */
+    image?: AvatarImageProp;
+    /**
+     * Accessible text for the avatar image.
+     *
+     * Defaults to `name`. Pass an empty string when the avatar is decorative.
+     */
+    alt?: string;
+    /**
+     * Test identifier applied to the avatar root element.
+     */
+    'data-testid'?: string;
+    /**
+     * Avatar owns its root sizing styles. Use `exceptionallySetClassName` for the styling escape
+     * hatch.
+     */
+    style?: never;
 };
-declare function Avatar({ user, avatarUrl, size, className, colorList, exceptionallySetClassName, ...props }: Props): React.JSX.Element;
-declare namespace Avatar {
-    var displayName: string;
-}
+type AvatarProps<ComponentType extends React.ElementType = 'div'> = PolymorphicComponentProps<ComponentType, AvatarOwnProps, 'omitClassName'>;
+/**
+ * Displays an avatar from an image URL, a source map keyed by intrinsic
+ * image width, or initials derived from the provided name (with a background
+ * color).
+ */
+declare const Avatar: import("../utils/polymorphism").PolymorphicComponent<"div", AvatarOwnProps, "omitClassName">;
 export { Avatar };
+export type { AvatarProps };
+export type { AvatarImage, AvatarShape, AvatarSize } from './utils';