@channel.io/bezier-react 2.0.2 → 2.0.3

package/dist/cjs/components/AlphaAvatar/Avatar.js

@@ -0,0 +1,121 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../node_modules/classnames/index.js');
+var type = require('../../utils/type.js');
+var AvatarGroup = require('../AlphaAvatarGroup/AvatarGroup.js');
+var defaultAvatar = require('./assets/default-avatar.svg.js');
+var useProgressiveImage = require('./useProgressiveImage.js');
+var Avatar_module = require('./Avatar.module.scss.js');
+var ThemeProvider = require('../ThemeProvider/ThemeProvider.js');
+var SmoothCornersBox = require('../SmoothCornersBox/SmoothCornersBox.js');
+var Status = require('../Status/Status.js');
+
+function getStatusSize(size) {
+  switch (size) {
+    case '90':
+    case '120':
+      return 'l';
+    default:
+      return 'm';
+  }
+}
+function getShadow(size) {
+  const spreadRadius = (() => {
+    switch (size) {
+      case '90':
+        return 3;
+      case '120':
+        return 4;
+      default:
+        return 2;
+    }
+  })();
+  return {
+    spreadRadius,
+    color: 'bg-white-high'
+  };
+}
+function useAvatarRadiusToken() {
+  // TODO: Replace this with useAlphaTokens
+  return ThemeProvider.useTokens().global.radius['radius-42-p'];
+}
+const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper';
+const AVATAR_TEST_ID = 'bezier-avatar';
+const STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper';
+
+/**
+ * `Avatar` is a component for representing some profile image.
+ * @example
+ *
+ * ```tsx
+ * <Avatar
+ *   avatarUrl="https://..."
+ *   name="channel"
+ *   size="48"
+ *   showBorder
+ *   disabled
+ * />
+ * ```
+ */
+const Avatar = /*#__PURE__*/React.forwardRef(function Avatar({
+  avatarUrl = '',
+  fallbackUrl = defaultAvatar.default,
+  size: sizeProps = '24',
+  name,
+  disabled = false,
+  showBorder = false,
+  smoothCorners = true,
+  status,
+  className,
+  children,
+  ...rest
+}, forwardedRef) {
+  const avatarGroupContext = AvatarGroup.useAvatarGroupContext();
+  const size = avatarGroupContext?.size ?? sizeProps;
+  const loadedAvatarUrl = useProgressiveImage.default(avatarUrl, fallbackUrl);
+  const AVATAR_BORDER_RADIUS = useAvatarRadiusToken();
+  const StatusComponent = React.useMemo(() => {
+    if (type.isEmpty(children) && !status || children && ! /*#__PURE__*/React.isValidElement(children)) {
+      return null;
+    }
+    const Contents = (() => {
+      if (children) {
+        return children;
+      }
+      if (status) {
+        return /*#__PURE__*/React.createElement(Status.Status, {
+          type: status,
+          size: getStatusSize(size)
+        });
+      }
+      return null;
+    })();
+    return Contents && /*#__PURE__*/React.createElement("div", {
+      className: Avatar_module.default.StatusWrapper,
+      "data-testid": STATUS_WRAPPER_TEST_ID
+    }, Contents);
+  }, [status, size, children]);
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: index.default(Avatar_module.default.Avatar, Avatar_module.default[`size-${size}`], disabled && Avatar_module.default.disabled, className),
+    "data-disabled": disabled,
+    "data-testid": AVATAR_WRAPPER_TEST_ID
+  }, rest), /*#__PURE__*/React.createElement(SmoothCornersBox.SmoothCornersBox, {
+    ref: forwardedRef,
+    "aria-label": name,
+    className: index.default(Avatar_module.default.AvatarImage, Number(size) >= 72 && Avatar_module.default['big-size'], showBorder && Avatar_module.default.bordered),
+    disabled: !smoothCorners,
+    borderRadius: AVATAR_BORDER_RADIUS,
+    shadow: showBorder ? getShadow(size) : undefined,
+    backgroundColor: "bg-white-normal",
+    backgroundImage: loadedAvatarUrl,
+    "data-testid": AVATAR_TEST_ID
+  }, StatusComponent));
+});
+
+exports.AVATAR_TEST_ID = AVATAR_TEST_ID;
+exports.AVATAR_WRAPPER_TEST_ID = AVATAR_WRAPPER_TEST_ID;
+exports.Avatar = Avatar;
+exports.STATUS_WRAPPER_TEST_ID = STATUS_WRAPPER_TEST_ID;
+exports.useAvatarRadiusToken = useAvatarRadiusToken;
+//# sourceMappingURL=Avatar.js.map

