import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
import { cx, cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
import { forwardRef, isValidElement } from 'react';
import { Box } from '../box/box.js';
import styles from './avatar.module.css.js';
import { Root, Image, Fallback } from '../../node_modules/.pnpm/@radix-ui_react-avatar@1.1.10_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-avatar/dist/index.js';

const avatar = cva(styles.avatar, {
    variants: {
        radius: {
            small: styles['avatar-small'],
            full: styles['avatar-full']
        },
        size: {
            1: styles['avatar-size-1'],
            2: styles['avatar-size-2'],
            3: styles['avatar-size-3'],
            4: styles['avatar-size-4'],
            5: styles['avatar-size-5'],
            6: styles['avatar-size-6'],
            7: styles['avatar-size-7'],
            8: styles['avatar-size-8'],
            9: styles['avatar-size-9'],
            10: styles['avatar-size-10'],
            11: styles['avatar-size-11'],
            12: styles['avatar-size-12'],
            13: styles['avatar-size-13']
        },
        variant: {
            solid: styles['avatar-solid'],
            soft: styles['avatar-soft']
        },
        disabled: {
            true: styles['avatar-disabled']
        },
        color: {
            indigo: styles['avatar-color-indigo'],
            orange: styles['avatar-color-orange'],
            mint: styles['avatar-color-mint'],
            neutral: styles['avatar-color-neutral'],
            sky: styles['avatar-color-sky'],
            lime: styles['avatar-color-lime'],
            grass: styles['avatar-color-grass'],
            cyan: styles['avatar-color-cyan'],
            iris: styles['avatar-color-iris'],
            purple: styles['avatar-color-purple'],
            pink: styles['avatar-color-pink'],
            crimson: styles['avatar-color-crimson'],
            gold: styles['avatar-color-gold']
        }
    },
    compoundVariants: [
        {
            variant: 'solid',
            color: 'indigo',
            className: styles['avatar-solid-indigo']
        },
        {
            variant: 'solid',
            color: 'orange',
            className: styles['avatar-solid-orange']
        },
        { variant: 'solid', color: 'mint', className: styles['avatar-solid-mint'] },
        { variant: 'solid', color: 'sky', className: styles['avatar-solid-sky'] },
        { variant: 'solid', color: 'lime', className: styles['avatar-solid-lime'] },
        {
            variant: 'solid',
            color: 'grass',
            className: styles['avatar-solid-grass']
        },
        { variant: 'solid', color: 'cyan', className: styles['avatar-solid-cyan'] },
        { variant: 'solid', color: 'iris', className: styles['avatar-solid-iris'] },
        {
            variant: 'solid',
            color: 'purple',
            className: styles['avatar-solid-purple']
        },
        { variant: 'solid', color: 'pink', className: styles['avatar-solid-pink'] },
        {
            variant: 'solid',
            color: 'crimson',
            className: styles['avatar-solid-crimson']
        },
        { variant: 'solid', color: 'gold', className: styles['avatar-solid-gold'] },
        {
            variant: 'soft',
            color: 'indigo',
            className: styles['avatar-soft-indigo']
        },
        {
            variant: 'soft',
            color: 'orange',
            className: styles['avatar-soft-orange']
        },
        { variant: 'soft', color: 'mint', className: styles['avatar-soft-mint'] },
        { variant: 'soft', color: 'sky', className: styles['avatar-soft-sky'] },
        { variant: 'soft', color: 'lime', className: styles['avatar-soft-lime'] },
        { variant: 'soft', color: 'grass', className: styles['avatar-soft-grass'] },
        { variant: 'soft', color: 'cyan', className: styles['avatar-soft-cyan'] },
        { variant: 'soft', color: 'iris', className: styles['avatar-soft-iris'] },
        {
            variant: 'soft',
            color: 'purple',
            className: styles['avatar-soft-purple']
        },
        { variant: 'soft', color: 'pink', className: styles['avatar-soft-pink'] },
        {
            variant: 'soft',
            color: 'crimson',
            className: styles['avatar-soft-crimson']
        },
        { variant: 'soft', color: 'gold', className: styles['avatar-soft-gold'] }
    ],
    defaultVariants: {
        size: 3,
        radius: 'small',
        variant: 'soft',
        color: 'indigo'
    }
});
const image = cva(styles.image);
/*
 * @desc Recursively get the avatar props even if it's
 * wrapped in another component like Tooltip, Flex, etc.
 */
const getAvatarProps = (element) => {
    const { props } = element;
    if (element.type === Avatar) {
        return props;
    }
    if (props.children) {
        if (isValidElement(props.children)) {
            return getAvatarProps(props.children);
        }
    }
    return {};
};
const AvatarRoot = forwardRef(({ className, alt, src, fallback, size, radius, variant, color, style, asChild, ...props }, ref) => (jsxRuntimeExports.jsx(Box, { className: styles.imageWrapper, style: style, children: jsxRuntimeExports.jsxs(Root, { ref: ref, className: cx(avatar({ size, radius, variant, color }), className), asChild: asChild, ...props, children: [jsxRuntimeExports.jsx(Image, { className: image(), src: src, alt: alt }), jsxRuntimeExports.jsx(Fallback, { className: styles.fallback, children: fallback })] }) })));
AvatarRoot.displayName = Root.displayName;
const Avatar = AvatarRoot;
const AvatarGroup = forwardRef(({ children, max, className, ...props }, ref) => {
    const avatars = max ? children.slice(0, max) : children;
    const count = max && children.length > max ? children.length - max : 0;
    // Overflow avatar matches the first avatar styling
    const firstAvatarProps = getAvatarProps(avatars[0]);
    return (jsxRuntimeExports.jsxs("div", { ref: ref, className: cx(styles.avatarGroup, className), ...props, children: [avatars.map((avatar, index) => (jsxRuntimeExports.jsx("div", { className: styles.avatarWrapper, children: avatar }, index))), count > 0 && (jsxRuntimeExports.jsx("div", { className: styles.avatarWrapper, children: jsxRuntimeExports.jsx(Avatar, { size: firstAvatarProps.size, radius: firstAvatarProps.radius, variant: firstAvatarProps.variant, color: 'neutral', fallback: `+${count}` }) }))] }));
});

export { Avatar, AvatarGroup, getAvatarProps };
//# sourceMappingURL=avatar.js.map
