UNPKG

@metamask/design-system-react

Version:
1 lines 2.88 kB
{"version":3,"file":"AvatarGroup.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { AvatarGroupSize, AvatarGroupVariant } from '../../types';\nimport type { AvatarAccountProps } from '../AvatarAccount';\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type { AvatarFaviconProps } from '../AvatarFavicon';\nimport type { AvatarNetworkProps } from '../AvatarNetwork';\nimport type { AvatarTokenProps } from '../AvatarToken';\n\ntype BaseAvatarGroupProps = {\n /**\n * Optional enum to select between Avatar Group sizes.\n *\n * @default AvatarGroupSize.Md\n */\n size?: AvatarGroupSize;\n /**\n * Optional enum to select max number of Avatars visible,\n * before the overflow counter being displayed\n *\n * @default 4\n */\n max?: number;\n /**\n * Optional prop to reverse the direction of the AvatarGroup\n */\n isReverse?: boolean;\n /**\n * Optional prop to pass additional AvatarBase props to the overflow Text element\n */\n overflowTextProps?: AvatarBaseProps;\n /**\n * Optional prop for additional CSS classes to be applied to the AvatarGroup component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles to be applied to the component.\n * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n */\n style?: React.CSSProperties;\n} & ComponentProps<'div'>;\n\n/**\n * AvatarGroup props.\n */\nexport type AvatarGroupProps = BaseAvatarGroupProps &\n (\n | {\n variant: AvatarGroupVariant.Account;\n /**\n * A list of Avatars to be horizontally stacked.\n * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n */\n avatarPropsArr: AvatarAccountProps[];\n }\n | {\n variant: AvatarGroupVariant.Favicon;\n /**\n * A list of Avatars to be horizontally stacked.\n * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n */\n avatarPropsArr: AvatarFaviconProps[];\n }\n | {\n variant: AvatarGroupVariant.Network;\n /**\n * A list of Avatars to be horizontally stacked.\n * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n */\n avatarPropsArr: AvatarNetworkProps[];\n }\n | {\n variant: AvatarGroupVariant.Token;\n /**\n * A list of Avatars to be horizontally stacked.\n * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n */\n avatarPropsArr: AvatarTokenProps[];\n }\n );\n"]}