package/dist/cjs/components/AlphaAvatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../../../src/components/AlphaAvatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { useAvatarGroupContext } from '~/src/components/AlphaAvatarGroup/AvatarGroup'\nimport {\n  SmoothCornersBox,\n  type SmoothCornersBoxProps,\n} from '~/src/components/SmoothCornersBox'\nimport { Status, type StatusSize } from '~/src/components/Status'\nimport { useTokens } from '~/src/components/ThemeProvider'\n\nimport type { AvatarProps, AvatarSize } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nfunction getStatusSize(size: AvatarSize): StatusSize {\n  switch (size) {\n    case '90':\n    case '120':\n      return 'l'\n    default:\n      return 'm'\n  }\n}\n\nfunction getShadow(size: AvatarSize): SmoothCornersBoxProps['shadow'] {\n  const spreadRadius = (() => {\n    switch (size) {\n      case '90':\n        return 3\n      case '120':\n        return 4\n      default:\n        return 2\n    }\n  })()\n\n  return {\n    spreadRadius,\n    color: 'bg-white-high',\n  }\n}\n\nexport function useAvatarRadiusToken() {\n  // TODO: Replace this with useAlphaTokens\n  return useTokens().global.radius['radius-42-p']\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'\nexport const AVATAR_TEST_ID = 'bezier-avatar'\nexport const STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper'\n\n/**\n * `Avatar` is a component for representing some profile image.\n * @example\n *\n * ```tsx\n * <Avatar\n *   avatarUrl=\"https://...\"\n *   name=\"channel\"\n *   size=\"48\"\n *   showBorder\n *   disabled\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    avatarUrl = '',\n    fallbackUrl = defaultAvatarUrl,\n    size: sizeProps = '24',\n    name,\n    disabled = false,\n    showBorder = false,\n    smoothCorners = true,\n    status,\n    className,\n    children,\n    ...rest\n  },\n  forwardedRef\n) {\n  const avatarGroupContext = useAvatarGroupContext()\n  const size = avatarGroupContext?.size ?? sizeProps\n  const loadedAvatarUrl = useProgressiveImage(avatarUrl, fallbackUrl)\n  const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n  const StatusComponent = useMemo(() => {\n    if (\n      (isEmpty(children) && !status) ||\n      (children && !React.isValidElement(children))\n    ) {\n      return null\n    }\n\n    const Contents = (() => {\n      if (children) {\n        return children\n      }\n      if (status) {\n        return (\n          <Status\n            type={status}\n            size={getStatusSize(size)}\n          />\n        )\n      }\n      return null\n    })()\n\n    return (\n      Contents && (\n        <div\n          className={styles.StatusWrapper}\n          data-testid={STATUS_WRAPPER_TEST_ID}\n        >\n          {Contents}\n        </div>\n      )\n    )\n  }, [status, size, children])\n\n  return (\n    <div\n      className={classNames(\n        styles.Avatar,\n        styles[`size-${size}`],\n        disabled && styles.disabled,\n        className\n      )}\n      data-disabled={disabled}\n      data-testid={AVATAR_WRAPPER_TEST_ID}\n      {...rest}\n    >\n      <SmoothCornersBox\n        ref={forwardedRef}\n        aria-label={name}\n        className={classNames(\n          styles.AvatarImage,\n          Number(size) >= 72 && styles['big-size'],\n          showBorder && styles.bordered\n        )}\n        disabled={!smoothCorners}\n        borderRadius={AVATAR_BORDER_RADIUS}\n        shadow={showBorder ? getShadow(size) : undefined}\n        backgroundColor=\"bg-white-normal\"\n        backgroundImage={loadedAvatarUrl}\n        data-testid={AVATAR_TEST_ID}\n      >\n        {StatusComponent}\n      </SmoothCornersBox>\n    </div>\n  )\n})\n"],"names":["getStatusSize","size","getShadow","spreadRadius","color","useAvatarRadiusToken","useTokens","global","radius","AVATAR_WRAPPER_TEST_ID","AVATAR_TEST_ID","STATUS_WRAPPER_TEST_ID","Avatar","forwardRef","avatarUrl","fallbackUrl","defaultAvatarUrl","sizeProps","name","disabled","showBorder","smoothCorners","status","className","children","rest","forwardedRef","avatarGroupContext","useAvatarGroupContext","loadedAvatarUrl","useProgressiveImage","AVATAR_BORDER_RADIUS","StatusComponent","useMemo","isEmpty","React","isValidElement","Contents","createElement","Status","type","styles","StatusWrapper","Object","assign","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","shadow","undefined","backgroundColor","backgroundImage"],"mappings":"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"}

package/dist/cjs/components/AlphaAvatar/Avatar.module.scss.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"Avatar":"b-fDR-U","disabled":"b-SnNT0","size-16":"b-v3W6R","size-20":"b-gC4cV","size-24":"b-lgU-A","size-30":"b-O61k6","size-36":"b-3M3QV","size-42":"b-cA6AB","size-48":"b-NETn8","size-72":"b-4bOSq","size-90":"b-dNqNN","size-120":"b-wyYTI","AvatarImage":"b-K69h3","big-size":"b-s7757","bordered":"b-Qctjl","StatusWrapper":"b-ZSr4L"};
+
+exports.default = styles;
+//# sourceMappingURL=Avatar.module.scss.js.map

