@nex-ui/react/dist/cjs/theme/recipes/avatar.cjs

🎉 A beautiful, modern, and reliable React component library.

'use strict';

var system = require('@nex-ui/system');
var toSlots = require('../shared/toSlots.cjs');
var variants = require('../shared/variants.cjs');

const avatarRecipe = system.defineSlotRecipe({
    slots: {
        root: {
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            color: 'colorPalette.contrastText',
            bg: 'colorPalette.primary',
            overflow: 'hidden',
            userSelect: 'none'
        },
        img: {
            width: '100%',
            height: '100%',
            objectFit: 'cover'
        }
    },
    variants: {
        size: {
            sm: {
                root: {
                    w: '8',
                    h: '8',
                    fs: 'md',
                    '& svg': {
                        fs: '1.5em'
                    }
                }
            },
            md: {
                root: {
                    w: '10',
                    h: '10',
                    fs: 'lg',
                    '& svg': {
                        fs: '1.6em'
                    }
                }
            },
            lg: {
                root: {
                    w: '12',
                    h: '12',
                    fs: 'xl',
                    '& svg': {
                        fs: '1.7em'
                    }
                }
            },
            xl: {
                root: {
                    w: '14',
                    h: '14',
                    fs: '2xl',
                    '& svg': {
                        fs: '1.8em'
                    }
                }
            }
        },
        radius: {
            ...toSlots.toSlots(variants.radiusVariant, 'root'),
            xl: {
                root: {
                    borderRadius: '2xl'
                }
            }
        },
        color: toSlots.toSlots(variants.colorVariant, 'root'),
        outlined: {
            true: {
                root: {
                    boxShadow: '0 0 0 2px #fff,0 0 0 4px {colors.colorPalette.primary}'
                }
            }
        },
        inGroup: {
            true: {
                root: {
                    transition: 'transform',
                    position: 'relative',
                    zIndex: 1,
                    ':not(:first-of-type)': {
                        ml: 'var(--avatar-group-spacing, {spaces.-2})'
                    },
                    ':not(:last-of-type)': {
                        _hover: {
                            transform: 'translateX(min(0px, var(--avatar-group-spacing, {spaces.-2})))'
                        }
                    }
                }
            }
        }
    },
    compoundVariants: [
        {
            size: 'sm',
            inGroup: true,
            css: {
                root: {
                    ':not(:first-of-type)': {
                        ml: 'var(--avatar-group-spacing, {spaces.-1})'
                    }
                }
            }
        },
        {
            size: 'lg',
            inGroup: true,
            css: {
                root: {
                    ':not(:first-of-type)': {
                        ml: 'var(--avatar-group-spacing, {spaces.-3})'
                    }
                }
            }
        },
        {
            size: 'xl',
            inGroup: true,
            css: {
                root: {
                    ':not(:first-of-type)': {
                        ml: 'var(--avatar-group-spacing, {spaces.-4})'
                    }
                }
            }
        }
    ],
    defaultVariants: {
        size: 'md',
        radius: 'md',
        color: 'gray'
    }
});
const avatarGroupRecipe = system.defineRecipe({
    base: {
        display: 'flex',
        alignItems: 'center'
    }
});

exports.avatarGroupRecipe = avatarGroupRecipe;
exports.avatarRecipe = avatarRecipe;