@codeworker.br/govbr-tw-react/dist/components/AvatarGroup/index.js

Biblioteca de componentes React usando Tailwind CSS que implementa o Padrão Digital de Governo.

import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import React, { cloneElement, isValidElement, useMemo, } from "react";
import BASE_CLASSNAMES from "../../config/baseClassNames";
import { cn } from "../../libs/utils";
import { Avatar } from "../Avatar";
const getAvatarSize = (providedSize, avatars) => {
    if (providedSize) {
        return providedSize;
    }
    const first = avatars.find((avatar) => avatar.props.size);
    if (first === null || first === void 0 ? void 0 : first.props.size) {
        return first.props.size;
    }
    return "small";
};
const defaultOverflowAvatar = (extraCount, size) => (_jsxs(Avatar, { size: size, variant: "initials", className: cn("bg-govbr-gray-20 text-xs font-semibold uppercase text-govbr-gray-80 sm:text-sm", BASE_CLASSNAMES.avatarGroup.overflow), title: `Mais ${extraCount}`, children: ["+", extraCount] }, "avatar-group-overflow"));
const AvatarGroup = ({ children, spacing, maxVisible, renderOverflowAvatar = defaultOverflowAvatar, className, size, }) => {
    const avatarChildren = useMemo(() => React.Children.toArray(children).filter((child) => isValidElement(child)), [children]);
    if (avatarChildren.length === 0) {
        return null;
    }
    const effectiveSize = getAvatarSize(size, avatarChildren);
    const visibleCount = typeof maxVisible === "number" && maxVisible >= 0
        ? Math.min(maxVisible, avatarChildren.length)
        : avatarChildren.length;
    const extraCount = Math.max(avatarChildren.length - visibleCount, 0);
    const visibleAvatars = avatarChildren.slice(0, visibleCount);
    const overflowAvatar = extraCount > 0 ? renderOverflowAvatar(extraCount, effectiveSize) : null;
    const spacingClasses = (spacing === null || spacing === void 0 ? void 0 : spacing.trim()) || "space-x-2";
    const spacingTokens = spacingClasses.split(/\s+/).filter(Boolean);
    const hasNegativeSpace = (token) => {
        const parts = token.split(":");
        const base = parts[parts.length - 1];
        return base.startsWith("-space-x");
    };
    const isStacking = spacingTokens.some(hasNegativeSpace);
    const entries = overflowAvatar
        ? [...visibleAvatars, overflowAvatar]
        : visibleAvatars;
    const processed = entries.map((entry, index) => {
        var _a, _b;
        if (!isValidElement(entry)) {
            return entry;
        }
        const elementStyle = Object.assign({}, ((_a = entry.props.style) !== null && _a !== void 0 ? _a : {}));
        const extraClassNames = [BASE_CLASSNAMES.avatarGroup.item];
        if (isStacking) {
            if (!elementStyle.position) {
                elementStyle.position = "relative";
            }
            elementStyle.zIndex = index + 1;
            extraClassNames.push("ring-2 ring-white");
        }
        return cloneElement(entry, {
            key: (_b = entry.key) !== null && _b !== void 0 ? _b : `avatar-${index}`,
            className: cn(entry.props.className, extraClassNames),
            style: elementStyle,
        });
    });
    return (_jsx("div", { className: cn("flex items-center", spacingClasses, BASE_CLASSNAMES.avatarGroup.root, isStacking ? BASE_CLASSNAMES.avatarGroup.stacked : undefined, className), role: "group", children: processed }));
};
AvatarGroup.displayName = "AvatarGroup";
export { AvatarGroup };