package/dist/cjs/components/AlphaAvatar/Avatar.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/cjs/components/AlphaAvatar/assets/default-avatar.svg.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var defaultAvatarUrl = "data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23clip0%29%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22%23cfccfb%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M41%2023C41%2029.0744%2036.0744%2034%2030%2034C23.9256%2034%2019%2029.0744%2019%2023C19%2016.9256%2023.9256%2012%2030%2012C36.0744%2012%2041%2016.9256%2041%2023ZM30%2037C16.1929%2037%205%2048.1929%205%2062V90H55V62C55%2048.1929%2043.8071%2037%2030%2037Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.4%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
+
+exports.default = defaultAvatarUrl;
+//# sourceMappingURL=default-avatar.svg.js.map

package/dist/cjs/components/AlphaAvatar/assets/default-avatar.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-avatar.svg.js","sources":["../../../../../src/components/AlphaAvatar/assets/default-avatar.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23clip0%29%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22%23cfccfb%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M41%2023C41%2029.0744%2036.0744%2034%2030%2034C23.9256%2034%2019%2029.0744%2019%2023C19%2016.9256%2023.9256%2012%2030%2012C36.0744%2012%2041%2016.9256%2041%2023ZM30%2037C16.1929%2037%205%2048.1929%205%2062V90H55V62C55%2048.1929%2043.8071%2037%2030%2037Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.4%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\""],"names":[],"mappings":";;;;AAAA,uBAAe;;;;"}

package/dist/cjs/components/AlphaAvatar/useProgressiveImage.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const imageCache = new Map();
+function getCachedImage(src) {
+  const cachedImage = imageCache.get(src);
+  if (!cachedImage) {
+    return null;
+  }
+  return cachedImage;
+}
+function useProgressiveImage(src, defaultSrc) {
+  const [source, setSource] = React.useState(() => getCachedImage(src));
+  React.useEffect(function updateSource() {
+    if (source?.src === src) {
+      return undefined;
+    }
+    const cachedImage = getCachedImage(src);
+    if (cachedImage?.isLoaded) {
+      setSource(cachedImage);
+      return undefined;
+    }
+    const image = new Image();
+    image.src = src;
+    image.onload = loadImage(true);
+    image.onerror = loadImage(false);
+    function loadImage(isLoaded) {
+      return () => {
+        const loadedImage = {
+          src,
+          isLoaded
+        };
+        setSource(loadedImage);
+        imageCache.set(src, loadedImage);
+      };
+    }
+  }, [src, source]);
+  if (!source || !source.isLoaded) {
+    return defaultSrc;
+  }
+  return source.src;
+}
+
+exports.default = useProgressiveImage;
+//# sourceMappingURL=useProgressiveImage.js.map

