@gravity-ui/uikit
Version:
Gravity UI base styling and components
19 lines (18 loc) • 1.13 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { Ellipsis } from '@gravity-ui/icons';
import { DEFAULT_AVATAR_SIZE } from "../Avatar/index.js";
import { Icon } from "../Icon/index.js";
import { block } from "../utils/cn.js";
import { COMPONENT_SIZE_TO_MORE_ICON_SIZE } from "./constants.js";
import i18n from "./i18n/index.js";
const b = block('avatar-stack');
/**
* Badge for displaying count of remaining avatars
*/
export const AvatarStackMore = React.forwardRef(({ className, count, 'aria-label': ariaLabel, borderColor = 'var(--g-color-line-generic-solid)', size = DEFAULT_AVATAR_SIZE, variant = 'counter', }, ref) => {
const { t } = i18n.useTranslation();
return (_jsx("div", { ref: ref, className: b('more', { size, 'has-border': Boolean(borderColor) }, className), "aria-label": ariaLabel || t('more', { count }), style: { borderColor }, children: variant === 'counter' ? (`+${count}`) : (_jsx(Icon, { size: COMPONENT_SIZE_TO_MORE_ICON_SIZE[size], data: Ellipsis })) }));
});
AvatarStackMore.displayName = 'AvatarStack.More';
//# sourceMappingURL=AvatarStackMore.js.map