package/dist/cjs/components/AlphaAvatar/useProgressiveImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProgressiveImage.js","sources":["../../../../src/components/AlphaAvatar/useProgressiveImage.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\n\ninterface CachedImage {\n  src: string\n  isLoaded: boolean\n}\n\nconst imageCache = new Map<string, CachedImage>()\n\nfunction getCachedImage(src: string) {\n  const cachedImage = imageCache.get(src)\n  if (!cachedImage) {\n    return null\n  }\n  return cachedImage\n}\n\nexport default function useProgressiveImage(src: string, defaultSrc: string) {\n  const [source, setSource] = useState<CachedImage | null>(() =>\n    getCachedImage(src)\n  )\n\n  useEffect(\n    function updateSource() {\n      if (source?.src === src) {\n        return undefined\n      }\n\n      const cachedImage = getCachedImage(src)\n\n      if (cachedImage?.isLoaded) {\n        setSource(cachedImage)\n        return undefined\n      }\n\n      const image = new Image()\n      image.src = src\n      image.onload = loadImage(true)\n      image.onerror = loadImage(false)\n\n      function loadImage(isLoaded: boolean) {\n        return () => {\n          const loadedImage = {\n            src,\n            isLoaded,\n          }\n          setSource(loadedImage)\n          imageCache.set(src, loadedImage)\n        }\n      }\n    },\n    [src, source]\n  )\n\n  if (!source || !source.isLoaded) {\n    return defaultSrc\n  }\n\n  return source.src\n}\n"],"names":["imageCache","Map","getCachedImage","src","cachedImage","get","useProgressiveImage","defaultSrc","source","setSource","useState","useEffect","updateSource","undefined","isLoaded","image","Image","onload","loadImage","onerror","loadedImage","set"],"mappings":";;;;;;AAOA,MAAMA,UAAU,GAAG,IAAIC,GAAG,EAAuB,CAAA;AAEjD,SAASC,cAAcA,CAACC,GAAW,EAAE;AACnC,EAAA,MAAMC,WAAW,GAAGJ,UAAU,CAACK,GAAG,CAACF,GAAG,CAAC,CAAA;EACvC,IAAI,CAACC,WAAW,EAAE;AAChB,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AACA,EAAA,OAAOA,WAAW,CAAA;AACpB,CAAA;AAEe,SAASE,mBAAmBA,CAACH,GAAW,EAAEI,UAAkB,EAAE;AAC3E,EAAA,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAqB,MACvDR,cAAc,CAACC,GAAG,CACpB,CAAC,CAAA;AAEDQ,EAAAA,eAAS,CACP,SAASC,YAAYA,GAAG;AACtB,IAAA,IAAIJ,MAAM,EAAEL,GAAG,KAAKA,GAAG,EAAE;AACvB,MAAA,OAAOU,SAAS,CAAA;AAClB,KAAA;AAEA,IAAA,MAAMT,WAAW,GAAGF,cAAc,CAACC,GAAG,CAAC,CAAA;IAEvC,IAAIC,WAAW,EAAEU,QAAQ,EAAE;MACzBL,SAAS,CAACL,WAAW,CAAC,CAAA;AACtB,MAAA,OAAOS,SAAS,CAAA;AAClB,KAAA;AAEA,IAAA,MAAME,KAAK,GAAG,IAAIC,KAAK,EAAE,CAAA;IACzBD,KAAK,CAACZ,GAAG,GAAGA,GAAG,CAAA;AACfY,IAAAA,KAAK,CAACE,MAAM,GAAGC,SAAS,CAAC,IAAI,CAAC,CAAA;AAC9BH,IAAAA,KAAK,CAACI,OAAO,GAAGD,SAAS,CAAC,KAAK,CAAC,CAAA;IAEhC,SAASA,SAASA,CAACJ,QAAiB,EAAE;AACpC,MAAA,OAAO,MAAM;AACX,QAAA,MAAMM,WAAW,GAAG;UAClBjB,GAAG;AACHW,UAAAA,QAAAA;SACD,CAAA;QACDL,SAAS,CAACW,WAAW,CAAC,CAAA;AACtBpB,QAAAA,UAAU,CAACqB,GAAG,CAAClB,GAAG,EAAEiB,WAAW,CAAC,CAAA;OACjC,CAAA;AACH,KAAA;AACF,GAAC,EACD,CAACjB,GAAG,EAAEK,MAAM,CACd,CAAC,CAAA;AAED,EAAA,IAAI,CAACA,MAAM,IAAI,CAACA,MAAM,CAACM,QAAQ,EAAE;AAC/B,IAAA,OAAOP,UAAU,CAAA;AACnB,GAAA;EAEA,OAAOC,MAAM,CAACL,GAAG,CAAA;AACnB;;;;"}

package/dist/cjs/components/AlphaAvatarGroup/AvatarGroup.js

@@ -0,0 +1,153 @@
+'use strict';
+
+var React = require('react');
+var bezierIcons = require('@channel.io/bezier-icons');
+var index = require('../../node_modules/classnames/index.js');
+var array = require('../../utils/array.js');
+var react = require('../../utils/react.js');
+var style = require('../../utils/style.js');
+var AvatarGroup_module = require('./AvatarGroup.module.scss.js');
+var Avatar = require('../AlphaAvatar/Avatar.js');
+var SmoothCornersBox = require('../SmoothCornersBox/SmoothCornersBox.js');
+var Icon = require('../Icon/Icon.js');
+var Text = require('../Text/Text.js');
+
+const [AvatarGroupContextProvider, useAvatarGroupContext] = react.createContext(undefined);
+const MAX_AVATAR_LIST_COUNT = 99;
+const AVATAR_GROUP_DEFAULT_SPACING = 4;
+const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID = 'bezier-avatar-group-ellipsis-icon';
+function getRestAvatarListCountText(count, max) {
+  const restCount = count - max;
+  return `+${restCount > MAX_AVATAR_LIST_COUNT ? MAX_AVATAR_LIST_COUNT : restCount}`;
+}
+
+// TODO: Not specified
+function getProperIconSize(size) {
+  return {
+    16: 'xxs',
+    20: 'xxs',
+    24: 'xs',
+    30: 's',
+    36: 'm',
+    42: 'm',
+    48: 'l',
+    72: 'l',
+    90: 'l',
+    120: 'l'
+  }[size];
+}
+
+// TODO: Not specified
+function getProperTypoSize(size) {
+  return {
+    16: '12',
+    20: '12',
+    24: '13',
+    30: '15',
+    36: '16',
+    42: '18',
+    48: '24',
+    72: '24',
+    90: '24',
+    120: '24'
+  }[size];
+}
+
+/**
+ * `AvatarGroup` is a component for grouping `Avatar` components
+ * @example
+ *
+ * ```tsx
+ * <AvatarGroup
+ *  max={2}
+ *  size="24"
+ *  spacing={4}
+ *  ellipsisType="icon"
+ * >
+ *    <Avatar />
+ *    <Avatar />
+ *    <Avatar />
+ * </AvatarGroup>
+ * ```
+ */
+const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
+  max = 5,
+  size = '24',
+  spacing = AVATAR_GROUP_DEFAULT_SPACING,
+  ellipsisType = 'icon',
+  style: style$1,
+  className,
+  children,
+  ...rest
+}, forwardedRef) {
+  const AVATAR_BORDER_RADIUS = Avatar.useAvatarRadiusToken();
+  const avatarListCount = React.Children.count(children);
+  const renderAvatarElement = React.useCallback(avatar => {
+    const key = avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`;
+    const shouldShowBorder = max > 1 && avatarListCount > 1 && spacing < 0;
+    const showBorder = avatar.props.showBorder || shouldShowBorder;
+    return /*#__PURE__*/React.cloneElement(avatar, {
+      key,
+      showBorder
+    });
+  }, [avatarListCount, max, spacing]);
+  const AvatarListComponent = React.useMemo(() => {
+    return React.Children.toArray(children).slice(0, max).map((avatar, index$1, arr) => {
+      if (! /*#__PURE__*/React.isValidElement(avatar)) {
+        return null;
+      }
+      const AvatarElement = renderAvatarElement(avatar);
+      if (!array.isLastIndex(arr, index$1) || avatarListCount <= max) {
+        return AvatarElement;
+      }
+      if (ellipsisType === 'icon') {
+        return /*#__PURE__*/React.createElement("div", {
+          key: "ellipsis",
+          className: AvatarGroup_module.default.AvatarEllipsisIconWrapper,
+          "data-testid": AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID
+        }, /*#__PURE__*/React.createElement(SmoothCornersBox.SmoothCornersBox, {
+          borderRadius: AVATAR_BORDER_RADIUS,
+          backgroundColor: "bgtxt-absolute-black-lightest",
+          className: AvatarGroup_module.default.AvatarEllipsisIcon
+        }, /*#__PURE__*/React.createElement(Icon.Icon, {
+          source: bezierIcons.MoreIcon,
+          size: getProperIconSize(size),
+          color: "bgtxt-absolute-white-dark"
+        })), AvatarElement);
+      }
+      if (ellipsisType === 'count') {
+        return /*#__PURE__*/React.createElement(React.Fragment, {
+          key: "ellipsis"
+        }, AvatarElement, /*#__PURE__*/React.createElement("div", {
+          style: {
+            '--b-avatar-group-ellipsis-ml': style.px(Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING))
+          },
+          className: index.default(AvatarGroup_module.default.AvatarEllipsisCountWrapper)
+        }, /*#__PURE__*/React.createElement(Text.Text, {
+          typo: getProperTypoSize(size),
+          color: "txt-black-dark",
+          className: AvatarGroup_module.default.AvatarEllipsisCount
+        }, getRestAvatarListCountText(avatarListCount, max))));
+      }
+      return null;
+    });
+  }, [avatarListCount, max, children, renderAvatarElement, ellipsisType, AVATAR_BORDER_RADIUS, size, spacing]);
+  return /*#__PURE__*/React.createElement(AvatarGroupContextProvider, {
+    value: React.useMemo(() => ({
+      size
+    }), [size])
+  }, /*#__PURE__*/React.createElement("div", Object.assign({
+    role: "group",
+    ref: forwardedRef,
+    className: index.default(AvatarGroup_module.default.AvatarGroup, AvatarGroup_module.default[`size-${size}`], className),
+    style: {
+      '--b-avatar-group-spacing': style.px(spacing),
+      ...style$1
+    }
+  }, rest), AvatarListComponent));
+});
+
+exports.AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID = AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID;
+exports.AvatarGroup = AvatarGroup;
+exports.useAvatarGroupContext = useAvatarGroupContext;
+//# sourceMappingURL=AvatarGroup.js.map

package/dist/cjs/components/AlphaAvatarGroup/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","sources":["../../../../src/components/AlphaAvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react'\n\nimport { MoreIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isLastIndex } from '~/src/utils/array'\nimport { createContext } from '~/src/utils/react'\nimport { px } from '~/src/utils/style'\n\nimport {\n  type AlphaAvatarProps,\n  type AlphaAvatarSize,\n  useAlphaAvatarRadiusToken,\n} from '~/src/components/AlphaAvatar'\nimport { Icon } from '~/src/components/Icon'\nimport { SmoothCornersBox } from '~/src/components/SmoothCornersBox'\nimport { Text } from '~/src/components/Text'\n\nimport {\n  type AvatarGroupContextValue,\n  type AvatarGroupProps,\n} from './AvatarGroup.types'\n\nimport styles from './AvatarGroup.module.scss'\n\nconst [AvatarGroupContextProvider, useAvatarGroupContext] = createContext<\n  AvatarGroupContextValue | undefined\n>(undefined)\n\nexport { useAvatarGroupContext }\n\nconst MAX_AVATAR_LIST_COUNT = 99\nconst AVATAR_GROUP_DEFAULT_SPACING = 4\nexport const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID =\n  'bezier-avatar-group-ellipsis-icon'\n\nfunction getRestAvatarListCountText(count: number, max: number) {\n  const restCount = count - max\n  return `+${restCount > MAX_AVATAR_LIST_COUNT ? MAX_AVATAR_LIST_COUNT : restCount}`\n}\n\n// TODO: Not specified\nfunction getProperIconSize(size: AlphaAvatarSize) {\n  return (\n    {\n      16: 'xxs',\n      20: 'xxs',\n      24: 'xs',\n      30: 's',\n      36: 'm',\n      42: 'm',\n      48: 'l',\n      72: 'l',\n      90: 'l',\n      120: 'l',\n    } as const\n  )[size]\n}\n\n// TODO: Not specified\nfunction getProperTypoSize(size: AlphaAvatarSize) {\n  return (\n    {\n      16: '12',\n      20: '12',\n      24: '13',\n      30: '15',\n      36: '16',\n      42: '18',\n      48: '24',\n      72: '24',\n      90: '24',\n      120: '24',\n    } as const\n  )[size]\n}\n\n/**\n * `AvatarGroup` is a component for grouping `Avatar` components\n * @example\n *\n * ```tsx\n * <AvatarGroup\n *  max={2}\n *  size=\"24\"\n *  spacing={4}\n *  ellipsisType=\"icon\"\n * >\n *    <Avatar />\n *    <Avatar />\n *    <Avatar />\n * </AvatarGroup>\n * ```\n */\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n  function AvatarGroup(\n    {\n      max = 5,\n      size = '24',\n      spacing = AVATAR_GROUP_DEFAULT_SPACING,\n      ellipsisType = 'icon',\n      style,\n      className,\n      children,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const AVATAR_BORDER_RADIUS = useAlphaAvatarRadiusToken()\n    const avatarListCount = React.Children.count(children)\n\n    const renderAvatarElement = useCallback(\n      (avatar: React.ReactElement<AlphaAvatarProps>) => {\n        const key =\n          avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`\n        const shouldShowBorder = max > 1 && avatarListCount > 1 && spacing < 0\n        const showBorder = avatar.props.showBorder || shouldShowBorder\n        return React.cloneElement(avatar, { key, showBorder })\n      },\n      [avatarListCount, max, spacing]\n    )\n\n    const AvatarListComponent = useMemo(() => {\n      return React.Children.toArray(children)\n        .slice(0, max)\n        .map((avatar, index, arr) => {\n          if (!React.isValidElement<AlphaAvatarProps>(avatar)) {\n            return null\n          }\n\n          const AvatarElement = renderAvatarElement(avatar)\n\n          if (!isLastIndex(arr, index) || avatarListCount <= max) {\n            return AvatarElement\n          }\n\n          if (ellipsisType === 'icon') {\n            return (\n              <div\n                key=\"ellipsis\"\n                className={styles.AvatarEllipsisIconWrapper}\n                data-testid={AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID}\n              >\n                <SmoothCornersBox\n                  borderRadius={AVATAR_BORDER_RADIUS}\n                  backgroundColor=\"bgtxt-absolute-black-lightest\"\n                  className={styles.AvatarEllipsisIcon}\n                >\n                  <Icon\n                    source={MoreIcon}\n                    size={getProperIconSize(size)}\n                    color=\"bgtxt-absolute-white-dark\"\n                  />\n                </SmoothCornersBox>\n                {AvatarElement}\n              </div>\n            )\n          }\n\n          if (ellipsisType === 'count') {\n            return (\n              <React.Fragment key=\"ellipsis\">\n                {AvatarElement}\n                <div\n                  style={\n                    {\n                      '--b-avatar-group-ellipsis-ml': px(\n                        Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING)\n                      ),\n                    } as React.CSSProperties\n                  }\n                  className={classNames(styles.AvatarEllipsisCountWrapper)}\n                >\n                  <Text\n                    typo={getProperTypoSize(size)}\n                    color=\"txt-black-dark\"\n                    className={styles.AvatarEllipsisCount}\n                  >\n                    {getRestAvatarListCountText(avatarListCount, max)}\n                  </Text>\n                </div>\n              </React.Fragment>\n            )\n          }\n\n          return null\n        })\n    }, [\n      avatarListCount,\n      max,\n      children,\n      renderAvatarElement,\n      ellipsisType,\n      AVATAR_BORDER_RADIUS,\n      size,\n      spacing,\n    ])\n\n    return (\n      <AvatarGroupContextProvider\n        value={useMemo(\n          () => ({\n            size,\n          }),\n          [size]\n        )}\n      >\n        <div\n          role=\"group\"\n          ref={forwardedRef}\n          className={classNames(\n            styles.AvatarGroup,\n            styles[`size-${size}`],\n            className\n          )}\n          style={\n            {\n              '--b-avatar-group-spacing': px(spacing),\n              ...style,\n            } as React.CSSProperties\n          }\n          {...rest}\n        >\n          {AvatarListComponent}\n        </div>\n      </AvatarGroupContextProvider>\n    )\n  }\n)\n"],"names":["AvatarGroupContextProvider","useAvatarGroupContext","createContext","undefined","MAX_AVATAR_LIST_COUNT","AVATAR_GROUP_DEFAULT_SPACING","AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID","getRestAvatarListCountText","count","max","restCount","getProperIconSize","size","getProperTypoSize","AvatarGroup","forwardRef","spacing","ellipsisType","style","className","children","rest","forwardedRef","AVATAR_BORDER_RADIUS","useAlphaAvatarRadiusToken","avatarListCount","React","Children","renderAvatarElement","useCallback","avatar","key","props","name","avatarUrl","shouldShowBorder","showBorder","cloneElement","AvatarListComponent","useMemo","toArray","slice","map","index","arr","isValidElement","AvatarElement","isLastIndex","createElement","styles","AvatarEllipsisIconWrapper","SmoothCornersBox","borderRadius","backgroundColor","AvatarEllipsisIcon","Icon","source","MoreIcon","color","Fragment","px","Math","classNames","AvatarEllipsisCountWrapper","Text","typo","AvatarEllipsisCount","value","Object","assign","role","ref"],"mappings":"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"}

package/dist/cjs/components/AlphaAvatarGroup/AvatarGroup.module.scss.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"Avatar":"b-EUIBZ","disabled":"b-r0qvh","size-16":"b-ieYAz","size-20":"b-kYxYF","size-24":"b-89-dE","size-30":"b-3oC7r","size-36":"b-saxkg","size-42":"b-SnpVF","size-48":"b-MdIGf","size-72":"b-lWIXR","size-90":"b-Ny-RI","size-120":"b--IfyP","AvatarImage":"b-OXNdE","big-size":"b-zD-uu","bordered":"b--g-5e","StatusWrapper":"b-TwIX8","AvatarGroup":"b-27zD4","AvatarEllipsisIconWrapper":"b-DAfQV","AvatarEllipsisIcon":"b-3kWFn","AvatarEllipsisCountWrapper":"b-l557G","AvatarEllipsisCount":"b-LTmB2"};
+
+exports.default = styles;
+//# sourceMappingURL=AvatarGroup.module.scss.js.map

package/dist/cjs/components/AlphaAvatarGroup/AvatarGroup.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/cjs/index.js

@@ -2,12 +2,14 @@
 
 var index = require('./packages/bezier-tokens/dist/esm/index.js');
 var useKeyboardActionLockerWhileComposing = require('./hooks/useKeyboardActionLockerWhileComposing.js');
+var Avatar = require('./components/AlphaAvatar/Avatar.js');
+var AvatarGroup = require('./components/AlphaAvatarGroup/AvatarGroup.js');
 var DialogPrimitive = require('./components/AlphaDialogPrimitive/DialogPrimitive.js');
 var TooltipPrimitive = require('./components/AlphaTooltipPrimitive/TooltipPrimitive.js');
 var AppProvider = require('./components/AppProvider/AppProvider.js');
 var AutoFocus = require('./components/AutoFocus/AutoFocus.js');
-var Avatar = require('./components/Avatar/Avatar.js');
-var AvatarGroup = require('./components/AvatarGroup/AvatarGroup.js');
+var Avatar$1 = require('./components/Avatar/Avatar.js');
+var AvatarGroup$1 = require('./components/AvatarGroup/AvatarGroup.js');
 var Badge = require('./components/Badge/Badge.js');
 var Banner = require('./components/Banner/Banner.js');
 var Box = require('./components/Box/Box.js');
@@ -70,6 +72,9 @@ var WindowProvider = require('./components/WindowProvider/WindowProvider.js');
 exports.tokens = index.tokens;
 exports.COMMON_IME_CONTROL_KEYS = useKeyboardActionLockerWhileComposing.COMMON_IME_CONTROL_KEYS;
 exports.useKeyboardActionLockerWhileComposing = useKeyboardActionLockerWhileComposing.useKeyboardActionLockerWhileComposing;
+exports.AlphaAvatar = Avatar.Avatar;
+exports.useAlphaAvatarRadiusToken = Avatar.useAvatarRadiusToken;
+exports.AlphaAvatarGroup = AvatarGroup.AvatarGroup;
 exports.AlphaDialogPrimitive = DialogPrimitive.DialogPrimitive;
 exports.AlphaDialogPrimitiveClose = DialogPrimitive.DialogPrimitiveClose;
 exports.AlphaDialogPrimitiveContent = DialogPrimitive.DialogPrimitiveContent;
@@ -86,9 +91,9 @@ exports.AlphaTooltipPrimitiveProvider = TooltipPrimitive.TooltipPrimitiveProvide
 exports.AlphaTooltipPrimitiveTrigger = TooltipPrimitive.TooltipPrimitiveTrigger;
 exports.AppProvider = AppProvider.AppProvider;
 exports.AutoFocus = AutoFocus.AutoFocus;
-exports.Avatar = Avatar.Avatar;
-exports.useAvatarRadiusToken = Avatar.useAvatarRadiusToken;
-exports.AvatarGroup = AvatarGroup.AvatarGroup;
+exports.Avatar = Avatar$1.Avatar;
+exports.useAvatarRadiusToken = Avatar$1.useAvatarRadiusToken;
+exports.AvatarGroup = AvatarGroup$1.AvatarGroup;
 exports.Badge = Badge.Badge;
 exports.Banner = Banner.Banner;
 exports.Box = Box.Box;

package/dist/cjs/index.js.map

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